Как сделать горизонтальное меню

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

Сегодня, как всегда, мы рассмотрим простейший вариант горизонтального меню из нескольких пунктов. По последним требованиям поисковых систем, которые рекомендуют использовать версию языка HTML5 горизонтальное меню принято размещать между двумя семантическими тегами <nav>…</nav>. А скажу более того, что в такие теги принято размещать любое навигационное меню, правое, левое или нижнее. 

Итак, код для размещения навигационного горизонтального меню следующий: 

Стили следующие 

Про тег <nav> мы уже говорили, это тег обозначающий любое навигационное меню. В теге div задаем стили по id navcontainer, в котором прописываем местоположение горизонтального меню относительного верхнего края экрана. Задаем выравнивание либо по центру или по левому краю.

В тегах ul прописываем стили по селектору #navlist  list-style: none; float:left; тогда все блоки заключенные между тегами li будут выстроены в одну линию. Проще говоря все пункты меню будут выстроены в одну линию. А атрибут lyst-style: none обозначает, что список меню будет немаркированным. Если этот атрибут не указывать, то каждый пункт будет начинаться с большого кружка.

Это основные атрибуты для создания горизонтального меню. А остальные значения CSS отвечают за внешний дизайн горизонтального меню. Дизайн меню может быть абсолютно любым. Все зависит от основного стиля всего сайта. 

А пример горизонтального меню вы можете просмотреть и скачать по ссылкам внизу.

 

 

 

Если вы хотите создавать меню разного вида вы можете воспользоваться специальной программой. Данный софт абсолютно бесплатный. 

Посмотреть и скачать программу можно на этой странице.

Добавить комментарий


( ! ) Ф.И.О.
( ! ) Текст сообщения: (Не больше 5000 знаков)

( ! )Введите текст с картинки :
Обновить код
Положительный отзыв Положительный отзыв
Отрицательный отзыв Отрицательный отзыв



Коллекция скриптов и модулей   © 2017