CSS Панель навигации. Как создать адаптивную навигацию Пример вертикальной панели навигации

В этом уроке мы поговорим о том, как создать меню с помощью переходов используя псевдоэлементы :before и :after .

Пример меню можно увидеть здесь:

Скачать

К сожалению только Mozilla поддерживает переходы псевдоэлементов.

HTML часть

Структура меню обычная — маркированный список , и у каждого элемента списка класс effects :

1 2 3 4 5 6 7

<ul > <li class = "effects" > ГЛАВНАЯ</ a > <li class = "effects" > ОБ АВТОРЕ</ a > <li class = "effects" > ПОРТФОЛИО</ a > <li class = "effects" > БЛОГ</ a > <li class = "effects" > КОНТАКТЫ</ a > </ ul >

CSS часть

Для начала сделаем из этого списка горизонтальное меню:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

ul { list-style : none ; padding-top : 50px ; } li { position : relative ; float : left ; width : 150px ; text-align : center ; padding-top : 35px ; padding-bottom : 35px ; color : #fff ; margin-right : 20px ; border-radius : 5px ; background : #161616 ; border-bottom : 1px solid #333 ; border-left : 1px solid #000 ; border-right : 1px solid #333 ; border-top : 1px solid #000 ; cursor : pointer ; }

А сейчас добавим эффекты:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.effects :after , .effects :before { -moz-transition : width 0.5s ease 0s; height : 0px ; width : 0px ; position : absolute ; content : " " ; display : block ; opacity : 0 ; box-shadow : 0px 0px 5px #00c6ff ; } .effects :after { background : -moz-linear-gradient(left , #0ad , #08b ) ; top : 84px ; left : 75px ; } .effects :before { background : -moz-linear-gradient(right , #0ad , #08b ) ; top : 84px ; right : 75px ; } .effects :hover :after , .effects :hover :before { width : 72px ; height : 1px ; opacity : 1 ; }

Вывод

Урок получился небольшой, но мы создали очень симпатичное меню. Единственным минусом является то, что переходы правильно будут работать только в браузере Mozilla.

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

Для создания адаптивной навигации по сайту существует множество путей, и несколько jQuery плагинов даже способны сделать это мгновенно .

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

Итак, начнем.

HTML

Стили

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

Body { background-color : #ece8e5 ; }

Тег nav, который определяет навигацию, будет 100% полной ширины в окне браузера, в то время как ul, в котором он содержит наши основные ссылки меню, будет 600px в ширину.

Nav { height : 40px ; width : 100 % ; background : #455868 ; font-size : 11pt ; font-family : "PT Sans" , Arial, sans-serif ; font-weight : bold ; position : relative ; border-bottom : 2px solid #283744 ; } nav ul { padding : 0 ; margin : 0 auto ; width : 600px ; height : 40px ; }

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

Nav li { display : inline ; float : left ; }

Если Вы заметили из разметки html выше, мы уже добавили clearfix в свойство class для nav и ul, чтобы расчистить место, когда мы разместим “плавающие” элементы внутри него, используя CSS clearfix hack . Итак, добавим следующие правила стилей в таблицу стилей.

Clearfix :before , .clearfix :after { content : " " ; display : table; } .clearfix :after { clear : both ; } .clearfix { *zoom: 1 ; }

Так как у нас шесть ссылок меню и мы так же назначили контейнеру ширину 600px, каждая ссылка меню будет шириной 100px.

Nav a { color : #fff ; display : inline-block ; width : 100px ; text-align : center ; text-decoration : none ; line-height : 40px ; text-shadow : 1px 1px 0px #283744 ; }

Ссылки меню будут разделены правой границей толщиной 1px, кроме последней. Помня о блочной модели из прошлого урока, ширина ссылки меню будет увеличена на 1px из-за добавления границы, что сделает ее 101px, так что здесь мы изменим модель box-sizing на border-box, чтобы сохранить ширину ссылки меню 100px.

Nav li a { border-right : 1px solid #576979 ; box-sizing:border-box ; -moz-box-sizing:border-box ; -webkit-box-sizing:border-box ; } nav li:last-child a { border-right : 0 ; }

Nav a:hover , nav a:active { background-color : #8c99a4 ; }

Nav a#pull { display : none ; }

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

Media Queries

Вывод меню

На данном этапе меню будет все еще спрятанным и будет видимым только тогда, когда оно нужно, после касания или нажатия на ссылку «Меню», и мы можем достичь этого эффекта, используя jQuery slideToggle().

$(function() { var pull = $("#pull" ) ; menu = $("nav ul" ) ; menuHeight = menu.height () ; $(pull) .on ("click" , function(e) { e.preventDefault () ; menu.slideToggle () ; } ) ; } ) ;

Тем не менее, когда Вы меняете размер окна на маленьком экране сразу после того, как вы посмотрели и спрятали меню, меню будет спрятано, так как стиль display: none, сгенерированный jQuery, все еще применяется к элементу.

Так что нам нужно удалить этот стиль при изменении размера окна следующим образом:

$(window) .resize (function() { var w = $(window) .width () ; if(w > 320 && menu.is (":hidden" ) ) { menu.removeAttr ("style" ) ; } } ) ;

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

Бонус: альтернативный способ

Как было ранее упомянуто в уроке, есть и другие способы сделать это, и использование JavaScript библиотеки SelectNav.js – один из простейших путей. Это чистый JavaScript, который не зависит от других сторонних библиотек, таких как jQuery.

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

Перевод — Дежурка

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

При помощи CSS вы можете изменить скучные HTML меню в отличного вида навигационные панели.

Панели Навигации = Список Ссылок

Панель навигации использует стандартный HTML в качестве базы.

В наших примерах мы будем строить панель навигации из обычного HTML списка.

Панель навигации - это по сути список ссылок, так что использование элементов

вполне логично:

Пример

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

Горизонтальная Панель Навигации

Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих пунктов списка.

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

Встроенные Пункты Списка

Один из способов построения горизонтальной панели навигации - сделать элементы

встроенными, в дополнение к "стандартному" коду выше:

Объяснение примера:

display:inline; - По умолчанию элементы
являются блочными. Здесь мы удаляем переносы строк до и после каждого пункта списка, чтобы отображать их в одной строке

Плавающие Пункты Списка

Пример

li
{
float:left;
}
a
{
display:block;
width:80px;
background-color:#dddddd;
}

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

Сегодня мы представляем вам 62 привлекательных навигационных меню , основанных на CSS, javascript или технологии Flash.

Навигационное меню на CSS

Игры по типу казино или змейки и лесенки, украшенные красивым красочным меню.

Здесь мы видим отличное мягкое цветовое решение и интересный эффект при раскрытии подменю.

03.

Стивен Уиттенс (Steven Wittens) предлагает нам другую перспективу этого меню.

04.

На сайте UX Booth можно увидеть стильное, но очень простенькое меню.

05.

На сайте MacRabbit, что очевидно, используется меню в стиле MAC OS или Apple.

06.

На сайте Joyent используется простое, деловитое на вид меню, в котором предложены работы компании.

07.

Утонченность и простота данного портфолио точно приглянётся вам.

08.

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

09.

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

10.

Американский рекорд-лейбл Small Stone recordings использовали меню в виде радио, или же в виде Space Echo Roland SE-201.

11.

Нечто вроде карты, с помощью которой вы сможете «разведать» весь веб-сайт.

12.

Круглое меню в стиле Apple, в котором представлены приложения для iPhone.

13.

В Clearleft в качестве меню использовали нечто вроде календарика с запланированными заданиями.

14.

Выделенный пункт меню как будто находится в нажатом состоянии.

15.

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

16. .

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

17.

Размер букв настолько мил и необычен, и именно это привлекает ваше внимание.

18.

Отличное решение по использованию блочной навигации, в которое реализован отличный эффект при наведении.

19.

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

20.

Отличным концептом навигационного меню воспользовались дизайнеры веб-сайта Ronny Pries. Пользователи ориентируются по плану на полу.

21.

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

22.

Посмотрите, как креативно Мэтт Демпси (Matt Dempsey) использует мазки кисти.

23.

Отличный вариант реализации навигационного меню.

24.

Вертикальные вкладки, которые выглядят как папки, работающие непосредственно на веб-сайте. Очень редко используется данный способ, но отлично работает и выглядит.

25.

Навигационное меню, реализованное в стиле музыки панк-рок. Посмотрите, как Джефф Сармиенто (Jeff Sarmiento) реализовал данную идею.

26.

Нечто вроде иерархии. Еще один креативный способ реализации навигационного меню.

27.

Пиктограммы повышают чувство взаимодействия с меню.

Навигационные меню, разработанные с помощью технологии Flash

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

29.

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

30.

Интересное и привлекательное меню в стиле карт «Таро». Если вы кликните по карте, она тот час отправится в огонь.

31.

Жидкое навигационное меню, которое создаст у вас ощущение движения волн на озере.

32.

На сайте Nick Jones используется простое, но динамическое навигационное меню для перехода по портфолио.

33.

На сайте Marc Ecko нам представлена навигация в виде галереи изображений. Она позволяет посетителям пройтись по страницам искусства и философии.

34.

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

35. ?

Интересное навигационное меню с простым эффектом при наведении. Когда вы наводите курсор на пиктограмму, отображается содержимое меню.

36.

Дизайн-агентство по разработке навигационных меню, расположенное в Нью-Йорке и Форт-Лодердейле.

37.

Стильный дизайн навигации в стиле нео-древности с фоном в виде фресков.

38.

На сайте Nick Ad используется гибкое, но простое в использовании навигационное меню. Кликните в любую область на странице и увидите интересный эффект.

39.

Креативный человек использует собственные работы для привлечения посетителей в портфолио.

40. .

На сайте Section Seven реализовано интересное меню в стиле брошюры с подменю.

41.

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

42.

На сайте Beside навигационное меню реализовано в стиле радуги.

43.

Концепт портфолио из картона. Очень интересный эффект при наведении.

44.

Маленькие кубики, сложенные вместе, выполняют роль навигационного меню.

45.

Насыщенная цветом карта с «призвуком» текстуры национальных гавайских тапочек, которыми гордится весь народ.

46.

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

47.

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

Меню навигации, разработанные при помощи технологии javascript

Простое и приятное для глаз меню навигации в разных цветах.

49.

Выглядит так, как будто меню реализовано при помощи Flask, но это не так. Опрятное, прикольное и стильное навигационное меню с эффектами при наведении курсора мыши.

Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента

Как сделать горизонтальное меню: разметка и примеры оформления

HTML-разметка и базовые стили для горизонтального меню

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

HTML разметка для горизонтальной навигации

Пункт меню
Пункт меню
Пункт меню

Горизонтальное меню, находящееся внутри тега , можно дополнительно помещать внутрь элемента

...

Существует несколько способов разместить их горизонтально . Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:

Ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ } a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}

Способ 1. li {display: inline;}

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;} . Дальше стилизуем ссылки по своему желанию.

Способ 2. li {float: left;}

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;} , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 3. li {display: inline-block;}

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 4. ul {display: flex;}

Делаем список ul гибким контейнером с помощью модели . В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {display: block;} и стилизуем их по своему желанию.

CSS Панель навигации. Как создать адаптивную навигацию Пример вертикальной панели навигации

Скачать

HTML часть

CSS часть

Вывод

HTML

Стили

Media Queries

Вывод меню

Бонус: альтернативный способ

Панели Навигации = Список Ссылок

Пример

Горизонтальная Панель Навигации

Встроенные Пункты Списка

Плавающие Пункты Списка

Пример

Как сделать горизонтальное меню: разметка и примеры оформления

HTML-разметка и базовые стили для горизонтального меню

Способ 1. li {display: inline;}

Способ 2. li {float: left;}

Способ 3. li {display: inline-block;}

Способ 4. ul {display: flex;}

1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

2. Адаптивное меню для свадебного сайта

3. Адаптивное меню с фестонами

4. Адаптивное меню на ленточке

5. Адаптивное меню с логотипом по середине

6. Адаптивное меню с логотипом слева