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

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

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

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

Эффективная навигация по сайту

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

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

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

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

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

Начинайте со структуры сайта

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

Первичная навигация

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

Информационные ссылки

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

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

Расположение основных навигационных ссылок

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

Вторичные навигационные ссылки

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

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

Навигационные ссылки в контексте страницы

Советы по разработке эффективной навигации по сайту

Не открывайте страницы в новых окнах

Это сбивает с толку пользователей и отключает их кнопки "наверх ". Они окажутся, в конечном итоге, с множеством открытых окон и могут закрыть их все в отчаянии.

Не перемещайте элементы навигации от страницы к странице

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

Не пытайтесь поставить все ссылки на каждой странице

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

Используйте "крутые" современные технологии с умом

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

Используйте цвет, чтобы выделить ссылки

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

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

Используйте описательный текст в атрибуте "аlt" для изображений - ссылок

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

Последовательность, последовательность и еще раз - последовательность

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

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

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

Рекомендации от Google по структуре навигации по сайту

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


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

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

Какую навигацию делать на сайте?

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

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

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

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

Правила хорошей навигации

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

Чтобы не упустить важные моменты, учтите следующие рекомендации:

1. Интуитивность. Навигация не должна быть сложной, поэтому как бы вам не хотелось, лучше отказаться от сложных форм и меню, написанных, к примеру, на Flash. Лучше использовать стандартную навигацию с привычным интерфейсом.
2. Значимость. Нет смысла добавлять новые пункты меню, ссылки и блоки с представлением материалов, которые не важны вашим посетителям. Каждый элемент навигации должен быть полезным, перегружать ресурс не стоит.
3. Идентичность. Некоторые вебмастера намеренно пытаются проявить свою креативность и создают разную навигацию, для отдельных страниц сайта. Лучше этого не делать, так как посетители могут легко в этом запутаться.
4. Гармоничность. Все элементы навигации, которые вы устанавливаете на сайте, должны хорошо вписываться в общий дизайн ресурса. Это касается не только меню, но и таких элементов как хлебные крошки или блоки с ссылками.

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

Удобная навигация сайта начинается с главного меню

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

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

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

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

Постраничная навигация сайта – внутренняя перелинковка

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

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

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

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

Навигация по странице сайта

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

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

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

Как сделать навигацию на сайте: дополнительные меню

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

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

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

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

Вам также будет интересно:
—
—
—

Дата публикации статьи: 20 марта 2016 г.
Задать любой вопрос авторам статей Вы можете по e-mail

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

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

3. Логотип компании или название сайта в левом верхнем углу при нажатии должны вести на главную страницу сайта. На самой главной странице этот элемент не должен быть кликабельным.

4. По названию пункта меню должно быть чётко понятно, что находится внутри. И как раз в этом вопросе надо максимально внимательно отнестись к сложившимся стереотипам. К примеру, мы все привыкли что у интернет-магазинов есть пункты меню “Доставка”, “Оплата” или “Оплата и доставка”. Но я встречал один интернет-магазин, чтобы не раскрывать реальных названий, назовём его “Бурундучок”. Так вот, у этого магазина информация о способах оплаты, доставки, а заодно и о преимуществах продукции перед конкурентами находилась в разделе “Секреты Бурундучка”. Понятно, что это была некая задумка с каким-то смыслом, но такое расположение даной информации нарушает сразу два правила юзабилити: во-первых ломает устоявшиеся шаблоны пользователя, а во-вторых делает содержимое раздела абсолютно непредсказуемым по его ссылке в меню навигации. Оригинально? Да. Удобно и позитивно влияет на конверсию? Нет.

5. Ссылки, открывающиеся в новом окне желательно как-то помечать, к примеру общепринятым значком . Дело в том, что в новом окне или вкладке у пользователя уже не будет работать привычная кнопка “Назад” браузера, и чтобы вернуться назад на страницу, с которой он нажал ссылку, ему надо будет переключить окно или вкладку. Для удобства восприятия сайта желательно посетителя заранее предупредить к открытию ссылки в новом окне или вкладке. Вообще открывать ссылки в новом окне стоит только если они ведут на другой сайт или на какую-то логически отделённую часть текущего сайта.

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

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

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

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

Для каждого сайта может быть свой список страниц в навигационное меню. Рекомендуется делать 5-7 страниц. Если же их получается больше, то лучше добавить второй ряд для меню. У пунктов меню могут быть подпункты. Их тоже лучше не делать слишком много – список подпунктов должен помешаться на один экран, без прокрутки.

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

О том, как работать с меню в WordPress можно узнать .

Форма поиска

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

В WordPress поиск присутствует в стандартной комплектации. Но его функции далеки от идеала. Поэтому лучше использовать какие-либо дополнительные плагины, чтобы улучшить его, например, .

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

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

Чтобы сделать удобную навигацию сайта, нужно задействовать пространство подвала. Вот какие полезные элементы можно там установить:

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

Хлебные крошки

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

Такое название элемент получил от сказки “Генезель и Греттель”. Похищенный Гензель бросал хлебные крошки, чтобы помочь Греттель найти его.

• Их традиционное и привычное место – вверху слева.
• Шрифт должен быть невыразительным, и быть на втором плане, относительно всего остального текста.
• Каждый раздел в крошках должен быть кликабельной ссылкой, но не последний. Последний раздел должен наименоваться так же, как и текущая страница.
• Хлебные крошки должны быть на всех страницах сайта, кроме главной.

Для создания хлебных крошек в WordPress можно использовать специальные плагины. Например, .

Боковое меню

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

Кнопка для возврата наверх

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

Карта сайта

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

В WordPress сделать карту сайта можно .

Список

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

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

Вот наш пример 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. По сравнению с другими меню, данное меню выглядит очень просто, но не надо об этом кричать в комментариях:). Это основа, используя которую, можно сделать нечто большее.