Навигационные панели с помощью CSS. Очень простая горизонтальная панель навигации

Панель навигации - это один из элементов командного интерфейса программы. Она является своеобразным "оглавлением" раздела или вспомогательного окна (рис. 1.9). С помощью нее можно просматривать ту или иную информацию, содержащуюся в разделе или во вспомогательном окне.

В панели навигации содержатся навигационные команды, то есть команды, не вызывающие изменения данных, а позволяющие только перемещаться к нужной информации. Как правило, это команды перехода к каким либо спискам. При вызове такой команды соответствующий ей список отображается в рабочей области, замещая прежнее содержимое рабочей области.

Например, в результате вызова команды Склады в рабочей области будет открыт список складов (рис. 1.10).

Рисунок 1.9 – Панель навигации командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8 в режиме Конфигурация

Рисунок 1.10 – Вызов навигационной команды командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

Бывают ситуации, когда необходимо проанализировать или сравнить разные части одного и того же списка, или разные списки. В этом случае можно открыть одновременно несколько списков (рис. 1.11). Один - в основном окне, а остальные во вспомогательных окнах.

Чтобы список открылся во вспомогательном окне, при вызове навигационной команды нужно удерживать клавишу Shift.

Рисунок 1.11 – Вызов навигационной команды с открытием нескольких списков командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

Команды в панели навигации, как правило, расположены в трех стандартных группах (рис. 1.12).

Самая первая группа - Важное . Ее название не отображается, но команды этой группы выделены жирным шрифтом. Здесь находятся команды перехода к информации, которая используется наиболее часто в данном разделе.

Вторая группа - Обычное . Эта группа также не имеет заголовка, ее команды отображаются обычным шрифтом.

Третья группа - Смотри также . Команды этой группы предваряются заголовком См. также и не являются обязательными для работы в данном разделе. Но могут быть полезны.

Рисунок 1.12 – Вызов навигационной команды с открытием нескольких списков командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

Кроме стандартных групп в панели навигации могут существовать и группы, созданные разработчиком.

В группе команд Обычное могут существовать дополнительные группы команд. Такие группы имеют заголовки и команды, находящиеся в них, отображаются с отступом от левого края (рис. 1.13). Нажимая мышью на заголовки этих групп, команды можно скрывать и отображать.

Если разделы программы образуются подсистемами первого уровня, то группы команд в панели навигации образуются подсистемами второго и более низких уровней (рис. 1.14).

Как правило, количество команд, расположенных в группах Важное и См. также - невелико. В то время как в группе Основное может находиться довольно большое количество команд. Поэтому используется дополнительная группировка этих команд, которая позволяет проще ориентироваться в их составе.

Рисунок 1.13 – Дополнительные группы команд командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

Рисунок 1.14 – Соответствие групп команд и командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

Пользователь имеет возможность настроить состав панели навигации: добавить или удалить команды, изменить их порядок следования. Например, он может убрать группы команд Характеристики и Цены , а команду Корректировки остатков перенести в группу См. также (рис. 1.15) . Программа автоматически запоминает настройки, выполненные пользователем, и в следующий раз будет показывать панель навигации такой, как ее настроил пользователь

Рисунок 1.14 – Пользовательская перенастройка командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

Особенно это полезный материал для тех, кто занимается ретушированием и обработкой фотографий, так как в вашем деле необходимо быстро ориентироваться в пространстве рабочего изображения.

Итак, разберемся еще раз с ролями:

Фотошоп - это ваш самолет!

Вы - пилот!

Ваш штурвал - панель навигации!

Для управления изображением в Photoshop мы используем навигационную панель.
Если навигационная панель не видна, то ее нужно активировать в меню Window (Окна) - выбрать (Навигатор).

Давайте приглядимся к навигационной панели:

В области отмеченной буквой A мы видим редактор масштаба.

В данный момент изображение имеет масштаб 81.97% от настоящего размера.

Здесь можно вводить значения от 0.11% до 1600% .

Мы также можем использовать ползунок (отмечен буквой E ):

перетаскивая вправо - увеличиваете , влево - уменьшаете .

Кликая на значок (отмечен буквой В ) мы можем уменьшить постепенно небольшими шажками.

А этот значок (отмечен буквой С ) увеличивает. Красный квадратик, отмеченный буквой D , говорит нам о том, какая часть изображения видна в документе.

Это окошко будет становиться меньше и меньше в том случае, если мы будем постоянно увеличивать изображение.

Мы можем передвигать этот квадратик - просто наведите курсор на изображение в навигационной области пока не появится такой значок:

Когда это случится, вы просто зажимаете левую кнопку мыши и перетаскиваете окошко на тот участок изображения, который вам нужно корректировать в данный момент.

