Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку.menu:
Menu a {
border-top: 1px solid blue;
}
.menu {
border-bottom: 1px solid blue;
}
Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
Основная задача при создании горизонтальной навигации - расположить пункты меню в один ряд. Это можно сделать несколькими способами.
Первый вариант - задать пунктам списка свойство display со значением inline либо inline-block:
После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
Menu a {
text-decoration: none;
font-family: sans-serif;
color: #5757a0;
display: inline-block;
padding: 10px 20px;
background-color: lavender;
border-bottom: 5px solid #5757a0;
}
Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding . Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами
:Menu li {
float: left;
}
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,
), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
Menu {
overflow: hidden;
}
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента:after . Пример выше - это еще один способ решить вопрос с исчезнувшей высотой контейнера.
Примечание:
если вы установите фон для элемента.menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать
Глава 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
) или какой-либо каталог.
Несколько видов
Этот пункт позволяет разделить панель навигации таким образом, что вы сможете видеть две вкладки одновременно.
Показывать вкладки слева
Этот пункт позволяет указать, с какой стороны панели отображаютсязначки вкладок.
Показывать кнопку настройки
С помощью этого пункта вы можете указать, следует ли отображать Кнопку настройки
.
Щёлкнув по значку какой-либо вкладки правой
кнопкой мыши, вы вызовете меню, предлагающее следующие возможности.
В этой статье мы попытаемся привести классификацию основных типов панелей навигации и соображения по критериям выбора тех или иных навигационных панелей для сайта.
Начнем с определения.
Навигационная панель веб-сайта это область веб-страниц, на которой в некотором упорядоченном виде расположены ссылки на разделы и (или) страницы сайта, и единственная функция которой предоставить пользователю удобное средство для перемещения по веб-сайту.
1. Одноуровневый список
Одноуровневая панель навигации (или навигационная панель в виде одноуровневого списка ссылок) представляет собой панель навигации, на которой размещены равноправные ссылки на разделы ресурса.
Этот тип панелей навигации условно можно условно разделить на три подтипа:
- горизонтальный одноуровневый список;
- вертикальный одноуровневый список;
- одноуровневая панель необычной формы.
1.1. Горизонтальный одноуровневый список
Панель навигации в виде горизонтального одноуровневого списка располагается вверху страницы. На некоторых сайтах горизонтальную панель располагают в двух местах: вверху и внизу страницы.
Рекомендуемое количество ссылок на одноуровневой горизонтальной панели 5-7 штук (именно такое количество ссылок посетитель может с легкостью держать в голове). При большем количестве ссылок одного уровня пользователю сложнее ориентироваться в них. К тому же, такое количество ссылок обычно приходится размещать в два ряда, что создает дополнительные проблемы при оформлении страниц.
Достоинства:
После загрузки страницы все элементы списка полностью размещаются в верхней части страницы. Когда пользователь читает основной текст, меню исчезает из поля зрения и не занимает лишнего места.
Недостатки:
- На панели нельзя разместить много элементов.
- При большом количестве элементов списка их приходится размещать в несколько строк.
Пример:
На сайте студии Артемия Лебедева в качестве панели навигации применяется горизонтальный одноуровневый список.
1.2. Вертикальный одноуровневый список
Панель навигации в виде вертикального одноуровневого списка чаще всего располагается в левой части страницы. При этом под панелью остается пустое место, которое часто используется под баннеры, формы опросов и т.п.
Рекомендуемое количество ссылок на панели все то же: 5-7 штук. Если ссылок все же больше, это не создает ощутимых проблем при дизайне страницы. Однако при слишком большом количестве ссылок часть их выходит за границу просматриваемой области, что вынуждает пользователя использовать полосу прокрутки.
Достоинства:
- В вертикальной одноуровневой панели навигации можно безболезненно увеличивать количество ссылок, тогда как при горизонтальном расположении это приводит к проблемам верстки (для нового элемента может не хватить места).
Недостатки:
- Под панелью навигации часто остается много неиспользованного пространства.
- При большом количестве элементов списка они не все видны на странице одновременно (для просмотра некоторых элементов необходимо прокручивать страницу по вертикали).
Пример:
На сайте Ассоциации профессиональных Интернет-издателей можно увидеть хороший пример использования панели навигации в виде вертикального одноуровневого списка. В данном случае использование фреймов снимает ряд описанных мною возможных недостатков этого типа панели навигации.
2. Двухуровневый список
Двухуровневая панель навигации представляет собой панель, в которой каждой ссылке первого (корневого) уровня соответствует несколько ссылок второго уровня.
Все рассуждения относительно горизонтального или вертикального расположения панели навигации с многоуровневым списком аналогичны предшествующим.
2.1. Двухуровневый список с фиксацией
В данном виде навигационной панели в каждый момент времени отображаются все ссылки первого уровня (одна из них является активной), а также ссылки второго уровня, которые соответствуют активной (выбранной) ссылке из первого уровня.
Таким образом, для получения доступа к любому элементу второго уровня, не соответствующего выбранному элементу первого уровня, посетитель должен сначала выбрать соответствующий элемент первого уровня (при этом произойдет обновление веб-страницы), а затем выбрать нужный элемент второго уровня (еще одно обновление страницы).
По способу размещения на странице этот вид панели также делится на два подвида: вертикальные и горизонтальные. Все соображения по способу размещения аналогичны приведенным ранее для одноуровневого списка.
Достоинства:
- Всегда видно, в какой части сайта мы находимся.
- По сравнению с одноуровневой панелью, позволяет разместить значительно большее количество ссылок.
Недостатки:
- При активном перемещении по разделам сайта происходит слишком большое количество перезагрузок страниц.
Пример:
На сайте компании Apple Computing можно увидеть очень хороший пример двухуровневого списка с фиксацией состояния. Этот тип панели навигации был выбран далеко не случайно. Когда пользователь выбирает элемент верхнего уровня, появляются страницы, на которых содержатся новости компании, информация о новой продукции, пресс-релизы и прочее, словом, то, на что компания обязательно хочет обратить внимание посетителя. При переходе по элементам меню второго уровня пользователь попадает на страницы с дополнительными панелями навигации, с помощью которых он легко может найти нужную информацию.
Одна из разновидностей двухуровневого списка с фиксацией когда ссылки первого и второго уровня расположены подобно осям координат. Это расположение ссылок очень наглядное, но занимает много места на странице. Такую панель я назвал 2d-панелью навигации.
Она, например, использовалась на сайте компании РусАрт (сейчас Individ). К сожалению, на данный момент старый сайт компании недоступен.
2.2. Динамический двухуровневый список
Панель навигации в виде динамического двухуровневого списка более всего напоминает стандартное меню графического интерфейса. При активации элемента верхнего уровня раскрывается подменю, состоящее из соответствующих элементов второго уровня.
Наиболее часто встречается горизонтальное и вертикальное расположение таких панелей навигации (соображения по этому поводу аналогичны приведенным ранее для панелей с одноуровневым списком), хотя иногда встречаются и другие решения.
Достоинства:
- Позволяет быстро получить доступ к любому элементу.
- Занимает мало места на странице.
Недостатки:
- Многие реализации динамических навигационных панелей не поддерживаются старыми (редкими) браузерами.
Примеры:
Сайт компании Microsoft обладает очень разветвленной структурой, поэтому на нем используются целых две динамические панели. Верхняя панель навигации выглядит одинаково на всех страницах сайта и содержит ссылки на основные ресурсы компании Microsoft. Панель навигации, расположенная ниже, содержит ссылки, имеющие непосредственное отношение к текущему разделу сайта. При переходе по многочисленным разделам сайта Microsoft, содержимое этой панели меняется.
На главной странице сайта компании Porshe можно увидеть двухуровневую динамичную панель навигации, которая интересна своим исполнением. В качестве ссылок верхнего уровня используются изображения с текстом, при указании на которые открывается соответствующее подменю второго уровня.
2.3. Развернутый двухуровневый список
Идея применения развернутого двухуровневого списка показать на странице все ссылки второго уровня. При этом ссылки первого уровня могут играть роль заголовков (иногда они не являются ссылками).
Достоинства:
- Посетитель сразу видит все ссылки панели навигации.
- Т.к. ссылки сгруппированы, это облегчает посетителю поиск нужного элемента.
- Данными типом навигационной панели так же просто пользоваться, как и панелью с одноуровневым списком.
Недостатки:
- Панель занимает много места на странице.
Пример:
На сайте интернет-агентства Promo.ru ссылки навигационной панели объединены в одну из четырех групп. В каждой группе содержится 4-5 ссылок, что соответствует рекомендуемым значениям.
На сервере Subscribe.ru в качестве панели навигации используется развернутый список с названиями разделов и подразделов для рассылок сервера. Ссылки первого уровня идут на структуру выбранного раздела каталога, а ссылки второго уровня на список рассылок выбранного подраздела.
2.4. Полуразвернутый двухуровневый список
Панель навигации в виде полуразвернутого двухуровневого списка представляет собой список из ссылок первого уровня, рядом с которыми приведены несколько наиболее важных (или популярных) ссылок второго уровня. Этот вид навигационных панелей наиболее часто применяется на сайтах больших информационных ресурсов, обладающих разветвленной структурой, разделы которых неравнозначны по популярности (полезности) среди пользователей.
Достоинства:
- Эффективное использование площади сайта. Все наиболее существенные ссылки доступны с главной страницы.
Недостатки:
- Одни элементы найти очень просто, а другие совсем нет.
