Как сделать горизонтальное меню в html. Простое кроссбраузерное горизонтальное меню
Здравствуйте, уважаемые читатели моего блога! Сегодняшняя статья будет очень полезная для начинающих верстальщиков. Так как сегодня мы будем с вами верстать простое горизонтальное меню. Перед тем как мы приступим непосредственно к верстке, хочу пару слов сказать о том, почему я решил выбрать именно эту тему для статьи.
На самом деле все достаточно просто, когда я думал над темой очередного урока для сайта я начал вспоминать и анализировать свой опыт изучения верстки, то с чем мне приходилось сталкиваться на начальном этапе становления себя как верстальщика, что больше всего мне было непонятно при изучении данной области и т.д. Все эти вопросы я задавался себе, чтобы лучше всего разобраться в том, что может быть интересно человеку, который начинает свой путь верстальщика. И лично у меня, как только я начинал изучать верстку, больше всего возникало вопросов по верстке различных меню, особенно если речь идет о многоуровневом меню. И поэтому сегодня мы будем говорить о меню, а конкретней о горизонтальном меню. Итак начинаем!
Начинаем верстку нашего горизонтального меню!Как вы наверняка догадываетесь первым делом нам нужно создать html стараницу со стандартной разметкой и подключить к ней файл стилей. Не буду подробно останавливаться на данном шаге, так как все-таки надеюсь, что вы не настолько начинающие, чтобы подробно разсказывать вам, что такое body и head и как подключаются стили. Скажу лишь, что помимо стилей для нашего меню в файл css я напишу самый простой reset, чтобы обнулить стили и добиться одинакового отображения отступов во всех браузерах. Вот собственно так выглядит мой простейший ресет:
Про обнуление стилей тоже пока ничего подробно говорить не буде, так как по сути это тема для еще одной статьи, единственное, что вам нужно знать о вышеописанном коде, это то что благодаря данному коду у всех элементах страницы которые мы будем писать обнулятся отступы margin и padding, это нужно делать, для того чтобы наша страница одинаково выглядела во всех браузерах.
Итак что в нас есть на данном этапе? У нас есть html страница со стандартной разметкой:
Горизональное меню
И у нас есть подключенный к данной странице файл стилей (у меня это style.css), со следующем содержимым:
Следующим этапом будет создания html разметки для нашего меню.
Создаем разметку для менюВ нашей разметке мы будем использовать новый тег , который появился в HTML5, я решил вас сразу приучать к новым тегам, чтобы так сказать следовать тренду и стандарту.Несмотря на то, что новые теги HTML 5 не поддерживаются старыми браузерами я все же настоятельно рекомендую использовать их в своей верстка, так как рано или позно вам всеравно нужно будет перейти на них, как в свое время верстальщики перешли от с табличной верстке к блочной, такова реальность, лучше следовать тренду!
И раз мы уже заговорили о поддержке новых тегов html 5, чтобы у нас не возникало проблем с этим в старых браузерах, в наш документ нужно подключить специальную библиотеку — html5shiv. Делается это вставкой в
раздел head вашей страницы следующего кода:
Все после этого тег (и другие теги оносящиеся к HTML5) будут нормально восприниматься старыми браузерами.
Вернемся непосредственно к нашей разметке. Далее нам нужно в наш тег вставить маркированый список, у меня это выглядит так:
- Главная
- О нас
- Портфолио
- Блог
- Контакты
Итак с разметкой мы вроде закончили пора приступать непосредственно к написанию стилей, так как сейчас наше меню выглядит мягко говоря не очень:
Пишем стили нашего горизонтального менюИ так первым делом при верстке меню нам нужно убрать маркеры списка, они нам явно не нужны, делается это так:
Ul{ list-style:none; }
После этого наше меню станет таким:
Мне не очень нравится, что наше меню прилеплено к краям браузера, давайте исправим это:
Данным кодом мы задали ширину нашему меню, дали ему отступы сверху и низу по 50px и расположили по центру. Кто не знает если в блочного элемента есть ширина то для того чтобы расположить данный элемент строго по центру нам нужно всего лишь задать ему внешний отступ (margin) справа и слева со значением auto.
Следующим этапом нам нужно уже наконец-то сделать наше меню горизонтальным, делается это заданием элементам
Menu li{ float:left; }
Все теперь наше меню стало горизонтальным.
Если вы не поняли, что именно случилось и что делает свойство float рекомендую погуглить информацию о данном свойстве и хорошенько изучить его, так как
без него не обходится ни одна страница верстки, это я вам точно говорю. Ну да ладно продолжаем!
Menu li а{ display:block;/* Делаем ссылку блочным элементом*/ padding:12px 20px;/* Задаем внутрение отступы */ text-decoration: none; /* убираем нижнее подчеркивание */ color:#fff;/* делаем цвет ссылки белым */ background:#444;/* делаем цвет фона темным */ font:14px Verdana, sans-serif;/* задаем размер и название шрифта */ }
Здесь одно из самых важных правил — display:block;. Дело в том, что по умолчанию ссылки являются строчными элементами, а к строчным элементам отступы в разных браузерах применяются по разному, поэтому желательно ссылку сделать блочным элементом и только тогда применять к ней свойства связанные с внешним или внутренним отступами. Сейчас не хочется нагружать вас лишней информацией со временем на реальных примерах вы сами поймете зачем здесь делается такой акцент.
Давайте посмотрим что у нас получилось, обновляем страницу браузера и тадам!:
Как видите выглядит не плохо, можно сказать, что в принципе наше меню готово. Единственное, что нужно еще сделать — это задать свет ссылок при наведении, ну еще как мне кажется меню лучше будет смотреться с разделителями между пунктами.
Начнем с разделителей:
Menu li{ border-left:1px solid #666; } .menu li:first-child{ border-left:none; }
Что мы здесь сделали? Да все очень просто мы задали для наших пунктов (
Опять смотрим, что у нас получилось:
По моему с разделителями намного лучше.
Menu li a:hover{ background:#888; }
Опять используя специальный псевдокласс, в это раз — hover, мы задаем цвет ссылке при наведении на неё курсора, смотрим:
По моему крутяк 🙂 , надеюсь у вас вышло такое же меню как у меня.
На этом буду заканчивать данный урок, очень надеюсь, что он вам был полезен и теперь вы знаете, как верстать простое горизонтальное меню на чистом html и css . Конечно, мы сверстали одноуровневое меню, немного сложней будет с двухуровневым мену (с вложенным списком), но это уже тема для другого урока, на этом у меня все. Заходите еще, буду рад!!!
ЗадачаСделать горизонтальное меню, пункты которого имеют произвольный наклон (рис. 1).
Рис. 1. Вид меню с наклонными пунктами
РешениеЗа трансформацию элемента отвечает стилевое свойство transform , в качестве его значения используется функция skewX , которая и задаёт нужный наклон. Угол наклона проще устанавливать в градусах, к примеру, 30deg - это 30º от вертикали. Трансформация действует и на все дочерние элементы, поэтому текст внутри элемента также будет наклонён, что не лучшим образом отражается на его читабельности и красоте. Поэтому к тексту важно ещё раз применить наклон, но уже в другую сторону, для этого достаточно просто поменять знак перед значением градусов.
Браузеры поддерживают свойство transform преимущественно со своими префиксами, так что для универсальности в стилях следует повторить его несколько раз с одним и тем же значением, добавляя -moz- для Firefox, -webkit- для Safari и Chrome, -o- для Opera и -ms- для браузера Internet Explorer как показано в примере 1.
Пример 1. Наклон пункта меню
HTML5 CSS3 IE Cr Op Sa Fx
Меню li { display: inline-block; /* Строчно-блочные элементы */ background: #CA181A; /* Цвет фона */ margin-right: 3px; /* Расстояние между пунктами меню */ -webkit-transform: skewX(-30deg); /* Для Safari и Chrome */ -moz-transform: skewX(-30deg); /* Для Firefox */ -o-transform: skewX(-30deg); /* Для Opera */ -ms-transform: skewX(-30deg); /* Для IE */ transform: skewX(-30deg); /* CSS3 */ } a { color: #fff; /* Цвет ссылок */ display: block; /* Блочный элемент */ padding: 5px 15px; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ -webkit-transform: skewX(30deg); /* Для Safari и Chrome */ -moz-transform: skewX(30deg); /* Для Firefox */ -o-transform: skewX(30deg); /* Для Opera */ -ms-transform: skewX(30deg); /* Для IE */ transform: skewX(30deg); /* CSS3 */ } li:hover { background: #333; /* Цвет фона при наведении курсора мыши */ }
- Джокер
- Пазузу
- Палпатин
- Доктор Дум
В данном примере горизонтальное меню создаётся с помощью маркированного списка. Чтобы список был именно горизонтальным, в стилях к элементу li добавляется свойство display со значением inline-block . Для наклона применяется свойство transform с функцией skewX и значением -30º. К ссылкам внутри списка также применяется это свойство, но уже с положительным значением 30º, это обеспечивает правильное, а не наклонное отображение букв.
Браузеры Chrome, Safari и Firefox используют свойство transform для блочных или строчно-блочных элементов, поэтому для ссылок задано свойство display со значением block .
Задача
Создать выпадающее меню инструментами CSS и HTML.
Решение
Для начала давайте создадим список, разместим его горизонтально и оформим его внешний вид. Это будет основное меню, а потом сделаем для его пунктов выпадающее меню.
Выпадающее меню ul.menu{ padding: 3px; /* убираем отступы */ margin-top: 50px; /* для красоты отодвигаю вниз */ text-align: center; /* выравниваю элементы спаска по центру */ } ul.menu > li{ list-style: none; /* убираем маркеры списка */ display: inline-block; /* разещаем списки горизонтально */ background-color: #D87171; padding: 5px 15px; } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; }
У нас получился список такого вида:
Рисунок 1. Подготовительные работы.
Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover . Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки - это уже другой псевдокласс.
Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта "Услуги", добавим выпадающие разделы: "Купить", "Продать", "Обменять". Эти пункты - это отдельный список, который вложен в тег
Создадим этот список и добавим стили, описывающие его внешний вид.
Выпадающее меню ul.menu{ padding: 3px; /* убираем отступы */ margin-top: 50px; /* для красоты отодвигаю вниз */ text-align: center; /* выравниваю элементы спаска по центру */ } ul.menu > li{ list-style: none; /* убираем маркеры списка */ display: inline-block; /* разещаем списки горизонтально */ background-color: #D87171; padding: 5px 15px; } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; } /* устанавливаем стиль для внутреннего меню */ .menuInner{ list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text-align: left; }
Теперь у нас получился такой список:
Рисунок 2. Подготовительные работы.Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display : none }. А при наведении курсора его нужно активировать сделав снова видимым правила {display : inline-block }.
Выпадающее меню ul.menu{ padding: 3px; margin-top: 50px; text-align: center; } ul.menu > li{ list-style: none; display: inline-block; background-color: #D87171; padding: 5px 15px; } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; } /* устанавливаем стиль для внутреннего меню */ .menuInner{ display: none; /* делаем невидимым */ list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text-align: left; } /* делаем видимым при наведении курсора на блок li */ .menu > li:hover > .menuInner{ display: block; }
Теперь наше меню исчезает и появляется, но нам нужно чтобы оно появлялось поверх существующих элементов, не меняя уже установленные границы существующих блоков.
Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute .
Выпадающее меню ul.menu{ padding: 3px; margin-top: 50px; text-align: center; } ul.menu > li{ position: relative; /* добавляем позиционирование */ list-style: none; display: inline-block; background-color: #D87171; padding: 5px 15px; height: 20px; /* добавляем высоту */ } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; } /* устанавливаем стиль для внутреннего меню */ .menuInner{ display: none; /* делаем невидимым */ list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text-align: left; } .menu > li:hover > .menuInner{ display: block; position: absolute; top: 30px; left: 0; }
Что мы тут сделали:
Теперь выпадающее меню работает корректно.
Рисунок 3. Окончательный вариант.Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.
Учебная задача решена. Пока.
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью 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; }
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
Название документа #navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; } #navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; }
Попробовать »При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса:hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; } Попробовать »
Горизонтальное менюВ предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#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; }
1. Вертикальное яркое jQuery меню 2. Прикольный эффект. Танцующее меню. 4. Выпадающий список с применением jQueryОтличная стилизация элемента интерфейса в виде раскрывающегося списка.
При наведении мышки на кнопку сверху выезжает панель.
6. jQuery плагин «MobilyBlocks» для отображения кругового меню 7. Меню с использованием спрайтовАнимированное javascript меню с эффектом свечения.
Свежее симпатичное меню на jQuery.
9. jQuery меню «GarageDoor» 10. jQuery меню с вертикальной прокруткойРеализация меню с большим количеством пунктов. Прокручивается при перемещении курсора мыши вверх или вниз.
11. jQuery оформление выпадающего списка 12. Плагин навигации по страницеПлавная прокрутка к нужному разделу на странице. Плагин «jQuery One Page Navigation».
13. Плагин «Animated Content Menu»Новый jQuery плагин. Отличная реализация анимированной навигации по сайту. При переходе по пунктам меню всплывает блок с описанием и возможными ссылками, при этом в зависимости от выбранного пункта меняется фон страницы, который растягивается на весь экран независимо от размеров окна браузера. Обязательно посмотрите на демонстранционной странице.
14. jQuery плагин меню «Sweet Menu»Анимированное меню с выезжающими пунктами.
15. Фиксированное jQuery менюПри прокрутке страницы вниз, меню остается зафиксировано сверху экрана.
16. Прокручивающиеся меню «Slider Kit»Для реализации вертикльного меню с большим количеством пунктов. Прокрутка пунктов осуществляется с помощью колеса мыши, либо с помощью ссылок «Previos» и «Next».
17. Стильное CSS3 меню 18. Новое CSS3 меню в стиле AppleНовое меню в стиле Apple. Выглядит темнее того, что было ранее, но не менее симпатично.
19. Оригинальное jQuery менюВыпадающее меню с фоновым эффектом. Подпункты меню разворачиваются вверх. При наведении на пункт меню сменяется фоновое изображение.
20. Анимированное меню на jQueryАнимированное меню. Пункты меню представлены в виде иконок и описания. несколько отличных эффектов при наведении курсора мышки на пункт меню. Предусмотрено 8 эффектов, чтобы посмотреть их все - пройдите по ссылкам Exemple1-Exemple8 на демонстрационной странице.
21. «Scrolling menu» XML меню с прокруткойВертикальное и горизонтально меню с прокруткой. Хорошее решение при большом количестве пунктов в меню.
22. Контекстное меню на сайте на jQueryМеню всплывает по нажатию правой кнопкой мыши на определенной области.
23. Круговое двухуровневое меню для сайтаПри выборе пункта меню, справа отображаются пункты подменю.
24. jQuery CSS3 меню с эффектом размытия «Blur Menu» CSS3Оригинальное jQuery CSS3 меню выполнено в 7 различных стилевых оформлениях. При наведении курсора мыши на один из пунктов меню остальные как бы размываются.
25. Несколько эффектных анимированных jQuery CSS3 меню10 креативных анимированных меню. Горизонтальные и вертикальные CSS3 меню с различными эффектами и переходами.
В архив также вложен исходный PSD файл меню.
27. Меню MagicLineФон или подчеркивание пункта меню следует за мышкой с небольшой задержкой, при этом фон плавно изменяет свой цвет при следовании от пункта к пункту. Очень красивый эффект, выглядит необычно. Внимание: эффект не работает в опере
28. Image BubblesОтличный эффект, при наведении мышки на одно из изображений. Эффект чем-то напоминает jQDock, описанный выше.
31. Интересные jQuery меню с различными эффектамиГоризонтальное, вертикальное меню. Интересные эффекты.
32. Отличное jQuery меню в стиле Apple 34. jQuery меню с интересным эффектом 36. Свежее меню с интересным эффектом на jQueryОчень интересный эффект. Отлично подойдет для оформления сайтов-портфолио.
Интересный эффект выплывающих миниатюр при наведении.
40. Выпадающий список с автоскроллингомСимпатичный эффект перехода между пунктами.
42. Отличное jQuery меню 43. Красивое большое jQuery меню 44. Прокручивающиеся jQuery менюПункты меню представлены в виде миниатюр.
46. Круговое меню навигации jQuery 47. CSS и jQuery менюПанель навигации с окном поиска, которая становится полупрозрачной, когда вы прокручиваете страницу вниз.
48. Горизонтальное jQuery меню 49. Вертикальное jQuery менюОтличное вертикально меню. При наведении курсора выплывает пункт меню.
50. Горизонтальное jQuery менюИнтересный эффект при наведении курсора на пункт меню.
52. Раскрывающееся jQuery менюПри наведении курсора мыши на меню появятся его пункты. Появившиеся пункты отображаются в виде дуги, радиус которой вы сможете задать при настройке плагина. В некоторых браузерах вы не увидите отображения по дуге, меню будет отображаться прямо, но это все равно не испортит общее впечатление от этой jQuery реализации меню.
53. CSS и jQuery панель навигацииИнтересный эффект при наведении курсора мыши на пункт меню.
54. Всплывающая jQuery панельСвежее анимированное меню в серых тонах.
58. Колоночная навигация по сайту на jQueryИнтересное решение для навигации, которая представлена в виде вертикальных полос. При наведении курсора мыши на эти полосы появляется изображение для пункта и список подменю. При нажатии на пункт подменю появляется страница с описанием. Такая реализация отлично подойдет для промо-сайтов или презентаций. Обязательно посмотрите демо плагина.
59. jQuery навигация по сайтуНавигация по сайту представлена в виде 4 картин, при наведении на которую вы заметите интересный анимированный эффект.
60. Панель навигации прокручивается вместе с содержимымПанель навигации. При нажатии на стрелку происходит прокрутка страницы. Навигация прокручивается вместе с содержимым страницы.
61. jQuery панель с различными социальными сервисами 62. Аккуратное анимированное jQuery меню 63. jQuery меню «Акварельные кисти»