Заметьте: вы можете перетаскивать квадратик только в том случае, если он меньше чем само изображение.

Посмотрите на скриншоты:

на верхнем - мы не можем передвигать красный квадрат, на нижнем можем без проблем:

Важно отметить, что саму навигационную панель мы тоже можем увеличивать.

Просто потяните за нижний правый угол панели (отмечен красным цветом на скриншоте):

Это позволит увидеть больше деталей:

Надеемся, вам этот материал будет полезен, и вы будете закрытыми глазами ориентироваться по вашему бескрайнему изображению.

Приятного путешествия!

Последнее обновление: 27.04.2016

Панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы. Рассмотрим, как создать простенькую панель навигации.

Фактически панель навигации - это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент . Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.

Горизонтальное меню

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block .

Использование float

Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li , в который заключена ссылка, устанавливается float: left; . Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.

Второй этап заключается в установке у элемента ссылки display: block , что дает нам возможность устанавливать ширину, отступы, вообщем все те признаки, которые характерны для блочных элементов.

• Главная
• Блог
• Контакты
• О сайте

inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline . После этого для элемента ссылки, которая располагается в элементе li , мы можем установить display: inline-block:

• Главная
• Блог
• Контакты
• О сайте

Так называемая utility navigation (в пер. с англ. — навигационная панель инструментов), как правило, предоставляет пользователю интернет-ресурса возможности для совершения на сайте второстепенных действий и включает в себя такие инструменты, как контактная форма, форма подписки, форма регистрации или входа на сайт, возможность распечатать страницу (print) и т. д.

Все перечисленное выше имеет большое значение для создания удовлетворяющего запросам интернет-пользователя опыта взаимодействия и более глубокой вовлеченности в интеракцию с сайтом. Единственное условие: все эти формы и панели должны быть размещены там, где их и ожидает увидеть посетитель.

Перечень инструментов

Инструменты, доступные для использования на вашем сайте, определяют формы и качество взаимодействия посетителей с вашим интернет-ресурсом. Перечень их огромен, но одни из самых распространенных инструментов следующие:

Хотя инструмент «Корзина» является базовым, определяющим элементом сайтов коммерческой направленности, рекомендуется, чтобы иконка этого инструмента также располагалась в навигационной панели инструментов. То же самое относится и к другой очень часто используемой функции, как «Поиск».

Несмотря на то, что большинство инструментов и возможностей, размещенных в этой панели, как уже было сказано выше, имеют второстепенный характер, в некоторых ситуациях их наличие имеет большую важность для пользователей. Поскольку они все же не несут основную нагрузку, визуально они могут не занимать много пространства, но их наличие — обязательно.

Расположение

Раньше иконки навигационной панели инструментов встраивались или в поле контента, или размещались в сайдбаре, либо в общей навигационной панели. В последние годы эта панель инструментов иммигрировала в правый верхний угол страницы. Благодаря этому нововведению меню теперь всегда на виду и его проще заметить. Последите за собой: как только мы попадаем на новый для нас веб-ресурс, мы инстинктивно ищем в правом верхнем углу форму для регистрации или входа.

Панель инструментов на главной странице сайта IBM располагается в правом верхнем углу, в середине страницы (иконки социальных сетей) и в футере (ссылка Contact Us).

Правый верхний угол детально.

Поначалу такое расположение элементов может показаться слишком запутанным (все инструменты поделены на 4 блока), но имейте в виду, что только компьютерные гики воспринимают их как части одного целого. Для рядового пользователя все эти инструменты отличаются друг от друга предназначением и функциями, а потому в том, что они располагаются в разных частях сайта, для них нет ничего необычного.

Красным выделены группы второстепенных инструментов. Блоки располагаются на внушительном расстоянии друг от друга, однако такое расположение уже является привычным для большинства интернет-пользователей.

Некоторые организации пытаются спрятать панель инструментов за иконкой-гамбургером (иконка, представляющая из себя три горизонтальные линии) или каким-либо другим интерактивным элементом, например, крутящейся шестеренкой.

Надо сказать, что такой подход обязательно нужно тестировать и проводить тесты на разных типах дисплеев. Ваши пользователи могут и не понять, что тот инструмент, который они ищут, оказался включен в список той же иконки-гамбургера. Плохая идея — игнорировать базовые принципы дизайна и элементарную логику, даже если крупные компании пренебрегают ими.

1. Дополняйте иконки (и другие графические иллюстрации) пояснительным текстом. Людям нравятся подобные картинки, но очень часто они либо не понимают их значения, либо плохо запоминают. К тому же веб-мастеры используют эти значки непоследовательно.

