Глава 7. Панель навигации
Pamela Roberts
Перевод на русский : Kernel PanicИздание 3.1 (2002-09-22 )
Панель навигации находится в левой части окна Konqueror . Включить её (или отключить, если она уже включена) можно с помощью пункта меню Окно ->Показать панель навигации или клавиши F9 .
Данная панель содержит несколько вкладок; чтобы перейти к одной из них, щёлкните по её значку. Чтобы отключить панель навигации, оставив только значки вкладок, щёлкните по значку текущей вкладки.
Закладки
В этой вкладке отображается список закладок; чтобы открыть одну из них в главном окне, щёлкните по ней левой кнопкой мыши.
ЖурналВ этой владке отображается журнал вашей работы в Интернете. Чтобы открыть один из показанных адресов в главном окне, щёлкните по нему левой кнопкой мыши. Чтобы открыть его в новом окне, щёлкните по нему правой кнопкой мыши и в появившемся меню выберите пункт В новом окне .
Чтобы удалить какой-либо адрес, щёлкните по нему правой кнопкой мыши и в появившемся меню выберите пункт Удалить элемент . Чтобы очистить журнал работы в Интернете, выберите пункт Очистить журнал .
В этом же меню вы можете указать, в каком порядке следует отображать адреса в журнале: в алфавитном или по дате.
Если в том же меню выбрать пункт Настройка... , появится окно, в котором вы сможете указать максимальный размер журнала, а также через какое время после последнего посещения адрес следует автоматически удалять. Также имеется возможность отображать новые и старые адреса различными шрифтами. Если включить режим Расширенные подсказки , то в подсказках к адресам журнала будут отображаться более подробные сведения.
Домашний каталогВ этой вкладке отображается ваш домашний каталог. Заметьте, что скрытые файлы (начинающиеся с точки) не отображаются. Чтобы открыть какой-либо файл в главном окне Konqueror щёлкните по нему левой кнопкой мыши. Если вы щёлкнете правой кнопкой мыши по каталогу, то с помощью появившегося меню вы сможете открыть каталог в новом окне или в новой вкладке основного окна.
СетьВ этой вкладке отображается список сетевых подключений (однако в нём также можно отображать и каталоги). Чтобы открыть объект в главном окне, щёлкните по нему левой кнопкой мыши. Щёлкнув по нему правой кнопкой мыши, вы вызовете меню, в котором вам будут предложены дополнительные возможности.
Папки, отображаемые во вкладке Сеть , хранятся в каталоге ~/.kde/share/apps/konqsidebartng/virtual_folders/remote/ . Создав в нём новый каталог, вы добавите во вкладку новую папку. Файлы, описывающие сетевые подключения, имеют расширение.desktop ; чтобы создать новый файл, воспользуйтесь пунктом меню Создать ->Ссылку на адрес Интернета... .
Корневой каталогКорневой каталог - это начальная точка файловой системы; в нём хранятся все остальные файлы и каталоги. Путь к корневому каталогу обозначается косой чертой: / . Развернув его, вы увидите, в частности, каталог root , где хранятся файлы системного администратора, и home , в котором вы сможете найти свой домашний каталог.
ИнструментыЭта вкладка предоставляет доступ к следующим инструментам:
Обозреватель аудиокомпакт-диска .
Устройства . Здесь отображается список имеющихся у вас жёстких дисков (и их разделов), дисководов и устройств чтения компакт-дисков. Чтобы подключить устройство и отобразить его содержимое в главном окне, щёлкните по нему левой кнопкой мыши. Чтобы отключить устройство, щёлкните по нему правой кнопкой мыши и в появившемся меню выберите пункт Отключить .
Обозреватель сети позволяет просматривать диски других компьютеров в локальной сети.
Обозреватель системы печати предоставляет доступ к менеджеру печати KDE , Kprinter .
Настроить внешний вид панели навигации можно следующим образом: щёлкните правой кнопкой мыши по свободному пространству под самой нижней вкладкой или щёлкните по значку Кнопка настройки (на рисунке выше - самая верхняя кнопка; в зависимости от конфигурации эта кнопка может отсутствовать). При этом появится меню, предлагающее вам следующие возможности:
Добавить
Этот пункт позволяет добавить в панель навигации ещё одну вкладку. Это может быть Панель проигрывателя (один из дополнительных модулей Konqueror ) или какой-либо каталог.
Несколько видовЭтот пункт позволяет разделить панель навигации таким образом, что вы сможете видеть две вкладки одновременно.
Показывать вкладки слеваЭтот пункт позволяет указать, с какой стороны панели отображаютсязначки вкладок.
Показывать кнопку настройкиС помощью этого пункта вы можете указать, следует ли отображать Кнопку настройки .
Щёлкнув по значку какой-либо вкладки правой кнопкой мыши, вы вызовете меню, предлагающее следующие возможности.
Список
Как и большинство современных панелей навигации, наша будет основываться на теге неупорядоченного списка (
Вот наш пример HTML:
Вот и все, что для этого нужно! Заметьте, что я использовал один идентификатор, чтобы мы могли отличить нашу навигационную панель от всех других неупорядоченных списков на странице. Но если бы он был помещен в 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. По сравнению с другими меню, данное меню выглядит очень просто, но не надо об этом кричать в комментариях:). Это основа, используя которую, можно сделать нечто большее.
Так называемая utility navigation (в пер. с англ. — навигационная панель инструментов), как правило, предоставляет пользователю интернет-ресурса возможности для совершения на сайте второстепенных действий и включает в себя такие инструменты, как контактная форма, форма подписки, форма регистрации или входа на сайт, возможность распечатать страницу (print) и т. д.
Все перечисленное выше имеет большое значение для создания удовлетворяющего запросам интернет-пользователя опыта взаимодействия и более глубокой вовлеченности в интеракцию с сайтом. Единственное условие: все эти формы и панели должны быть размещены там, где их и ожидает увидеть посетитель.
Перечень инструментов
Инструменты, доступные для использования на вашем сайте, определяют формы и качество взаимодействия посетителей с вашим интернет-ресурсом. Перечень их огромен, но одни из самых распространенных инструментов следующие:
Хотя инструмент «Корзина» является базовым, определяющим элементом сайтов коммерческой направленности, рекомендуется, чтобы иконка этого инструмента также располагалась в навигационной панели инструментов. То же самое относится и к другой очень часто используемой функции, как «Поиск».
Несмотря на то, что большинство инструментов и возможностей, размещенных в этой панели, как уже было сказано выше, имеют второстепенный характер, в некоторых ситуациях их наличие имеет большую важность для пользователей. Поскольку они все же не несут основную нагрузку, визуально они могут не занимать много пространства, но их наличие — обязательно.
Расположение
Раньше иконки навигационной панели инструментов встраивались или в поле контента, или размещались в сайдбаре, либо в общей навигационной панели. В последние годы эта панель инструментов иммигрировала в правый верхний угол страницы. Благодаря этому нововведению меню теперь всегда на виду и его проще заметить. Последите за собой: как только мы попадаем на новый для нас веб-ресурс, мы инстинктивно ищем в правом верхнем углу форму для регистрации или входа.
Панель инструментов на главной странице сайта IBM располагается в правом верхнем углу, в середине страницы (иконки социальных сетей) и в футере (ссылка Contact Us).
Правый верхний угол детально.
Поначалу такое расположение элементов может показаться слишком запутанным (все инструменты поделены на 4 блока), но имейте в виду, что только компьютерные гики воспринимают их как части одного целого. Для рядового пользователя все эти инструменты отличаются друг от друга предназначением и функциями, а потому в том, что они располагаются в разных частях сайта, для них нет ничего необычного.
Красным выделены группы второстепенных инструментов. Блоки располагаются на внушительном расстоянии друг от друга, однако такое расположение уже является привычным для большинства интернет-пользователей.
Некоторые организации пытаются спрятать панель инструментов за иконкой-гамбургером (иконка, представляющая из себя три горизонтальные линии) или каким-либо другим интерактивным элементом, например, крутящейся шестеренкой.
Надо сказать, что такой подход обязательно нужно тестировать и проводить тесты на разных типах дисплеев. Ваши пользователи могут и не понять, что тот инструмент, который они ищут, оказался включен в список той же иконки-гамбургера. Плохая идея — игнорировать базовые принципы дизайна и элементарную логику, даже если крупные компании пренебрегают ими.
1. Дополняйте иконки (и другие графические иллюстрации) пояснительным текстом. Людям нравятся подобные картинки, но очень часто они либо не понимают их значения, либо плохо запоминают. К тому же веб-мастеры используют эти значки непоследовательно.
Не полагайтесь на всплывающие подсказки, потому как они не сработают на мобильных устройствах. Используйте только слова, либо слова и картинку, чтобы обеспечить более эффективное понимание и запоминание символа. Исследователи подчеркивают, что гамбургер-меню, к примеру, используется посетителями намного чаще, когда его сопровождает подпись «Меню» и он очерчен линией, которая придает ему вид интерактивной кнопки.
2. Размещайте инструменты там, где люди ожидают их найти. Самые просматриваемые места: правый верхний угол страницы либо область до и после статьи. Можете встроить эти инструменты и в общее меню, в общую навигационную панель, потому как люди имеют склонность внимательно ее просматривать, если они ищут что-либо.
3. Элементы управления должны выглядеть как элементы управления, не стоит давать им непривычные названия.
5. Обязательно встраивайте инструменты для подписки. Сделайте максимально простым процесс подписки на какого-либо автора или в целом на блог.
6. Для отображения используемого языка достаточно указать его название символами соответствующего алфавита.
7. Формы подписки на ресурс и входа на сайт должны располагаться рядом друг с другом.
8. Панель инструментов должна быть заметной, поэтому самые главные инструменты вы можете выделить ярким цветом.
Примеры расположение навигационной панели инструментов:
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML .
Первым шагом создания вертикального меню будет создание маркированного списка . Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
#navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; }
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса:hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; } Попробовать »
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; } Попробовать »
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } Попробовать »
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Подпункты мы разместим в отдельном списке, вложив его в элемент
Попробовать »
Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент
#navbar ul { display: none; } #navbar li:hover ul { display: block; }
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none; , чтобы они отображались друг под другом.
#navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { float: left; } #navbar ul li { float: none; }
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative; , а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul { display: none; position: absolute; top: 100%; } #navbar li { float: left; position: relative; } #navbar { height: 30px; } Попробовать »
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#navbar ul { display: none; background-color: #f90; position: absolute; top: 100%; } #navbar li:hover ul { display: block; } #navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar { height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; } #navbar li { float: left; position: relative; height: 100%; } #navbar li a { display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; } #navbar ul li { float: none; } #navbar li:hover { background-color: #f90; } #navbar ul li:hover { background-color: #666; }
