42 Menu & Nav

Гибкое горизонтальное меню

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

Гибкое горизонтальное меню
44 Menu & Nav

Диагональное меню на CSS

Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.

Диагональное меню на CSS
85 Menu & Nav

Адаптивное много-уровневое меню

Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам - font-awesome.css

Адаптивное много-уровневое меню
15 Menu & Nav

Размытое меню на CSS3

Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.

Размытое меню на CSS3
17 Menu & Nav

HorizontalNav - горизонтальная навигация

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

HorizontalNav - горизонтальная навигация
22 Menu & Nav

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

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

Горизонтальное меню с выпадающими подпунктами
9 Menu & Nav

Меню с эффектом подпрыгивания

Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.

Меню с эффектом подпрыгивания
26 Menu & Nav

Выпадающее адаптивное меню

Адаптивное выпадающее CSS3 меню, которое при уменьшении окна браузера превращается в меню вида аккордеон. Проверено в Chrome, Opera, FireFox, IE9, iPad, iPhone. В IE7 и IE8 работает только выпадающее подменю, адаптивность теряется.

Выпадающее адаптивное меню