Не полагайтесь на всплывающие подсказки, потому как они не сработают на мобильных устройствах. Используйте только слова, либо слова и картинку, чтобы обеспечить более эффективное понимание и запоминание символа. Исследователи подчеркивают, что гамбургер-меню, к примеру, используется посетителями намного чаще, когда его сопровождает подпись «Меню» и он очерчен линией, которая придает ему вид интерактивной кнопки.

2. Размещайте инструменты там, где люди ожидают их найти. Самые просматриваемые места: правый верхний угол страницы либо область до и после статьи. Можете встроить эти инструменты и в общее меню, в общую навигационную панель, потому как люди имеют склонность внимательно ее просматривать, если они ищут что-либо.

3. Элементы управления должны выглядеть как элементы управления, не стоит давать им непривычные названия.

5. Обязательно встраивайте инструменты для подписки. Сделайте максимально простым процесс подписки на какого-либо автора или в целом на блог.

6. Для отображения используемого языка достаточно указать его название символами соответствующего алфавита.

7. Формы подписки на ресурс и входа на сайт должны располагаться рядом друг с другом.

8. Панель инструментов должна быть заметной, поэтому самые главные инструменты вы можете выделить ярким цветом.

Примеры расположение навигационной панели инструментов:

Список

Как и большинство современных панелей навигации, наша будет основываться на теге неупорядоченного списка (

). Это название имеет семантический смысл, навигационная панель на самом деле представляет собой лишь список ссылок, ведущих на ваш сайт. Традиционная горизонтальная ориентация - это просто удобное средство для того, чтобы получить все самые важные элементы списка, видимые без прокрутки.

Вот наш пример HTML:



• About Us


• Our Products


• FAQs


• Contact


• Login



Вот и все, что для этого нужно! Заметьте, что я использовал один идентификатор, чтобы мы могли отличить нашу навигационную панель от всех других неупорядоченных списков на странице. Но если бы он был помещен в div с его собственным идентификатором (например, div “banner” или “header”), возможно, идентификатор не будет нужен. И да, я мог бы добавить еще больше идентификаторов и классов, если бы хотел усложнить пример, но сегодняшний урок посвящен простоте.

Как сделать его горизонтальным

По умолчанию наш список вертикальный. Итак, давайте сделаем его горизонтальным:

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none; }
#nav li {
float: left; }

Здесь мы перемещаем наш список и элементы списка налево. Перемещение элементов списка налево растягивает их в горизонтальный ряд, элементы помещаются слева направо. Однако, из-за характера перемещения, наш список, если он также не перемещен влево, свернется до нулевой высоты.

И это не будет серьезной проблемой, за исключением того, что я планирую задать цвет фона моему списку позже, поскольку хочу выделить на фоне элементы списка, и если мой список свернется, этого не произойдет. Вот ещё одна причина, почему я задаю ширину списка 100%: таким образом, он будет заполнять всю ширину страницы (или её контейнер, если он находится в контейнере с заданной шириной).

Я также удаляю большинство полей и отступов, чтобы список хорошо отображался (я оставляю небольшие поля внизу, просто для эстетических целей), и устанавливаю стиль списка на “никакой”, что удаляет маркеры абзацев из моего списка.

На данный момент наша панель навигации выглядит так:

Конечно, у него нет никакого стиля (и, наверное, его тяжело использовать и загружать), но, хотите верьте, хотите нет, самое сложное уже позади! Отталкиваясь от этой основной структуры, можно создать любое количество уникальных панелей навигации. Но, давайте немного усовершенствуем нашу панель.

Во-первых, мы зададим фон и границы для нашей панели навигации, изменив наш #nav в CSS таким образом:

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-top: 1px solid #ccc; }

Теперь давайте определим тегом “якорь” немного свободного места и зададим стиль:

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }

Здесь я задаю “якорям” тип отображения “block”, чтобы убедиться, что они заполняют весь элемент списка и делают всю площадь активной. Затем я добавляю заполнение, чтобы немного растянуть их. Я также удаляю подчеркивание, делаю шрифт жирным, задаю красивый голубой цвет и добавляю границу с правой стороны от этого элемента, равную той, что мы добавили в верхней и нижней части нашего неупорядоченного списка.

И, наконец, давайте зададим элементам навигации цвета, которые будут отличаться при наведении на них курсора:

#nav li a:hover {
color: #c00;
background-color: #fff; }

Итак, мы получаем полностью функциональную, практичную и полезную панель навигации.

А тут в одном месте собраны все CSS:

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }

Это полезная основа для дальнейшей работы. 90% панелей навигации начинаются почти в точности как эта. Нужный вид панели - это всего лишь вопрос оформления.

Спасибо за внимание. Впереди еще очень много уроков на разные темы! Оставайтесь с нами! :)

P.S. По сравнению с другими меню, данное меню выглядит очень просто, но не надо об этом кричать в комментариях:). Это основа, используя которую, можно сделать нечто большее.