- визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента.menu всё равно останется 100%.
Разделение пунктов
Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку.menu:
Menu a {
border-top: 1px solid blue;
}
.menu {
border-bottom: 1px solid blue;
}
Высота пунктов и вертикальное выравнивание
Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:
Menu a {
height: 30px;
line-height: 30px;
}
GIF
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
Горизонтальное меню
Основная задача при создании горизонтальной навигации - расположить пункты меню в один ряд. Это можно сделать несколькими способами.
Способ первый
Первый вариант - задать пунктам списка свойство display со значением inline либо inline-block:
Menu li {
display: inline;
}
При этом теги внутри нельзя делать блочными, иначе пункты перестанут выстраиваться горизонтально и снова встанут в вертикальную позицию. Ссылкам можно также задать значение 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 . Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами
. Эти промежутки можно убрать, записав HTML-код списка в одной строке:
Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:
Menu li {
margin-right: -5px;
}
Этот код не убирает промежутки, а прикрывает их за счет сдвига элементов на пять пикселей влево. Данный способ нельзя назвать очень надежным, потому что размер промежутка может варьироваться в зависимости от других стилей.
Если промежутки между пунктами не запланированы в вашем дизайне, лучше воспользоваться вторым методом горизонтального выстраивания элементов.
Способ второй
Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float . Для этого добавьте стиль для тегов
:Menu li {
float: left;
}
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,
), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
Menu {
overflow: hidden;
}
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента:after . Пример выше - это еще один способ решить вопрос с исчезнувшей высотой контейнера.
Примечание:
если вы установите фон для элемента.menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать
по
ссылкам с помощью клавиатуры в Opera
слегка отличается - попробуйте проверить пример выше в Opera
, затем нажмите и удерживайте клавишу Shift
и используйте клавиши стрелок для перемещения по
ссылкам (это работает также на элементах формы). Это называется пространственной навигацией. Навигация по сайту
Навигация
по
сайту является, вероятно, наиболее распространенным типом меню
, которое требуется создавать. Это меню
для всего сайта (или его подмножества), показывающее как варианты перехода, которые может выбирать посетитель, так и иерархию сайта. Списки прекрасно подходят для этого, как вы видите в примере навигации по
сайту.
Example of site navigation
Home
- Home
- About Us
- Our Clients
- Our Products
- Our Services
- Contact Us
Здесь не слишком много сюрпризов, по
крайней мере, с точки зрения чистого HTML
. Позже в курсе мы поговорим о задании стилей меню
такого рода с помощью CSS
и добавлении поведения с помощью JavaScript
. Необходимо рассмотреть одну важную вещь, как выделить текущий документ в меню
, чтобы создать у пользователя ощущение присутствия в определенном месте, и что он меняет свое местоположение (даже хотя в реальности это и не так, за исключением, конечно, случая использования мобильных устройств для просмотра Web
!). Именно это мы и рассмотрим далее.
Создание у посетителей чувства "присутствия в определенном месте"
Одно из золотых правил разработки и навигации в Web
состоит в том, что текущий документ никогда не должен ссылаться на себя самого, но, наоборот, должен явно отличаться от других записей в меню
. Это важно, так как дает посетителям точку опоры и говорит им, где они находятся в своем путешествии по
сайту. Существуют крайние случаи, такие как Web
-приложения, permalinks
в блогах, и так называемые "одностраничные" Web
-сайты, но в 99% случаев ссылка
на документ, на который вы уже смотрите, является избыточной и путающей посетителя.
В руководстве по
ссылкам я утверждал, что ссылка
является соглашением и обязательством: вы предлагаете посетителям способ получить дополнительную информацию, которая им нужна, но нужно быть осторожным - вы потеряете авторитет и доверие
, если эта ссылка
не предоставляет пользователям то, что они хотят получить, и/или приводит к неожиданному поведению. Если вы предлагаете, например, ссылку, которая указывает на текущий документ, активация ее приведет к перезагрузке документа. Как пользователь
, вы этого не ожидаете - какой смысл щелкать на этой ссылке? Возникает только дополнительная путаница.
Это является причиной, почему текущая страница никогда не должна присутствовать в меню
ссылок. Можно удалить ее вообще, или еще лучше деактивировать ее как ссылку, но выделить (например, с помощью элемента strong
) - это предоставит пользователям визуальную подсказку и сообщит также слепым посетителям, что это важно - этот пример с выделением текущей страницы показан ниже.
Example of site navigation
About Us
- Home
- About Us
- Our Clients
- Our Products
- Our Services
- Contact Us
Сколько возможностей предоставлять пользователям единовременно
?
Другой вопрос для рассмотрения, сколько возможностей вы хотите предоставить посетителям. Многие меню
, которые встречаются в Web
, пытаются сделать каждую страницу сайта доступной из одного единственного меню
. Здесь на помощь приходят сценарии и приемы использования CSS
- можно сделать меню
более управляемым, скрывая части меню
, пока пользователь
не выберет определенную область
(разворачивающиеся меню
, как их иногда называют). Это хорошо придумано с технической точки зрения, но при таком подходе возникает несколько проблем:
- Не все посетители смогут использовать эту возможность как предполагается; пользователи клавиатуры, например, будут вынуждены перемещаться по всем ссылкам на странице с помощью клавиши Tab
, только чтобы добраться до требуемой ссылки.
- Потребуется добавлять много кода HTML
в каждый документ сайта, чтобы это реализовать, и большая часть его будет избыточна на многих страницах. Если я спустился на три уровня в меню, чтобы добраться до документа, который хочу прочитать, я не должен видеть варианты, ведущие на 4, 5, и 6 уровни глубины.
- Можно запутать посетителей, если предоставить им сразу слишком много возможностей - люди не любят принимать решения. Представьте себе, сколько может потребоваться времени, чтобы выбрать блюдо из длинного меню ресторана.
- Если на странице имеется не слишком много контента, но много ссылок, поисковые системы будут предполагать, что на этой странице находится не слишком много действительной информации, и не будут уделять странице много внимания, поэтому ее будет трудно найти при поиске в Web
.
В конце концов, вам решать, сколько пунктов поместить в меню
- различные проекты будут требовать различных вариантов - но если сомневаетесь, необходимо попробовать сократить меню
до ссылок только на основные разделы
сайта. Всегда можно будет добавить дополнительные подменю, где потребуется.
Контекстные меню
Контекстные меню
являются ссылками, которые создаются на основе содержимого текущего документа, и предлагают дополнительную информацию, связанную с текущей страницей. Классическим примером являются ссылки на "связанные статьи", которые можно видеть в начале новостных статей, как показано на рис. 23.1
Рис.
23.1.
Это немного отличается от контекстных меню
в программных интерфейсах пользователя, которое предлагает различные варианты выбора, в зависимости от того, где вызывается ( меню
появляющиеся при щелчке правой кнопкой мыши или при щелчке с нажатой клавишей Ctrl
в настольных приложениях, которые предлагают специальные возможности, в зависимости от того, где находится в данный момент указатель
мыши).
Контекстные меню
на Web
-сайтах являются прекрасным способом представления контента в других частях сайта; с точки зрения HTML
они являются просто еще одним списком ссылок.
Схема сайта
Схема сайта является тем, что и можно было бы ожидать - схемой всех различных страниц (или основных разделов, если речь идет о действительно огромных сайтах) сайта. Она позволяет посетителям сайта получить представление
обо всей структуре сайта, и быстро перейти в требуемое место
- даже если требуемая страница находится глубоко в иерархии страниц.
Как схема сайта, так и поиск
по
сайту являются прекрасным способом предложить посетителям возможную опору в случае необходимости, когда они заблудились, или предоставить быстрый доступ
для тех, кто торопится.
С точки зрения HTML
схема сайта может быть либо одним массивным списком вложенных списков полным ссылок или - в случае очень больших сайтов - заголовки
разделов с вложенными ссылками специфической иерархии разделов, или даже формы поиска для каждого из разделов.
Нумерация страниц
Нумерация
страниц необходима, когда вы должны предложить способ перемещения в большом документе, разбитом на отдельные страницы. Можно встретить нумерацию страниц в больших архивах изображений или на страницах с результатами поиска (такими, как поиск
Google
или Yahoo
).
Нумерация
страниц отличается от других типов навигации, потому что она обычно соединяется с тем же документом - но с помощью ссылки, которая содержит дополнительную информацию, такую как номер страницы, с которой начинать. Несколько примеров нумерации страниц показано на рис. 23.2 :
Рис.
23.2.
HTML
не предлагает ничего новаторского - вы снова предоставляете список
ссылок вместе с текущей ссылкой (указывающей, какой фрагмент данных выведен, и как далеко в разбиении на страницы вы находитесь), которая не является фактической ссылкой и выделена (например, с помощью элемента strong
).
Основное отличие от навигации по
сайту состоит в том, что для нумерации страниц требуется много программной логики. В зависимости от того, где вы находитесь во всем множестве данных, необходимо показать или скрыть предыдущие, следующие, первые или последние ссылки. Если имеется действительно массивный объем информации для просмотра, то вам придется также предложить ссылки для таких меток как 100, 200 и многих других значений. Поэтому меню
обычно не кодируется жестко как в HTML
, а создается на сервере. Это, однако, не изменяет правил - текущий фрагмент не должен ссылаться на себя самого, и вы не должны предлагать ссылки, которые никуда не ведут.
Когда списков недостаточно - карты ссылок и формы
В 99% случаев упорядоченные или неупорядоченные списки являются достаточной конструкцией HTML
для меню
, особенно в связи с тем, что
Рис.
23.3.
По умолчанию карта с элементами областями может превратить части изображения в интерактивные элементы
Example of an image-map
Любое изображение можно превратить в меню
, определяя карту с различными областями (называемые также горячими точками). Для карты задается атрибут
name
, а изображение и карта соединяются с помощью атрибута usemap
circle
для окружностей или poly
для нерегулярных форм, определяемых с помощью многоугольников (полигонов).
Определяет координаты в изображении, которые должны стать горячими точками - эти значения измеряются от верхнего левого угла изображения, и могут измеряться в пикселях или процентах. Для прямоугольных областей необходимо определить только верхний левый и нижний правый углы; для окружностей необходимо определить центр окружности и радиус; для полигонов необходимо предоставить список всех угловых точек.
Карты ссылок не слишком интересно определять и вводить в виде HTML
, вот почему инструменты работы с изображениями, такие как Adobe Image Ready
или Fireworks
, предлагают возможность создания их визуально (и генерируют соответствующий код HTML
).
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту.
Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью 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 для элементов
нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
- Главная
- Новости
- Контакты
- О нас
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#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; }
В своей работе, немало времени уделял разработке различных видов навигации для сайтов, как с применением , так и используя чистый стиль 3 без дополнительных изображений и подключаемых javascript. Решил все наработки по теме собрать воедино и выложить в качестве своеобразной подборки уроков по созданию меню навигации. В обзоре представлены разные типы меню, по стилю исполнения и функционалу, многоуровневые с выпадающими подменю, меню в популярном стиле «аккордеон», вертикальные и горизонтальные с динамическими эффектами, простые и сложные по своей структуре.
Отталкиваясь от этих уроков, исходя из приведенных примеров, экспериментируя и применив немного фантазии, вы с легкостью сможете сделать свой сайт выделяющимся из общей массы, эффектным и запоминающимся.
✓
Нажав на заголовок, вы попадете непосредственно на страницу с детальным описанием всего процесса, а жмякнув по картинке, перейдете на страницу с примером работы выбранного вами меню ツ
1.
При создании этого замечательного меню использовались чистые стили и функции CSS3, без каких либо дополнительных файлов изображений и javascript. С поддержкой современными браузерами новых стандартов CSS3, стало возможным использовать в разработке дизайна сайтов, все волшебные свойства магии CSS3. Применяя на практике данную технику создания меню, можно добиться потрясающих результатов.
2.
Из этого урока, вы узнаете, как с помощью стилей и новых свойств CSS3, не используя javascript и изображения, можно заделать отличное, функциональное и быстро работающее меню в стиле «аккордеон».
3.
Подробный мануал по созданию красивого меню в стиле «аккордеон» с помощью CSS и библиотеки jQuery. Меню тестировалось и замечательно работает во всех современных браузерах. Использование функции линейного градиента css3 в оформлении, делает это меню более выразительным и динамичным.
4.
В уроке представлен весь процесс изготовления интересного, вертикального меню для сайта, построенного полностью на использовании CSS и небольшого файла изображения, которое при желании Вы с легкостью сможете отредактировать под свои нужды.
5.
В продолжение предыдущего урока, добавлено подробное описание варианта создания вертикального меню с вложенными подпунктами
6.
Небольшой, но в тоже время подробнейший урок, по созданию качественного, с небольшим количеством HTML, CSS и JavaScript кода, с красивым интерфейсом, блока навигации в стиле «Аккордеон».
7.
Еще одно интересное решение в плане создания многоуровневого меню навигации с использованием jQuery. Кросс-браузерность конечного продукта, JQuery анимация и градиент CSS3 делает навигационный блок еще более привлекательным.
8.
Мне нравится решение, когда меню ведет себя как раскрывающиеся списки. Мастеровой люд часто использует JavaScript, чтобы добиться этого эффекта, в уроке же расписано, как достигнуть желаемого, применяя только чистые стили и функции CSS.
Перевод и адаптированная версия урока по созданию красивого, горизонтального меню в стиле "Lava-Lamp. В интернете представлено много версий меню выполненных в этом стиле, опираясь на полученные знания из урока, вы свободно сможете создать что нибудь свое индивидуальное.
На этом пока все. В этой подборке представлена лишь малая часть того, что можно сделать в плане создания красивых и индивидуальных, а главное функциональных меню навигации для ваших проектов. Надеюсь кто то найдет для себя подходящий вариан и использует его в своей работе по благоустройству сайта. Если кому понравилась статья, комментируйте, делитесь с друзьями через Твиттер, Google+ и другие соц. сервисы, а можно просто добавить статью в закладки
