Навигационные панели с помощью CSS. CSS и HTML5: Респонсив навигационное меню Как сделать навигацию в css

Для того, чтобы было удобно перемещаться по сайту нужна навигация, которую я сделал использовав скрипты 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="#" нужно будет вставить необходимую ссылку;

— содержит нижнюю часть.

А вот такой, собственно, будет скрипт в нашей таблице стилей CSS:

Div#menu { width:144px; background:url(img/menu_1.jpg) top no-repeat; padding-top:40px; } div#menubody { background:url(img/menu_2.jpg) repeat-y; padding-left:15px; } div#menubottom { height:16px; background:url(img/menu_4.jpg) bottom no-repeat; } ul#menulist { width:100px; list-style-type:none; } ul#menulist li { height:32px; background:url(img/menu_3.gif) bottom repeat-x; } ul#menulist a { width:100px; height:25px; border-left:#75c5de 10px solid; font:bold 10px Verdana, Arial, sans-serif; color:#ffffff; text-decoration:none; padding:5px 0 0 5px; display:block !important; display:inline-block; } ul#menulist a:hover { background:url(img/menu_5.jpg) left repeat-y ; color:#000 } ul#menulist #active a { background: url(img/menu_5.jpg) left repeat-y; }

Думаю, что вам не стоит объяснять код CSS. Если что то не понятно вы можете всегда спросить.

Оба типа меню готовы. Заметьте что в них мы не использовали JavaScript, а это скорее «плюс» при индексации нашего сайта поисковиками, ну уж точно не «минус» т.к поисковики не индексируют JavaScript. Хотя на данный момент поисковик Google уже начинает его распознавать.

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

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

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью 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 для элементов

нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

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

#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; }

Мы предлагаем вам ознакомиться с новой техникой по созданию респонсив (адаптивного) меню без использования Javascript. Она использует чистые и семантические разметки HTML5. Меню может быть выровнено по левому краю, по центру или справа. Это меню переключается при наведении, что является более удобным для пользователей. У него также есть индикатор, который показывает “работающий/поточный” пункт меню. Он работает на всех мобильных и настольных браузерах, включая Internet Explorer!

Цель

Цель этого урока показать вам, как из обычного меню сделать выпадающее меню на маленьком дисплее.

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

Nav HTML разметка

Вот разметка для навигации. Тег необходим для создания выпадающего меню со свойством CSS абсолютной позиции. Мы объясним это в уроке позже. .current класс указывает на активные/текущие ссылки меню.

Portfolio
Illustration
Web Design
Print Media
Graphic Design

CSS для навигации (вид с рабочего стола) является довольно простым, так что мы не собираемся вдаваться в подробности. Обратите внимание, что мы указали display:inline-block вместо float:left в NAV элемента

. Это позволит кнопкам меню выстроиться по левому краю, по центру или вправо, указав text-align на

/* nav */ .nav { position: relative; margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 5px; }

Центр и выравнивание по правому краю

Как уже упоминалось выше, вы можете изменить выравнивание кнопок с помощью “text-align”.

/* right nav */ .nav.right ul { text-align: right; } /* center nav */ .nav.center ul { text-align: center; }

Поддержка Internet Explorer

HTML5 тег и медиа запросы не поддерживаются Internet Explorer 8 и старше версиями. Включите CSS3-mediaqueries.js (или respond.js) и html5shim.js, чтобы обеспечить резервную поддержку. Если вы не хотите добавлять html5shim.js, то тогда замените тег на тег.

Здесь начинается самое интересное - создание респонсивности меню с медиа запросами! На 600px мы установили nav элемент в относительное положение, чтобы возможно было поместить

указав display:none, но оставили.current
отображающийся в виде блока. Затем на NAV ховере, мы поставили все

на display:block (это даст результат выпадающего списка). Мы добавили графический значок на проверку.current элемента, чтобы указать, что этот элемент является активным. Для выравнивания меню по центру и справа, используйте левую и правую собственности позиционирования

@media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* hide all

