В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child.
Исходный код
Демо
Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:
Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:
После применения стилей у нас должно получиться нечто вроде этого:
Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:
Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента <li>, который отвечает за пункт меню WordPress. Обратите внимание на то, что мы добавили <ul> после анкорного тега (<a>).
Теперь добавим CSS-стили, чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:
Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню «WordPress» должны увидеть выпадающий список с тремя другими пунктами («Themes», «Plugins», «Tutorials»):
Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый <ul> между тегами <li></li>.
Взгляните на приведенный ниже HTML-код, в котором мы добавляем второй уровень выпадающего списка к пункту меню «Tutorial», который находится внутри пункта «WordPress»:
Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода:
Если все сделано правильно, у вас должно получиться нечто вроде этого:
Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.
Добавляем индикатор выпадающего списка
Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+»):
Для этого мы используем псевдоэлемент CSS3 (:only-child). В данном случае он проверяет, имеются ли в тегах <li> родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?
Значит, вы все сделали правильно.
В завершение
Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.
А как вы сделали меню на HTML? Пожалуйста, расскажите об этом в комментариях.
Перевод статьи “How to Create a Pure CSS Dropdown Menu” был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
| Это простое меню с несколькими уровнями, которое полностью создано на чистом CSS, где подойдет под многие тематические сайты. Идея состоит в том, чтобы оживить каждый пункт меню после изменения уровня. Анимация начинается с щелчка элемента и задержки распространяются через категорию, что можно присвоить каждому запросу. Простая и понятная анимация следуют той же логике для входящих элементов нового уровня многоуровневой навигаций
В качестве дополнительных элементов у нас есть навигационная панель и запросы, виде кнопок, что стильно вписаны под палитру цвета. Более глубокие уровни ссылаются на атрибут данных, где можно добавить медиа запросов для мобильной версии меню с переключением меню, что по умолчанию не вписаны, где сам веб мастер уже после установки может настроить на мобильные гаджеты, чтоб с них также корректно смотрелось и можно было работать с навигацией. Если немного изменить, то должно получиться примерно следующее, что уже прописано в стилях: Анимированные меню дает разработчикам хорошее сочетание традиционного стиля и макета, а также быстрые и отзывчивые эффекты анимации, чтобы сделать навигацию более увлекательной для пользователей. В дизайне анимированные ленты выпадают за каждой вкладкой меню при наведении мыши. Дополнительные вкладки и подменю полностью соответствуют дизайнерам. После того, как мы применили CSS, у нас должно получиться что-то вроде этого:
Чтобы добавить многоуровневые выпадающие списки, мы повторим тот же процесс. Мы выбираем пункт меню, в который хотим добавить новое раскрывающееся меню, и добавим новый ul между li этого пункта меню. В этом пособии по навигации, вы узнаете о шагах по созданию чистого выпадающего меню, что создано при помощи стилистике CSS. В основном мы будем использовать свойства CSS2, где будет дополнительный небольшой трюк. И если все сделано правильно, когда мы наводим верх над пунктом меню, то должны увидеть раскрывающийся список с тремя другими добавленными нами элементами. Как ранее говорили в этом материале, здесь используем псевдоэлемент CSS3, где :only-child в нашем случае это проверяет, есть ли у родительского элемента какие-либо другие элементы внутри других тегов li, если нет, то он удаляет плюс +, который добавляется по умолчанию. И вот как должен выглядеть конечный результат: Приступаем к установке: HTML Чтобы добавить раскрывающийся список к одному элементу, здесь прописываем ul внутри li, где мы хотим вывести его. Как вы можете видеть в приведенном коде, где был добавлен неупорядоченные списки с несколькими элементами списка во втором li, что в этом случае является элементом меню. Здесь обязательно нужно обратить внимание на добавление ul, что прописан после тега привязки. Осталось прописать стиль CSS, где все элементы по умолчанию все скрыты, где их появление будет, как только тогда, когда у нас есть над родительским элементом. Поэтому добавьте следующее после вышеуказанного CSS: Вы можете еще раз анонсировать этот процесс столько раз, сколько хотите, чтобы добавить дополнительные привязки, что идет на выпадающее элементы списков. Кроме того, вам не нужно добавлять его крайнему элементу в раскрывающемся списке. Многие используют jQuery для достижения этого эффекта раскрывающееся списка, где аналогично используются совершенно другие методы CSS стилей. Вы предпочитаете создавать свои выпадающие списки, что помощью CSS или jQuery. Позвольте мне знать в комментариях ниже. Демонстрация |
zornet.ru
sitear.ru
Двухуровневое выпадающее горизонтальное меню
Самое простое выпадающее горизонтальное меню, состоящее из двух уровней — основное меню с тремя пунктами, каждый из которых содержит еще по одному подменю.
Пример HTML и CSS: двухуровневое выпадающее горизонтальное меню
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Создание двухуровневого горизонтального выпадающего меню</title> <!--[if IE 6]> <script type="text/javascript"> function ie6hover() { if(!document.getElementById("menu")) return true; var elem_li = document.getElementById("menu").getElementsByTagName("LI"); for (var i=0; i<elem_li.length; i++) { elem_li[i].onmouseover=function() { this.className+=" ie6"; } elem_li[i].onmouseout=function() { this.className=this.className.replace(" ie6", ""); } } } window.onload=ie6hover; </script> <![endif]--> <style type="text/css"> ul, li { list-style: none; /* убираем маркеры списков */ margin: 0; /* обнуляем внешние поля */ padding: 0; /* обнуляем.
текста ссылок */ text-decoration: none; /* убираем подчеркивание */ white-space: nowrap; /* запрещаем перевод строк */ padding: 5px 10px; /* внутренние отступы */ } #menu ul a { min-width: 150px; /* минимальная ширина подпунктов */ width: auto !important; /* для поддержки IE6 */ width: 150px; /* для IE6 */ } #menu ul { position: absolute; /* абсолютное позиционирование внутренних списков */ display: none; /* скрываем внутренние списки */ } #menu li:hover ul, #menu li.ie6 ul { display: block; /* делаем внутренние списки блочными при наведении мыши на внешние элементы LI */ } #menu li:hover ul a, #menu li.ie6 ul a { color: #fff; /* цвет текста внутренних ссылок */ background: #c00; /* цвет фона */ } #menu li:hover a, #menu li ul a:hover, #menu li.ie6 a { color: #c00; /* цвет текста внешних ссылок при наведении курсора на LI, а также внутренних ссылок при наведении курсора на них самих */ background: #cff; /* фон */ } </style> </head> <body> .
> <li><a href="#">Пункт 3</a> <ul> <li><a href="#">Подпункт 1</a></li> <li><a href="#">Подпункт 2</a></li> </ul> </li> </ul> </body> </html>
Результат примера
Описание примера
- Сначала подготовим HTML-код для нашего выпадающего горизонтального меню. Для этого создадим маркированный список (теги <UL>, <LI>), в каждый элемент которого поместим по одной ссылке (тег <A>). Эти ссылки у нас будут играть роль основных пунктов меню. Также внутрь каждого элемента списка мы поместим еще по одному отдельному маркированному списку и тоже со ссылками, которые будут играть роль подпунктов.
- Применяем к элементам списка свойство CSS float:left, чтобы благодаря всплытию основные пункты меню расположились по горизонтали. Однако после этой операции в горизонтальном порядке выстроились и элементы внутренних списков, которые содержат ссылки-подпункты, а это нам не надо, поэтому у них мы отменяем всплытие (none).
- Превращаем все ссылки в блоки с помощью свойства CSS display:block, чтобы у них можно было изменять ширину и высоту. А чтобы все ссылки-подпункты были одинаковой ширины, как раз и указываем для них определенную минимальную ширину (CSS min-width).
- Чтобы текст в пунктах меню всегда располагался на одной строке, добавляем ссылкам свойство CSS white-space:nowrap, которое запрещает перевод строки.
- Меню почти готово, но есть одно НО. Увеличиваясь в ширину, внутренние подпункты меню расширяют и все элементы, в которых они находятся, в том числе и самые внешние <LI>. Из-за этого расстояние между основными тремя пунктами тоже увеличивается, что нам совсем не нужно. Поэтому применяем к внутренним тегам <UL> абсолютное позиционирование (CSS position), чтобы вырвать их и все их содержимое из основного потока, благодаря чему оно перестанет каким-либо образом влиять на другие элементы.
- В результате действий предыдущих этапов мы уже получили необходимое нам меню, вот только все его подпункты одновременно видны на странице, а нам надо, чтобы они появлялись только при наведении курсора мыши. Поэтому делаем следующее. Используя display:none скрываем все внутренние списки со ссылками и делаем их видимыми (значение block) только тогда, когда курсор мыши наводится на один из внешних элементов меню. Для этого применяем псевдокласс CSS :hover. Все, вот теперь меню готово, осталось добавить декоративные вещи вроде цвета ссылок и фона.
Как обычно, старичок IE6 не все знает, поэтому приходится ему кое-что объяснять.
- IE6 не понимает min-width, но зато действует со свойством CSS width так, будто это и есть минимальная ширина. Поэтому здесь мы применили специальный хак с !important, чтобы заставить делать IE6 то, что нам надо.
- IE6 понимает используемый в данном примере псевдокласс, только когда его применяют к ссылкам, поэтому задействуем здесь специальный JavaScript, чтобы эмулировать псевдоклассы для этого браузера. Этот скрипт динамически добавляет каждому тегу <LI> атрибут class="ie6", когда на них наводится курсор мыши, а когда курсор убирается — класс так же динамически удаляется. Вот и все, осталось прописать для этого класса такие же стили, как и для псевдокласса и закрыть JavaScript-код в условные комментарии, чтобы его понял только IE6.
Трехуровневое выпадающее горизонтальное меню
Немного усложним предыдущий пример и сделаем выпадающее горизонтальное меню состоящее из трех уровней.
Пример HTML и CSS: трехуровневое выпадающее горизонтальное меню
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Создание трехуровневого горизонтального выпадающего меню</title> <!--[if IE 6]> <script type="text/javascript"> function ie6hover() { if(!document.getElementById("menu")) return true; var elem_li = document.getElementById("menu").getElementsByTagName("LI"); for (var i=0; i<elem_li.length; i++) { elem_li[i].onmouseover=function() { this.className+=" ie6"; } elem_li[i].onmouseout=function() { this.className=this.className.replace(" ie6", ""); } } } window.onload=ie6hover; </script> <![endif]--> <style type="text/css"> ul, li { list-style: none; margin: 0; padding: 0; } #menu { height: 35px; background: #333; font: bold 14px/25px Arial, sans-serif; } #menu li { float: left; position: relative; } html > body #menu ul li { float: none; /* отменяем всплытие (для всех браузеров кроме IE6) */ } * html #menu ul li { clear: both; /* для IE6 прерываем обтекание */ } #menu a { display: block; color: #f30; text-decoration: none; white-space: nowrap; padding: 5px 3px 5px 5px; } #menu ul a { min-width: 150px; width: auto !important; width: 150px; } #menu ul { position: absolute; /* абсолютное позиционирование всех тегов UL внутри меню */ display: none; background: #333; border: 1px #f30 solid; } #menu li.drop { background: url('images/drop.png') 100% 13px no-repeat; /* для LI с class="drop" добавляем фон-стрелочку */ padding-right: 15px; /* правый отступ */ } #menu li:hover, #menu li.ie6 { background-color: #fc9; /* цвет фона при наведении на элементы меню */ } #menu li:hover ul li ul, #menu li.ie6 ul li ul { top: -1px; /* смещение самого внутреннего списка на 1px вверх */ left: 100%; /* и смещение его за правую границу родителя */ display: none; /* скрытие списка */ } #menu li:hover ul, #menu li:hover ul li:hover ul, #menu li.ie6 ul, #menu li.ie6 ul li.ie6 ul { display: block; /* делаем внутренние списки блочными (видимыми) при наведении мыши */ } </style> </head> <body> <ul id="menu"> <li class="drop"><a href="#">Пункт 1</a> <ul> <li class="drop"><a href="#">Подпункт 1</a> <ul> <li><a href="#">Подпункт 1-1</a></li> <li><a href="#">Подпункт 1-2</a></li> </ul> </li> <li class="drop"><a href="#">Подпункт 2</a> <ul> <li><a href="#">Подпункт 2-1</a></li> <li><a href="#">Подпункт 2-2</a></li> </ul> </li> </ul> </li> <li class="drop"><a href="#">Пункт 2</a> <ul> <li><a href="#">Подпункт 1</a></li> <li><a href="#">Подпункт 2</a></li> </ul> </li> <li><a href="#">Пункт 3</a></li> </ul> </body> </html>Результат примера
seodon.ru
1. Горизонтальное выпадающее меню на CSS3
Источник | Пример
Первый туториал CSS3 Dropdown Menu — самый новый в подборке (за апрель 2016). Плюсы решения: в данном горизонтальном выпадающем меню для сайта в подпунктах есть иконки, реализация и сам CSS код достаточно простые для понимания и внедрения.
Шаг1 — HTML разметка
Первым делом создаем неупорядоченный список в HTML с якорными ссылками (#) для его элементов. Туда же в один из пунктов добавляем еще один вложенный список, который будет отвечать за подменю.
Шаг2 — отображение меню
Удаляем лишние отступы в CSS для элементов горизонтального выпадающего меню сайта. На этом же этапе установим фиксированную ширину и высоту пунктов меню, а также добавим закругленные углы.
Шаг3 — оформление ссылок
Кроме базовых фишек в стилях (шрифт, цвет, высота) используем опцию тени text-shadow и создаем плавный переход цвета текста при наведении. Также добавляем в меню разделители, убирая границу у первого элемента слева и у последнего справа.
Шаг4 — подменю
Поскольку у нас меню сайта на CSS выпадающее, то следует задать также оформление вложенному списку. Вначале ставим отступ 40px сверху и 0px слева + добавлем округленные углы. Для показа/скрытия подменю изначально устанавливаем свойство прозрачности (opacity) равное нулю, а при наведении — единице. Для создания эффекта появления подменю указываем значение высоты списка в ноль, а при hover = 36px.
Ширину ссылок ставим = 100px, внизу всех элементов кроме последнего добавляется граница border-bottom. Также, по желанию, вы можете разместить картинки для пунктов подменю (внимание! не забудьте изменить пути к изображениям в коде на используемые вами).
Мне лично нравится простота реализации и использование иконок. Вот итоговый код с codepen:
2. Простое выпадающее CSS3 меню
Источник
Вариант от Josh Riser визуально похож на предыдущее выпадающее меню на HTML и CSS. В коде нет дочернего селектора " > " (полезен в многоуровневых конструкциях), но автор удачно использует эффекты CSS3 (transition, box-shadow и text-shadow) для более красивого результата. По ссылке в источнике отсутствует описание процесса создания горизонтального выпадающего меню, поэтому я сразу приведу итоговый код:
3. Выпадающее меню с блоком поиска
Источник | Пример
В данном примере мы рассмотрим как сделать выпадающее меню на CSS, в котором кроме пунктов будет находится блок поиска. Подобную реализацию часто можно встретить в современных шаблонах сайтов. По времени внедрения и сложности решение является чуть сложнее предыдущих. Оно опубликовано в мае 2013, поэтому, возможно, некоторые вещи вам придется подправить, хотя при нашем тестировании все отлично работало.
HTML код
Для навигации, как всегда, используется неупорядоченный список (с классом nav). Обычные пункты меню являются элементами списка (li) и содержат ссылки (a href) без каких-либо классов и ID. Исключением являются 3 специализированных элемента данного горизонтального выпадающего меню с такими ID:
- settings — ссылка картинка;
- search — блок с поиском и соответствующей кнопкой;
- options — содержит подменю (реализовано через список с классом subnav).
Также в коде увидите скрипт prefixfree для использования свойств CSS без префиксов. Итоговый вариант HTML для выпадающего меню имеет вид:
CSS для меню
1. Базовые стили и элементы меню
Во-первых, указываем шрифт Montserrat, темный серый фон и фиксированную высоту для пунктов меню. Все элементы имеют выравнивание float: left и позиционирование relative дабы потом можно было добавить подменю с position: absolute;
2. Оформление ссылок
Для пунктов меню применяется базовое оформление + css hover эффект при наведении. Высота такая же как и в классе nav. Для #settings ссылки-картинки в начале меню задается выравнивание.
3. Блок поиска
Данный элемент имеет фиксированную ширину и состоит из нескольких частей — поля ввода (#search_text) с зеленым фоном и кнопки поиска (#search_button). В некоторых браузерах цвет фона может быть серым.
4. Выпадающее подменю
Финальный штрих позволит нам как сделать выпадающее меню на CSS, которое срабатывает для последнего пункта #options.
В стилях найдете вставку фонового изображения треугольника (triangle.png) для обозначения подменю — не забудьте указать правильный путь для этой и других картинок в примере. Появлением подменю реализуется с помощью свойства opacity. Итоговое решение на codepen:
4. Многоуровневое выпадающее CSS меню
Источник
В данном варианте в основном используются приемы CSS2.1, решение плюс-минус новое — за март 2015. Если вам не хватает одного подуровня в горизонтальном выпадающем меню для сайта, то этот пример содержит сразу три. С помощью псевдокласса :only-child для пунктов добавляется символ «+» обозначающих наличие подменю.
В целом, неплохой и несложный пример. Не будем детально описывать процесс реализации, т.к. он похож на предыдущие — сначала создаете HTML каркас, а потом постепенно добавляете для него стили. Итоговый код скачивайте по ссылке на источник, частично его можно глянуть в Codepen:
Итого
Выше мы рассмотрели 4 варианта как сделать выпадающее меню на CSS + HTML для шапки сайта (header), хотя подобных примеров в сети гораздо больше. Есть решения с jQuery, но это, скорее всего, пригодится только для реализации каких-то специальных эффектов и нестандартных задач. В большинстве случаев хватит связки CSS + HTML, тем более, что сейчас главные требования к меню — это удобство и быстрая скорость загрузки.
Напоследок два замечания по кодам выше. В некоторых примерах для выпадающего меню в CSS используются изображения, поэтому вам придется внимательно просмотреть пути к картинкам и указать правильные значения для своего сайта. Во-вторых, часть решений 2х-3х летней давности, поэтому следует еще раз дополнительно проверять их работоспособность в разных браузерах.
Если знаете еще какие-то интересные современные реализации горизонтальных выпадающих меню для сайта, присылайте ссылки в комментариях.
design-mania.ru
Как сделать горизонтальное выпадающее меню
- Содержание:
- 1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
- 2. 3D выпадающее меню
- 3. Разворачивающееся выпадающее меню с логотипом
- 4. Увеличивающееся выпадающее меню
- 5. Подъезжающее выпадающее меню
1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка <li> добавляется вложенный список <ul> или <оl>.
Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
— для элемента списка, в который вложен выпадающий список: li {position: relative;};
— для выпадающего меню ul {position: absolute;}, а также значения left и top.
Для наглядности и удобства форматирования добавим основному меню класс topmenu, выпадающему — submenu.
Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.
See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.
Способ 1. {display: none;}
Выпадающее меню скрывается с помощью .submenu {display: none;}, при наведении показывается с помощью .topmenu li:hover .submenu {display: block;}.
Способ 2. {visibility: hidden;}
Меню скрывается с помощью .submenu {visibility: hidden;}, показывается — .topmenu li:hover .submenu {visibility: visible;}.
Способ 3. {opacity: 0;}
Меню скрывается с помощью .submenu {opacity: 0;}, показывается — .topmenu li:hover .submenu {opacity: 1;}. Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden;, а при наведении меняем на visibility: visible;.
Способ 4. {transform: scaleY(0);}
Меню скрывается с помощью .submenu {transform: scaleY(0);}, показывается — .topmenu li:hover .submenu {transform: scaleY(1);}. Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для .submenu {transform-origin: 0 0;}, т.е. из верхнего левого угла.
Способ 5. С помощью jQuery
$(".five li ul").hide(); // скрываем выпадающее меню $(".five li:has('.submenu')").hover( function(){ $(".five li ul").stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом .submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */ );
2. 3D выпадающее меню
Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.
See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.
<nav> <ul class="topmenu"> <li><a href="">Home</a></li> <li><a href="">Shop</a></li> <li><a href="" class="down">Blog</a> <ul class="submenu"> <li><a href="">Category</a></li> <li><a href="">Author</a></li> <li><a href="">Archive</a></li> <li><a href="">Tags</a></li> </ul> </li> <li><a href="" class="down">Portfolio</a> <ul class="submenu"> <li><a href="">Category</a></li> <li><a href="">Author</a></li> <li><a href="">Archive</a></li> <li><a href="">Tags</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </nav>
* { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; } .topmenu { backface-visibility: hidden; background: rgba(255,255,255,.8); } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { font-family: 'Exo 2', sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; } .down:after { content: "f107"; margin-left: 8px; font-family: FontAwesome; } .topmenu li a:hover { color: #E6855F; } .submenu { background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; } .topmenu > li:hover .submenu{ visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); } .submenu li a { color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: 'Kurale', serif; }
3. Разворачивающееся выпадающее меню с логотипом
В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.
See the Pen vXBBaa by Elena (@html5book) on CodePen.
<header> <a href="" class="logo">Лого</a> <nav> <ul class="topmenu"> <li><a href="">Главная</a></li> <li><a href="" class="submenu-link">О нас</a> <ul class="submenu"> <li><a href="">Производство</a></li> <li><a href="">Магазин</a></li> <li><a href="">Сервис</a></li> </ul> </li> <li><a href="">Проекты</a></li> <li><a href="">Контакты</a></li> </ul> </nav> </header>
* { box-sizing: border-box; } body { margin: 0; background: #f2f2f2; } header { background: white; text-align: center; } header a { text-decoration: none; outline: none; display: block; transition: .3s ease-in-out; } .logo { color: #D5B45B; font-family: 'Playfair Display', serif; font-size: 2.5em; padding: 20px 0; } nav { display: table; margin: 0 auto; } nav ul { list-style: none; margin: 0; padding: 0; } .topmenu:after { content: ""; display: table; clear: both; } .topmenu > li { width: 25%; float: left; position: relative; font-family: 'Open Sans', sans-serif; } .topmenu > li > a { text-transform: uppercase; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; } .topmenu li a:hover { color: #D5B45B; } .submenu-link:after { content: "f107"; font-family: "FontAwesome"; color: inherit; margin-left: 10px; } .submenu { background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; opacity: 0; transform: scaleY(0); transform-origin: 0 0; transition: .5s ease-in-out; } .submenu a { color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); } .submenu li:last-child a { border-bottom: none; } .topmenu > li:hover .submenu { opacity: 1; transform: scaleY(1); }
4. Увеличивающееся выпадающее меню
Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера .submenu {transform: scale(.8);}, при наведении размер увеличивается до .topmenu > li:hover .submenu {transform: scale(1);}.
See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.
<nav> <ul class="topmenu"> <li><a href="">Home</a></li> <li><a href="">Shop</a></li> <li><a href="">Blog</a> <ul class="submenu"> <li><a href="">Category</a></li> <li><a href="">Author</a></li> <li><a href="">Archive</a></li> <li><a href="">Tags</a></li> </ul> </li> <li><a href="">Portfolio</a> <ul class="submenu"> <li><a href="">Category</a></li> <li><a href="">Author</a></li> <li><a href="">Archive</a></li> <li><a href="">Tags</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </nav>
* { box-sizing: border-box; } body { margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) } nav { background: white; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; } .topmenu { text-align: center; padding: 10px 0; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li:after { content: ""; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); } .topmenu > li:last-child:after { background: none; box-shadow: none; } .topmenu > li > a { padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: 'Exo 2', sans-serif; } .topmenu li a:hover { color: #c0a97a; } .submenu { position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; } .submenu li a { padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: 'Kurale', serif; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: scale(1); }
html5book.ru
Описываем CSS стили горизонтального меню
Первым делом сбросим все отступы, которые могут задавать по умолчанию разные браузеры:
.dws-menu *{ margin: 0; padding: 0; }
Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.
header{ margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Скроем маркеры у списков:
.dws-menu ul, .dws-menu ol{ list-style: none; }
Списки отобразим по горизонтали при помощи display: flax, и делаем его по центру:
.dws-menu > ul{ display: flex; justify-content: center; }
В header сделаем отступ только сверху, пропишем margin-top.
header{ margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Оформим наше меню, зададим цвет кнопок, шрифт и т.д.
Отбираем ссылки nav > ul li , и делаем их блочными элементами. Задаем фон меню, пропишем отступы, укажем размер, цвет, уберем подчеркивание, и сделаем заголовки заглавными буквами.
.dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; }
Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:
.dws-menu > ul li{ position: relative; }
Далее отбираем иконки, позиционируем их абсолютно, отступ сверху делаем в 15 пик., с лева 12 пик, увеличим размер до 18 пик.
.dws-menu > ul li > a i.fa{ position: absolute; top: 15px; left: 12px; font-size: 18px; }
Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI присваиваем ему аналогичный бордюр.
.dws-menu > ul li:first-child{ border-left: 1px solid #b2b3b5; } .dws-menu > ul li:last-child{ border-right: 1px solid #babbbd; }
Делаем разделители спискам LI:
.dws-menu > ul li{ position: relative; border-right: 1px solid #c7c8ca; }
Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.
Анимируем горизонтальное меню при наведение
Отбираем ссылки и назначаем цвет блоку, и цвет самой ссылки с иконкой присвоим белый. Давайте добавим еще темную тень. С помощью transition в 0.3 сек сделаем плавное появление:
.dws-menu li a:hover{ background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }
И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:
.dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; }
Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.
Описываем выпадающее меню CSS / HTML
Открываем index.html и добавим, к примеру, в продукцию дополнительное меню. Между списками LI вставляем UL, в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#”.
ul>li*5>a[href=»#»]
Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия).
<ul> <li><a href="#">Одежда</a></li> <li><a href="#">Электроника</a></li> <li><a href="#">Продукты питания</a></li> <li><a href="#">Инструменты</a></li> <li><a href="#">Быт. химия</a></li> </ul>
Затем открываем style.css и опишем стили подменю.
Отбираем второй список и присвоим ему position: absolute;, зададим минимальную ширину в 150 пик.
/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; }
Пропишем спискам border в 1 пик.
.dws-menu li > ul li{ border: 1px solid #c7c8ca; }
Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5;.
.dws-menu li > ul li a{ padding: 10px; text-transform: none; background: #e4e4e5; }
Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в «Электронике» формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны) и сохраняемся.
<li><a href="#">Электроника</a> <ul> <li><a href="#">Камеры</a></li> <li><a href="#">Компьютеры</a></li> <li><a href="#">Телефоны</a></li> </ul> </li>
Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:
.dws-menu li > ul li ul{ position: absolute; right: -150px; top: 0; }
Далее сделаем появление подменю при наведение на основные пункты верхнего меню, для этого добавляем display: none; и тем самым скрываем все внутренние пункты.
/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; display: none; }
А для их появления отберем списки при наведении и отобразим их при помощи display: block;.
.dws-menu li:hover > ul{ display: block; }
Теперь можно добавлять многоуровневые меню просто простым копированием блока UL, изменением его пунктов.
<ul> <li><a href="#"><i class="fa fa-home"></i>Главная</a></li> <li><a href="#"><i class="fa fa-shopping-cart"></i>Продукция</a> <ul> <li><a href="#">Одежда</a> <ul> <li><a href="#">Обувь</a></li> <li><a href="#">Куртки</a></li> <li><a href="#">Брюки</a></li> </ul> </li> <li><a href="#">Электроника</a> <ul> <li><a href="#">Камеры</a></li> <li><a href="#">Компьютеры</a></li> <li><a href="#">Телефоны</a> <ul> <li><a href="#">Samsung</a></li> <li><a href="#">Flf</a></li> <li><a href="#">Apple</a></li> </ul> </li> </ul> </li> <li><a href="#">Продукты питания</a></li> <li><a href="#">Инструменты</a></li> <li><a href="#">Быт. химия</a></li> </ul> </li> <li><a href="#"><i class="fa fa-cogs"></i>Услуги</a> <ul> <li><a href="#">Услуга 1</a></li> <li><a href="#">Услуга 2</a></li> <li><a href="#">Услуга 3</a></li> </ul> </li> <li><a href="#"><i class="fa fa-th-list"></i>Новости</a></li> <li><a href="#"><i class="fa fa-envelope-open"></i>Контакты</a></li> </ul>
Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь CSS генератором, у меня создано несколько Presets , вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background который прописывал до этого.
.dws-menu > ul li a{ display: block; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ background: #c9c9c9; /* Old browsers */ background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#757577',GradientType=0 ); /* IE6-9 */ padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; }
.dws-menu li a:hover{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0,454547+2,454547+98,e0e1e5+100 */ background: #e0e1e5; /* Old browsers */ background: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e1e5', endColorstr='#e0e1e5',GradientType=0 ); /* IE6-9 */ color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }
При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.
Оставить комментарий:
dwstroy.ru