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

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

Ошибка №1: нестандартный стиль

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

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

Ошибка №2: универсальные надписи пунктов меню

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

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

Согласитесь, что ваши клиенты не ищут абстрактные «Товары» или «Услуги», и навигация с такими значками не повлияет на продвижение сайта в результатах поисковой выдачи. Узнали себя? Значит, пора исправляться! Меню сайта и его структура в целом должны быть оптимизированы для поисковых систем и говорить на понятном для целевой аудитории языке. Дочитав нашу статью до конца, вы увидите, как подобную задачу решают многие компании.

Ошибка №3: выпадающее меню

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

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

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

Ошибка №4: большое количество пунктов меню

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

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

Ошибка №5: неуместное расположение пункта меню для оформления заказа

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

Концентрация внимания значительно выше в начале списка (эффект первичности) и в конце (эффект новизны). Вот почему правильно расставлять самые важные пункты в начале навигации, второстепенные - в центре. Пункт меню «Контакт» следует разместить в конце TOP навигации в крайнем правом углу.

Бонусная подсказка: ссылки - forever, кнопки - никогда!

В случае, если вы отстали от тенденций веб-дизайна лет на 8 и до сих пор используете графические навигационные кнопки вместо текстовых ссылок, тогда для вас мы приводим 5 причин пересмотреть свои привычки:

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

А теперь, как мы и обещали: 5 примеров навигации сайта без ошибок.

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

Сегодня мы представляем вам 62 привлекательных навигационных меню , основанных на CSS, javascript или технологии Flash.

Навигационное меню на CSS

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

Здесь мы видим отличное мягкое цветовое решение и интересный эффект при раскрытии подменю.


03.

Стивен Уиттенс (Steven Wittens) предлагает нам другую перспективу этого меню.


04.

На сайте UX Booth можно увидеть стильное, но очень простенькое меню.


05.

На сайте MacRabbit, что очевидно, используется меню в стиле MAC OS или Apple.


06.

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


07.

Утонченность и простота данного портфолио точно приглянётся вам.


08.

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


09.

Выпадающее меню, в котором используется 2 цвета, которые символизируют активный пункт меню и неактивный.


10.

Американский рекорд-лейбл Small Stone recordings использовали меню в виде радио, или же в виде Space Echo Roland SE-201.


11.

Нечто вроде карты, с помощью которой вы сможете «разведать» весь веб-сайт.


12.

Круглое меню в стиле Apple, в котором представлены приложения для iPhone.


13.

В Clearleft в качестве меню использовали нечто вроде календарика с запланированными заданиями.


14.

Выделенный пункт меню как будто находится в нажатом состоянии.


15.

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


16. .

В этом меню использован простой и приятный отличный эффект при наведении.


17.

Размер букв настолько мил и необычен, и именно это привлекает ваше внимание.


18.

Отличное решение по использованию блочной навигации, в которое реализован отличный эффект при наведении.


19.

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


20.

Отличным концептом навигационного меню воспользовались дизайнеры веб-сайта Ronny Pries. Пользователи ориентируются по плану на полу.


21.

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


22.

Посмотрите, как креативно Мэтт Демпси (Matt Dempsey) использует мазки кисти.


23.

Отличный вариант реализации навигационного меню.


24.

Вертикальные вкладки, которые выглядят как папки, работающие непосредственно на веб-сайте. Очень редко используется данный способ, но отлично работает и выглядит.


25.

Навигационное меню, реализованное в стиле музыки панк-рок. Посмотрите, как Джефф Сармиенто (Jeff Sarmiento) реализовал данную идею.


26.

Нечто вроде иерархии. Еще один креативный способ реализации навигационного меню.


27.

Пиктограммы повышают чувство взаимодействия с меню.


Навигационные меню, разработанные с помощью технологии Flash

В данном меню навигации реализован очень интересный эффект при наведении курсора мыши.


29.

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


30.

Интересное и привлекательное меню в стиле карт «Таро». Если вы кликните по карте, она тот час отправится в огонь.


31.

Жидкое навигационное меню, которое создаст у вас ощущение движения волн на озере.


32.

На сайте Nick Jones используется простое, но динамическое навигационное меню для перехода по портфолио.


33.

На сайте Marc Ecko нам представлена навигация в виде галереи изображений. Она позволяет посетителям пройтись по страницам искусства и философии.


34.

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


35. ?

Интересное навигационное меню с простым эффектом при наведении. Когда вы наводите курсор на пиктограмму, отображается содержимое меню.


36.

Дизайн-агентство по разработке навигационных меню, расположенное в Нью-Йорке и Форт-Лодердейле.


37.

Стильный дизайн навигации в стиле нео-древности с фоном в виде фресков.


38.

На сайте Nick Ad используется гибкое, но простое в использовании навигационное меню. Кликните в любую область на странице и увидите интересный эффект.


39.

Креативный человек использует собственные работы для привлечения посетителей в портфолио.


40. .

На сайте Section Seven реализовано интересное меню в стиле брошюры с подменю.


41.

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


42.

На сайте Beside навигационное меню реализовано в стиле радуги.


43.

Концепт портфолио из картона. Очень интересный эффект при наведении.


44.

Маленькие кубики, сложенные вместе, выполняют роль навигационного меню.


45.

Насыщенная цветом карта с «призвуком» текстуры национальных гавайских тапочек, которыми гордится весь народ.


46.

Стол с вещами, символизирующими меню: телефон для контакта с администрацией, журнал для перехода в портфолио, газета для просмотра новостей и другое.
Очень интересно, когда в качестве навигации используются реальные вещи.


47.

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


Меню навигации, разработанные при помощи технологии javascript

Простое и приятное для глаз меню навигации в разных цветах.


49.

Выглядит так, как будто меню реализовано при помощи Flask, но это не так. Опрятное, прикольное и стильное навигационное меню с эффектами при наведении курсора мыши.

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

Навигация по сайту

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

Example of site navigation

Home

Здесь не слишком много сюрпризов, по крайней мере, с точки зрения чистого HTML . Позже в курсе мы поговорим о задании стилей меню такого рода с помощью CSS и добавлении поведения с помощью JavaScript . Необходимо рассмотреть одну важную вещь, как выделить текущий документ в меню , чтобы создать у пользователя ощущение присутствия в определенном месте, и что он меняет свое местоположение (даже хотя в реальности это и не так, за исключением, конечно, случая использования мобильных устройств для просмотра Web !). Именно это мы и рассмотрим далее.

Создание у посетителей чувства "присутствия в определенном месте"

Одно из золотых правил разработки и навигации в Web состоит в том, что текущий документ никогда не должен ссылаться на себя самого, но, наоборот, должен явно отличаться от других записей в меню . Это важно, так как дает посетителям точку опоры и говорит им, где они находятся в своем путешествии по сайту. Существуют крайние случаи, такие как Web -приложения, permalinks в блогах, и так называемые "одностраничные" Web -сайты, но в 99% случаев ссылка на документ, на который вы уже смотрите, является избыточной и путающей посетителя.

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

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

Example of site navigation

About 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 W3C Guidelines Browser Bugs User Impact

Любое изображение можно превратить в меню , определяя карту с различными областями (называемые также горячими точками). Для карты задается атрибут 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; }

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

    Создание навигации

    Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка