Навигационные панели с помощью CSS. Очень простая горизонтальная панель навигации Как создать веб страницу с навигацией css
Давайте начнем с иллюстрации типичной HTML структуры. Перед вами схема типичной навигационной панели, в которой присутствует несколько ссылок.
HTML код предельно прост: блок div и неупорядоченный список внутри. Как вы, возможно, знаете, спецификация HTML5 ввела новый элемент (nav), который идентифицирует навигационную панель. Тег nav заменяет общий тег div ,но, как вы можете видеть ниже, общая структура навигационной панели не меняется.
Организовать навигационную панель при помощи неупорядоченного списка (ul) всегда хорошая практика, особенно если вам требуется организовать более сложное взаимодействие между основными ссылками и подменю.
Перед вами пример HTML разметки навигационной панели с подменю.
Предложения по CSS
Сейчас давайте обратим внимание на три момента, которые сделают ваш CSS код лучше. Высота тега li должна быть равна высоте неупорядоченного списка (ul).
Для идеального вертикального выравнивания текста установите значение свойства line-height равным высоте тега ul .
Для удобной навигации по сайту на всех страницах используют меню, чтобы пользователю было понятно, что и где у вас находится. Практически всегда в верхней части страницы (в шапке) располагают горизонтальное меню по разделам (категориям) сайта, а вертикальное меню прописывают в сайтбаре (в колонке) и используют для навигации по статьям.
Из статьи вы поймёте как сделать меню для сайта html, что для этого потребуется прописать, чтобы получилось горизонтальное и вертикальное меню на css, либо меню с выпадающим списком.
Для того, чтобы сделать меню (любое) мы будем использовать маркированный список, которому придадим непосредственно свой class и пропишем для этого класса свои параметры с необходимыми значениями.
К примеру, для создания меню мы используем список с классом class="menu" (название класса любое, только латинские буквы), и код html будет выглядеть так:
В стилевом оформление для меню я указал обязательные свойства с нужными значениями:
Обязательные параметры и значения CSS
- margin: 0; - убираем все отступы списка, иначе браузер подставит значения по умолчанию 20px;
- list-style-type: none; - убираем маркеры у пунктов меню, иначе браузер добавит точки или цифры.
Вот таким образом делается меню на html страницах, и теперь перейдём к созданию горизонтального меню и рассмотрим всё на примерах.
Как сделать горизонтальное меню на CSS
Для отображения горизонтального меню применяя список, нам достаточно прописать в вышеуказанный код всего один параметр display: inline; , чтобы пункты меню выровнялись в одну строку и шли друг за другом по горизонтали. А так же добавим отступы между пунктами меню с помощью margin .
И выглядеть это будет так:
Горизонтальное меню у нас готово, осталось придать ему красивый внешний вид.
Давайте каждому пункту в горизонтальном меню придадим рамку border и сделаем у неё скошенные края, заполним определённым цветом background-color (добавим фон для пункта меню), и изменим вид ссылки.
Отображаться горизонтальное меню уже будет таким образом:
Так как горизонтальное меню в большинстве случаях прописывают в шапке сайта, то и я в примере добавил в меню фон, который вы измените под свой цвет шапки.
И для наглядности сделал пункты меню по центру, применив свойство text-align: center; , которое можно удалить (выровняется автоматически по левому краю), либо задать значение text-align: right; и горизонтальное меню отобразится по правому краю.
Кстати вы можете так же воспользоваться , которые вы можете там воочию посмотреть и бесплатно скачать.
Как сделать вертикальное меню на CSS
Вертикальное меню на CSS делается и оформляется на странице практически так же как и горизонтальное, только здесь изменяется в .menu-2 li {... параметр со значением display: block; (указывает на блочный элемент), что придаёт ему вертикальное отображение пунктов меню.
И ещё одно дополнение к вертикальному меню: так как оно в большинстве случаев находится в боковой колонке сайта, которое имеет фиксированную ширину, то и мы вынуждены задать ширину width: 100%; нашему вертикальному меню, чтобы оно полностью занимало всю ширину колонки.
Давайте рассмотрим вертикальное меню CSS на примере:
Вот так вертикальное меню отобразится на странице:
Будьте внимательны!
Как сделать выпадающее меню на CSS
Сделать выпадающее меню с помощью CSS довольно просто. Мы всего лишь добавим к существующему коду от вертикального меню несколько параметров, которые и будут отвечать за выпадающий список пунктов меню.
Обязательно запомните!
Для того, чтобы выпадающее меню строго появлялось напротив ведущей ссылки, необходимо в CSS для тега li
, где находится эта ссылка, прописать position: relative;
, а для выпадающего меню position: absolute;
Давайте напишем html код для выпадающего меню на CSS.
Посмотрите, как будет выглядеть на странице выпадающее меню на CSS.
Точно таким же образом прописывается выпадающее меню и при горизонтальном расположение навигации. Единственное, это не забывайте менять значения у параметров top и left (отступ сверху и слева).
Посмотрите!
Как сделав всего 3 изменения
в CSS, наше вертикальное расположение навигации с выпадающим меню, превратиться в горизонтальное с выпадающим меню.
Изменения в CSS для выпадающего меню
- Заменить в .saitbar - width: 240px; на width: 100%;
- Заменить в .menu-4 li - display: block; на display:inline-block;
- Заменить в .menu-4 ul.podmenu - top: 0; на top: 34px;
- Заменить в .menu-4 ul.podmenu - left: 214px; на left: 7px;
Одна из самых сложно поддающихся адаптации частей веб-сайта это навигация. Эта часть очень важна для удобства использования веб-сайта, так как это один из путей, которым пользователи переходят со страницы на страницу.
Для создания адаптивной навигации по сайту существует множество путей, и несколько 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-тега списка
- , где в каждом пункте
- содержится одна ссылка . В HTML5 для навигации ввели отдельный тег