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



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


Красивое горизонтальное меню для сайта на jQuery и HTML5



Изящное и очень красивое горизонтальное меню для сайта. Подойдет данное меню для сайта любой тематики. Сделано на HTML5 и jQuery. Плавное и гибкое передвижение активного прямоугольника меню смотрится очень красиво. Игра теней и градиент придает этому меню стильный и современный вид. Код данной навигации очень прост.

Работает в любом современном браузере без перебоев, но даже в старых браузерах (где тени и градиенты не отображаются) смотрится довольно не плохо. Из-за правильно расположения теней меню имеет 3D эффект. Этот скрипт навигации можно использовать, как главное меню, так и элемент контента сайта. Меню взято с сайта bayguzin.ru.


Горизонтальное выпадающее меню



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

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



Горизонтальное меню со свечением



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


ul.nav{ /*элемент с классом nav - наш список*/ font-family: Georgia, serif; /*шрифт*/ font-size: 12px; /*размер шрифта*/ font-style: italic; /*начертание шрифта*/ font-weight: normal; /*насыщенность шрифта - нормальное начертание шрифта (значение = 400)*/ letter-spacing: normal; /*расстояние между символами - обычное растояние для текущего шрифта*/ line-height: 1.7em; /*высота линии (межстрочный интервал) текста*/ color:#fff; /*цвет*/ list-style:none; /*задаем стиль отображения маркеров - отобразить без маркера*/ position:fixed; /*способ позиционирования элемента на веб странице - элемент позиционируется относительно окна браузера (относительно других элементов не может) и не прокручивается вместе с содержимым*/ z-index:99999; /*чем больше число, тем «выше» элемент по z-оси, выше над другими элементами*/ top:0px; /*позиция верхнего края элемента относительно верхней стороны родителя (у нас окна)*/ right:120px; /*позиция верхнего края элемента относительно правой стороны родителя (у нас окна)*/ } ul.nav li{ /*элемент li элемента с классом nav */ float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/ background:transparent url(menu_left4.png) no-repeat 0px -2px; height:37px; /*высота содержательной части элемента*/ } ul.nav li a{ /*ссылка элемента li элемента с классом nav */ background:transparent url(menu_right4.png) no-repeat 100% -2px; display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/ margin-left:9px; /*внешние отступы слева*/ line-height:33px; /*высота линии (межстрочный интервал) текста*/ padding:0px 9px 4px 0px; /*внешние отступы сверху, справа, снизу, слева*/ color:#f0f0f0; /*цвет*/ text-decoration:none; /*подчеркивание отсутствует*/ } ul.nav li a b{ /*тег b ссылки элемента li элемента с классом nav */ position:relative;/*способ позиционирования элемента - обычное положение элемента, дочерние элементы с абсолютным позиционированием будут позиционироваться относительно границ родителя*/ } ul.nav li a:hover{ /*ссылка элемента li элемента с классом nav при наведении курсора*/ color:#fff; /*цвет*/ } ul.nav li a:hover b{ /*тег b ссылки элемента li элемента с классом nav при наведении курсора*/ top:3px; /*позиция верхнего края элемента относительно верхней стороны родителя (у нас окна)*/ text-shadow: #fff 0 0 8px;/*задает эффект тени тексту элемента - цвет, смещение тени по осям x y, ее радиус*/ }

На странице размещаем блок с классом "menu"

<ul class="nav"> <li><a href="http://www.valvas.ru"><b>Главная</b></a></li> <li><a href="#"><b>Ссылка1</b></a></li> <li><a href="#"><b>Ссылка2</b></a></li> <li><a href="#"><b>Ссылка3</b></a></li> <li><a href="#"><b>Ссылка4</b></a></li> </ul>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР      СКАЧАТЬ ИСХОДНИКИ

24.06.2013

Далее рассмотрим: Горизонтальное выпадающее меню на CSS