items */ margin: 0; } .nav .current { display: block; /* show only current
item */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* on nav hover */ .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } /* right nav */ .nav.right ul { left: auto; right: 0; } /* center nav */ .nav.center ul { left: 50%; margin-left: -90px; } }
Высоких конверсий!

Позволяет изменять набор CSS классов у пункта меню.
Использование add_filter("nav_menu_css_class", "filter_function_name_8591", 10, 4); function filter_function_name_8591($classes, $item, $args, $depth){ // filter... return $classes; } $classes(массив)
Классы CSS, которые применяются к элементу

пункта меню. Пример:

Array( => menu-item => menu-item-type-post_type => menu-item-object-page => menu-item-265) $item(WP_Post)

Объект текущего пункта меню. Пример:

WP_Post Object ( => 265 => 1 => 2018-04-07 09:45:46 => 2018-04-07 06:45:46 => => Обратная связь => => publish => closed => closed => => 265 => => => 2018-04-19 00:20:29 => 2018-04-18 21:20:29 => => 0 => http://wp-test.ru/?p=265 => 1 => nav_menu_item => => 0 => raw => 265 => 0 => 214 => page => post_type => Страница => http://wp-test.ru/post-99 => Обратная связь => => => => Array ( => => menu-item => menu-item-type-post_type => menu-item-object-page) => => => =>) $args(stdClass)

Объект с аргументами из функции wp_nav_menu() . Пример:

StdClass Object ( => WP_Term Object ( => 21 => Моё первое меню => moe-pervoe-menu => 0 => 21 => nav_menu => => 0 => 3 => raw) => div => => => primary-menu => => 1 => wp_page_menu => => => => => => preserve => 0 => => primary) $depth(число) Уровень пункта меню. Добавлен в версии 4.1.0. Используется для отступов. Верхние пункты меню имеют $depth = 0, вложенные в них $depth = 1 и так далее.

Примеры #1 Добавим CSS класс только определенному пункту меню

Пусть нам нужно добавить к пункту меню "Обратная связь" (id=265) дополнительный CSS класс, причем только если этот пункт выводится в меню, прикреплённом к области меню primary , тогда:

Add_filter("nav_menu_css_class", "change_menu_item_css_classes", 10, 4); function change_menu_item_css_classes($classes, $item, $args, $depth) { if($item->ID === 265 && $args->theme_location === "primary"){ $classes = "special-css-class"; } return $classes; }

Получим в вёрстке:

#1 Удалим CSS классы у всех пунктов меню

Удалим все CSS классы у всех пунктов меню сайта.

Add_filter("nav_menu_css_class", "__return_empty_array");

Получим вёрстку:

Также, как и в первом примере, можно использовать условия. Удалим у всех пунктов меню CSS классы, а пунктам меню из области меню primary добавим свой css класс:

Add_filter("nav_menu_css_class", "change_menu_item_css_classes", 10, 4); function change_menu_item_css_classes($classes, $item, $args, $depth) { if ($args->theme_location === "primary") { $classes = [ "my-css" ]; } else { $classes = ; } return $classes; }

Получим вёрстку:

Заметки

C версии 4.1.0 был добавлен параметр $depth .

Список изменений

С версии 3.0.0	Введена.
С версии 4.1.0	The $depth parameter was added.

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

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

HTML Разметка

Всю структуру меню сформировал в виде неупорядочного списка, поместив его в блок div с определенным классом «menu-nav» , для привязки к .

Главная
Уроки
- HTML/CSS
- Photoshop
- Dreamweaver
- Flash
Видео
- Youtube
- Vimeo
- Rutube
Программы
- Система
- Безопасность
- Мультимедиа
- Интернет
Онлайн
- Сервисы
Wordpress
- Плагины
- Темы WP
О Сайте
Контакты

Как видно из примера кода, для создания выпадающих панелей, к некоторым пунктам меню добавил еще один небольшой кусок простого кода, формируещего неупорядоченный список:

Теперь, вы можете добавлять выпадающие списки к любому основному пункту меню. Если вы посмотрите на код ниже вы увидите, как к пункту меню (4), добавлен выпадающий список подпунктов:

< ul> < li> Пункт 1 < li> Пункт 2 < li> Пункт 3 < li> Пункт 4 < ul> < li> Подпункт 1 < li> Подпункт 2 < li> Подпункт 3 < li> Подпункт 4

Пункт 1
Пункт 2
Пункт 3
Пункт 4
- Подпункт 1
- Подпункт 2
- Подпункт 3
- Подпункт 4

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

CSS

Мы используем CSS, чтобы оформить внешний вид и придать функциональности нашему меню. Первое, что вам необходимо сделать, это создать файл CSS, обозвать и сохранить его в формате типа: style.css.

Примечание: Убедитесь, что для вызова CSS файла в голове вашего HTML документа, между тегами ..... , размещен следующий код:

< link rel= "stylesheet" type= "text/css" href= "style.css" />

Теперь, когда у вас есть файл style.css, мы можем начать добавлять стили, экспериментировать с параметрами и функциями. Для большей ясности добавил комментарии к некоторым параметрам кода CSS:

/*База*/ * {margin: 0; padding: 0;} body{ font-family:Helvetica,Arial, sans-serif; font-size:14px; background: #474747 url(bg.png); } #container { width:960px; /*Ширина контейнера*/ margin: 10px auto; } /*Меню*/ .menu-nav { position:relative; width: 100%; /*Ширина панели меню*/ height:50px; font-size:14px; color:#999; margin: 0 auto; margin-top: 20px; /*Цвет и градиент фона панели меню*/ background: #395593; background: -moz-linear-gradient(top, #647db5, #395593); background: -webkit-gradient(linear, left top, left bottom, from(#647db5), to(#395593)); background-image: -o-linear-gradient(top,rgb(100, 125, 181), rgb(57, 85, 147)); text-shadow: 0 -1px 0 #111; border: 1px solid #444; /*Закругленные углы панели меню*/ border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; } .menu-nav ul { list-style:none; color: #FFF; } .menu-nav ul li { float:left; position:relative; } .menu-nav ul li a { border-right:1px solid #364f87; border-left:1px solid #7189c0; padding:17px; display:block; text-decoration:none; text-align:center; color:#FFF; background: #395593; background: -moz-linear-gradient(top, #647db5, #395593); background: -webkit-gradient(linear, left top, left bottom, from(#647db5), to(#395593)); background-image: -o-linear-gradient(top,rgb(100, 125, 181), rgb(57, 85, 147)); text-shadow: 0 -1px 0 #111; } .menu-nav li.first a { border-radius: 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px; -khtml-border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; } /*Цвет и градиент фона при наведении*/ .menu-nav ul li a:hover { background: #647db5; background: -moz-linear-gradient(top, #395593, #647db5); background: -webkit-gradient(linear, left top, left bottom, from(#395593), to(#647db5)); background-image: -o-linear-gradient(top,rgb(57, 85, 147), rgb(100, 125, 181)); color:#fff; } .menu-nav ul li ul { display: none; } .menu-nav ul li:hover ul { display: block; position: absolute; min-width:200px; left:0; margin-top: -1px; } .menu-nav ul li:hover ul li a { display:block; color:#ffffff; width: 110px; text-align: center; border-bottom: 1px solid #283f74; border-top: 1px solid #366ea6; background: #364f87; } .menu-nav ul li ul li:first-child a { border-top:none; } .menu-nav ul li ul li:last-child a { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; } .menu-nav ul li:hover ul li a:hover { background:#395593; color:#ffffff; }

На этом собственно и все. После того как вы разместите код, приведенный выше в таблице стилей, меню с выпадающим списком будет полностью оформлено и готово к работе. Используя чистый cтиль CSS3, нестоит забывать, что не все браузеры одинаково хорошо поддерживают новые стандарты. Например, в старых версиях IE, данное меню будет выгладеть несколько иначе, хотя и для этого «тормоза прогресса» есть свои костыли))).

С Уважением, Андрей