Навигационное меню css. CSS и HTML5: Респонсив навигационное меню
Меню навигации достаточно простой элемент дизайна. Создаем неупорядоченный список, задаем его стиль смещения влево и формируем внешний вид. Но адаптивный дизайн, который набирает популярность, выдвигает новые требования к меню.
В данном уроке мы создадим простое, но эффективное адаптивное меню, которое очень легко настроить для использования в любом проекте.
Добавляем список
Добавим простой неупорядоченный список с восемью ссылками. Демонстрация урока очень чувствительна к количеству пунктов меню, а именно, все настройки сделаны для восьми пунктов.
- RUSELLER
- О нас
- Клиенты
- Работы
- Аудио
- Скачать
- Блог
- Контакт
Чтобы сделать меню более интересным и полезным, добавим строчку текста под основной подписью меню. Существует множество способ решения такой простой задачи. В нашем уроке мы просто вставляем разрыв строки и и добавляем элемент small для второй строчки. Таким образом мы можем стилизовать подпись без использования дополнительных элементов div , классов и идентификаторов.
- RUSELLER
Главная - О нас
Наша команда - Клиенты
Наши друзья - Работы
Наш труд - Аудио
Услыште нас - Скачать
Полезное - Блог
Прочитайте о нас - Контакт
Напишите нам
Вот так будет выглядеть наше меню после проделанных операций:
Код CSS начнем с использования универсального селектора для сброса полей и отступов, а также назначим свойство box-sizing: border-box всем элементам страницы. Такой шаг поможет нам просто устанавливать размеры элементов в процентах, даже при использовании рамок.
* { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Прежде, чем приступить к определению стилей элементов, зададим набор свойств для родительского элемента. Для начала установим для него ширину 90%. Теперь наш контейнер будет растягиваться на все доступное пространство, но останется место для формирования свободной зоны в дизайне. Также установим контейнер по центру с помощью автоматического определения размеров полей.
Кроме того, установим стили для неупорядоченного списка, чтобы отказаться от использования меток.
Теперь приступим к определению стилей пунктов меню.
Nav li a { display: block; float: left; width: 12.5%; padding: 10px; background: #444; border-right: 1px solid #fff; color: #fff; font: 700 13px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; text-align: center; text-decoration: none; text-transform: uppercase; } /*МЕЛКИЙ ТЕКСТ*/ nav small { color: #aaa; font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif; text-transform: none; }
Сначала определяем форму для каждого пункта списка. Все ссылки делаем блочными элементами, смещаем их влево, задаем ширину и небольшой отступ. Получаем достаточно большой прямоугольник Ширина 12.5% получается как результат вычислений 100% / 8 (количество пунктов меню).
Затем определяем внешний вид. Устанавливаем фон и рамку.
Завершает все задание стилей для текста меню. Используется шрифт PT Serif, который можно найти на сайте Google Web Fonts .
Для подписей устанавливаем цвет, удаляем трансформацию в верхний регистр и используем шрифт Helvetica.
Изменения при наведении курсора мыши на пункт менюПри наведении курсора мыши на пункт меню, то становится более черным. Для создания дополнительного эффекта используется трансформация.
Nav li a { background: #444; border-right: 1px solid #fff; color: #fff; display: block; float: left; font: 700 13px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; padding: 10px; text-align: center; text-decoration: none; text-transform: uppercase; width: 12.5%; /*ТРАНСФОРМАЦИИ*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease; } /*АКТИВНОЕ СОСТОЯНИЕ*/ nav li a:hover { background: #222; }
Теперь займемся небольшим визуальным дефектом рамки нашего меню. Каждый пункт имеет белую рамку, которая служит разделителем. Значит последний пункт не нуждается в рамке. Воспользуемся специальным псевдо-классом.
/*РАМКА ПОСЛЕДНЕГО ПУНКТА*/ nav li:last-child a { border: none; }
На рисунке ниже представлено меню на специальном сером фоне, где видно разницу между вариантами.
Данный проект является хорошим примером между резиновым и адаптивным дизайнами. Наше меню пока имеет резиновый дизайн (ширина определена в процентах), но не адаптивный. Если начать уменьшать ширину экрана, то меню превратиться в ужасную конструкцию:
Для исправления ситуации воспользуемся медиа запросами. Самый лучший способ нахождения точки приложения медиа запроса - провести тестирование.
1220pxПервые проблемы появляются при ширине около значения 1200 px. Длинный текст некоторых пунктов начинает ломаться, так как ему не хватает ширины.
Для исправления ситуации нужно изменить только размер шрифта:
@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px){ nav li a { font: 700 10px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; } nav small { font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif; } }
930pxСледующая точка, проявляющаяся при уменьшении размеров экрана - 930px. Здесь меню ломается сильнее.
Кроме исправления размера шрифта требуется перестроить меню в две строки.
@media only screen and (max-width: 930px), only screen and (max-device-width: 930px){ nav li a { width: 25%; border-bottom: 1px solid #fff; font: 700 11px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; } nav li:last-child a, nav li:nth-child(4) a { border-right: none; } nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a { border-bottom: none; } }
580px и 320pxДвухстрочный формат работает отлично до значений ширины экрана меньше 600px, а затем также коверкается.
Здесь мы перестраиваем дизайн меню в две колонки с четырьмя строками. А для размеров экрана меньше 320px нужно также уменьшить размер шрифта.
@media only screen and (max-width: 580px), only screen and (max-device-width: 580px){ nav li a { width: 50%; font: 700 12px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; padding-top: 12px; padding-bottom: 12px; } nav li:nth-child(even) a { border-right: none; } nav li:nth-child(5) a, nav li:nth-child(6) a { border-bottom: 1px solid #fff; } } @media only screen and (max-width: 320px), only screen and (max-device-width: 320px){ nav li a { font: 700 11px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; } }
Теперь наше меню будет адаптироваться под размер экрана.
Построение адаптированного дизайна достаточно трудоемкий процесс. Много времни уходит на тщательное тестирование и подбор значений.
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью 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 для элементов
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#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; }
Canvi навигационная панель (off-canvas) с несколькими параметрами для настройки. Можно использовать сразу несколько панелей на одной странице, устанавливать адаптивную ширину и использовать свои стили для панели.
19.02.2018 5 076
Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.
21.12.2017 10 109
Легкий адаптивный плагин многоуровневого меню. Меню больше подходит для отображений на мобильных устройствах.
11.09.2016 3 441
Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню - "три точки". Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
19.04.2016 6 016
Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.
24.12.2015 4 385
Mega dropdown меню - jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.
25.06.2014 3 702
Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.
23.01.2014 2 532
Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~.
03.01.2014 2 814
Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.
03.07.2013 9 399
Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам - font-awesome.css
27.06.2013 2 784
Плагин адаптивной навигации без зависимостей от каких-либо библиотек и с быстрой поддержкой touch устройств.
4 482
В этой статье я расскажу, как создать меню навигации WordPress. Используя простой инструмент drag & drop вы сделаете красивое выпадающее меню на вашем сайте.
Меню навигации WordPressЗачем нужно меню? Оно позволяет представить структуру вашего сайта пользователям — помогает им просматривать разделы и быстро находить нужную информацию.
Меню может располагаться вверху/внизу и справа/слева на странице сайта.
Почти все темы WordPress содержат хотя бы один тип расположения меню.
Создание меню WordPressВы можете добавить меню из панели администратора WordPress — Внешний вид — Меню.
На экране появится новое окно «Создать меню», состоящее из двух областей. В левой области находятся ваши страницы, произвольные ссылки и рубрики. А в правой – настраиваемые пункты меню.
Давайте создадим ваше первое меню.
Укажите имя для вашего меню, например. «Мое первое меню», а затем нажмите кнопку «Создать меню».
Перед вами появятся настройки меню:
Как вы можете заметить, тема сайта Azbuka WordPress предлагает 3 варианта расположения меню: main, secondary, footer.
Названия и местоположения меню зависит от выбранной темы и могут отличаться.
Затем выберите страницы, которые вы хотите добавить — отметьте страницы, перечисленные в левой области, и нажмите «Добавить в меню».
Затем выберите местоположение вашего меню и сохраните.
Можете попробовать разное расположение, чтобы посмотреть, как оно будет выглядеть готовым.
Вы заметили, что каждый добавленный пункт меню стоит в том порядке, в котором вы его добавили. Например, страница «Обо мне» отображается в конце, а «Товары» — в начале.
Не беспокойтесь, пункты меню можно перетаскивать мышкой и выстраивать в нужном вам порядке.
Так вы можете создавать необходимое количество меню для разных областей сайта.
Создание выпадающего меню навигации WordPressВыпадающее меню является навигационным меню. С родительскими и дочерними элементами.
Когда пользователь наводит мышку на родительский элемент меню, то все остальные, дочерние, элементы плавно появляются один за другим под родительским.
С помощью выпадающего меню вы можете создать правильно структурированную навигационную систему.
Теперь добавим пункт подменю для вашего нового меню.
В структуре перетащите элемент чуть ниже родительского элемента, затем слегка перетащите элемент вправо. Вы заметите, что он автоматически станет элементом подменю.
Так вы можете создать несколько уровней подменю. Но, к сожалению, не все темы поддерживают создание таких многоуровневых меню — большинство дают возможность сделать только 2 уровня.
Для создания выпадающего меню в блоге используются рубрики. И добавляются по такому же принципу, что и страницы. Разверните вкладку «Рубрики», выберите нужные и добавьте в меню.
Вы заметите, что рубрики будут отображаться в виде пунктов меню. Как и в случае со страницами, вы можете перетаскивать рубрики мышкой, чтобы выставить их в нужном порядке.
На примере ниже я сделала так, что все рубрики стали дочерними элементами страницы с блогом.
Когда вы добавляете страницы или рубрику, WordPress автоматически использует название страницы или название рубрики в качестве текста ссылки.
Это не означает, что вы не можете его изменить.
Разверните элемент и отредактируйте так, как вам нужно.
Здесь можно изменить заголовок, текст ссылки и добавить атрибут title к ссылке. Сохраните меню, чтобы не потерять все изменения.
Удаление из менюТакже разверните элемент меню и внизу вы увидите красный текст «Удалить».
Каждая тема предлагает свои виды расположения навигационного меню.
В теме этого сайта, что я показывала в примерах, есть 3 вида расположения меню. В вашей теме их может больше или меньше. И называться они, конечно, могут по-разному.
Помимо стандартных областей вы можете добавлять меню в сайдбар и другие области с виджетами.
В админке выберите пункт «Внешний вид» — «Виджеты» и добавьте виджет «Произвольное меню» в сайдбар.
Затем вам нужно озаглавить виджет и выбрать одно из своих настроенных меню из списка. Нажмите кнопку сохранения.
Теперь перейдите на сайт и проверьте, как отображается меню в сайдбаре.
Что касается социальных кнопок в меню, некоторые темы предлагают встроенные кнопки социальных сетей.
Если их нет в вашей теме, вы можете установить плагин, например, Menu Social Icons , чтобы добавить кнопки самостоятельно.
Вам может быть интересно:
Если у вас есть вопросы — пишите в комментариях.
И подписывайтесь на нас в
В своей работе, немало времени уделял разработке различных видов навигации для сайтов, как с применением , так и используя чистый стиль 3 без дополнительных изображений и подключаемых javascript. Решил все наработки по теме собрать воедино и выложить в качестве своеобразной подборки уроков по созданию меню навигации. В обзоре представлены разные типы меню, по стилю исполнения и функционалу, многоуровневые с выпадающими подменю, меню в популярном стиле «аккордеон», вертикальные и горизонтальные с динамическими эффектами, простые и сложные по своей структуре.
Отталкиваясь от этих уроков, исходя из приведенных примеров, экспериментируя и применив немного фантазии, вы с легкостью сможете сделать свой сайт выделяющимся из общей массы, эффектным и запоминающимся.
✓ Нажав на заголовок, вы попадете непосредственно на страницу с детальным описанием всего процесса, а жмякнув по картинке, перейдете на страницу с примером работы выбранного вами меню ツ
1.
При создании этого замечательного меню использовались чистые стили и функции CSS3, без каких либо дополнительных файлов изображений и javascript. С поддержкой современными браузерами новых стандартов CSS3, стало возможным использовать в разработке дизайна сайтов, все волшебные свойства магии CSS3. Применяя на практике данную технику создания меню, можно добиться потрясающих результатов.
2.Из этого урока, вы узнаете, как с помощью стилей и новых свойств CSS3, не используя javascript и изображения, можно заделать отличное, функциональное и быстро работающее меню в стиле «аккордеон».
3.Подробный мануал по созданию красивого меню в стиле «аккордеон» с помощью CSS и библиотеки jQuery. Меню тестировалось и замечательно работает во всех современных браузерах. Использование функции линейного градиента css3 в оформлении, делает это меню более выразительным и динамичным.
4.В уроке представлен весь процесс изготовления интересного, вертикального меню для сайта, построенного полностью на использовании CSS и небольшого файла изображения, которое при желании Вы с легкостью сможете отредактировать под свои нужды.
5.В продолжение предыдущего урока, добавлено подробное описание варианта создания вертикального меню с вложенными подпунктами
6.Небольшой, но в тоже время подробнейший урок, по созданию качественного, с небольшим количеством HTML, CSS и JavaScript кода, с красивым интерфейсом, блока навигации в стиле «Аккордеон».
7.Еще одно интересное решение в плане создания многоуровневого меню навигации с использованием jQuery. Кросс-браузерность конечного продукта, JQuery анимация и градиент CSS3 делает навигационный блок еще более привлекательным.
8.Мне нравится решение, когда меню ведет себя как раскрывающиеся списки. Мастеровой люд часто использует JavaScript, чтобы добиться этого эффекта, в уроке же расписано, как достигнуть желаемого, применяя только чистые стили и функции CSS.
Перевод и адаптированная версия урока по созданию красивого, горизонтального меню в стиле "Lava-Lamp. В интернете представлено много версий меню выполненных в этом стиле, опираясь на полученные знания из урока, вы свободно сможете создать что нибудь свое индивидуальное.
На этом пока все. В этой подборке представлена лишь малая часть того, что можно сделать в плане создания красивых и индивидуальных, а главное функциональных меню навигации для ваших проектов. Надеюсь кто то найдет для себя подходящий вариан и использует его в своей работе по благоустройству сайта. Если кому понравилась статья, комментируйте, делитесь с друзьями через Твиттер, Google+ и другие соц. сервисы, а можно просто добавить статью в закладки
