Меню
Бесплатно
Регистрация
Главная  /  Советы  /  Как сделать навигацию в css. CSS Панель навигации

Как сделать навигацию в css. CSS Панель навигации

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

Для создания адаптивной навигации по сайту существует множество путей, и несколько 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.

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

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

Для того, чтобы было удобно перемещаться по сайту нужна навигация, которую я сделал использовав скрипты HTML и CSS. В результате моей работы, вы можете видеть 2 типа меню (вертикальное и горизонтальное). А теперь, постараюсь рассказать о тех задачах, которые, как мне кажется, должно выполнять меню для сайта:

  • Удобность в использовании;
  • Должна быть создана навигация по всем разделам сайта;
  • На каждой странице сайта должен быть выход на главную страницу;
  • Переход на любую страницу сайта максимум в 3 клика.

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

Первым делом, я поведаю вам о том, как сделать . Сначала пишем скрипт в таблице стилей:

#navigation { width: 560px; height: 50px; margin: 0; padding: 0; background-image: url(img/gor_menu.jpg); background-repeat: no-repeat; background-position:center; } #navigation ul { list-style: none; margin: 0; padding: 0; } #navigation ul li { display: inline; margin: 0px; } #navigation ul li a { height:28px; display: block; float: left; color: #333333; text-decoration: none; font-family: Arial; font-size: 12px; font-weight: bold; background-image: url(img/menu_separatorline.jpg); background-repeat: no-repeat; background-position: right center; padding-top: 17px; padding-right: 15px; padding-bottom: 0; padding-left: 15px; } #navigation ul li a:hover { color:#FFF; background-image: url(img/button_hover.jpg); background-repeat: repeat-x; background-position: left top; } #navigation ul li#active a { background-image: url(img/button_hover.jpg); background-repeat: repeat-x; background-position: left top; }

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

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

Теперь нужно немного разъяснить, что к чему относится, дальше я думаю вы сами со всем разберетесь:

— содержит всю структуру меню. В него же будет вставляться верхнее изображение, которое я подготовил заранее в Photoshop;

— тело меню, содержит неупорядоченный список. В него будет вставляться изображение, которое будет повторяться по вертикали и создавать фон. Может быть, я выбрал слишком яркие тона, но на мой взгляд, они не режут глаз;

— содержит каркас самого меню;

  • Создание меню сайта
    • — это одна из позиций, где в a href="#" нужно будет вставить необходимую ссылку;