Как сделать выпадающее меню в html css

Выпадающее меню на чистом CSS / HTML

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

See the Pen POyzbW by Denis (@Dwstroy) on CodePen.

В уроке задействуем:

• display: flex;
• используем transition ;
• будем позиционировать элементы при помощи position .

HTML структура горизонтального меню

П ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm , создаем index.html файл, пропишем каркас html:5 , заменю lang на ru .

Все meta удалю кроме кодировки, пропишу свой заголовок «Tom menu».

Между body пишем тег header , а в нем блок с классом .dws-menu в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href=»#» . Затем будет идти иконка I с классом .fa .fa-

Пропишем название пунктов меню (Главная, Продукция, Услуги, Новости, Контакты).

Далее отбираем и подключаем иконки. Переходим на сайт Font Awesome, отберем себе иконки под данные пункты меню:

Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts и папку css в свою среду разработки.

В папке fonts лежат шрифты иконок, а в папке css их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css .

В index.html подключаем иконки, и прописываем каждому пункту свой стиль иконки (home, shopping-cart, cogs, th-list, envelope-open).

Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css и подключим его к index.html . Для проверки, что стили подключены, создам папку img , в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background .

body < background-image: url("../img/ep_naturalwhite.png"); >

Как видим у нас все отобразилось и далее приступим к описанию стилей.

Описываем CSS стили горизонтального меню

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

.dws-menu *

Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.

header

Скроем маркеры у списков:

.dws-menu ul, .dws-menu ol

Списки отобразим по горизонтали при помощи display: flax , и делаем его по центру:

.dws-menu > ul

В header сделаем отступ только сверху, пропишем margin-top .

header<  margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; >

Оформим наше меню, зададим цвет кнопок, шрифт и т.д.

Отбираем ссылки nav > ul li , и делаем их блочными элементами. Задаем фон меню, пропишем отступы, укажем размер, цвет, уберем подчеркивание, и сделаем заголовки заглавными буквами.

.dws-menu > ul li a

Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:

.dws-menu > ul li

Далее отбираем иконки, позиционируем их абсолютно, отступ сверху делаем в 15 пик., с лева 12 пик, увеличим размер до 18 пик.

.dws-menu > ul li > a i.fa

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

.dws-menu > ul li:first-child < border-left: 1px solid #b2b3b5; >.dws-menu > ul li:last-child

Делаем разделители спискам LI :

.dws-menu > ul li < position: relative; border-right: 1px solid #c7c8ca; > 

Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.

Анимируем горизонтальное меню при наведение

Отбираем ссылки и назначаем цвет блоку, и цвет самой ссылки с иконкой присвоим белый. Давайте добавим еще темную тень. С помощью transition в 0.3 сек сделаем плавное появление:

.dws-menu li a:hover

И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:

.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=”#” .

Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия).

Затем открываем style.css и опишем стили подменю.

Отбираем второй список и присвоим ему position: absolute; , зададим минимальную ширину в 150 пик.

/*sub menu*/ .dws-menu li ul

Пропишем спискам border в 1 пик.

.dws-menu li > ul li

Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5; .

.dws-menu li > ul li a

Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в «Электронике» формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны) и сохраняемся.

Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:

.dws-menu li > ul li ul

Далее сделаем появление подменю при наведение на основные пункты верхнего меню, для этого добавляем display: none; и тем самым скрываем все внутренние пункты.

/*sub menu*/ .dws-menu li ul < position: absolute; min-width: 150px; display: none; > 

А для их появления отберем списки при наведении и отобразим их при помощи display: block; .

.dws-menu li:hover > ul

Теперь можно добавлять многоуровневые меню просто простым копированием блока 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.

Оставить комментарий:

Отзывы

Здравствуйте, у меня не получилось.
Главная
Продукция
Одежда
Обувь
Куртки
Брюки
Электроника
Камеры
Компьютеры
Телефоны
Samsung
Flf
Apple
Продукты питания
Инструменты
Быт. химия
Услуги
Услуга 1
Услуга 2
Услуга 3
Новости
Контакты

Это все,что мне выдал браузер,только криво и с точками.Подскажите,пожалуйста,что может быть не так?

Максим

Выпадающее меню на CSS

Меню верхнего уровня у нас создано. Теперь необходимо назначить стили для элементов меню.

 nav < margin: 50px 0; bacground-color: #E94f56; >nav ul < padding: 0; margin: 0; list-style: none; position: relative; >nav ul li < margin: 0px -7px 0 0; display: inline-block; background-color: #E94f56; >nav a < display: block; padding: 0 10px; color: #ffff; font-size: 23px; line-height: 60px; text-decoration: none; >nav a:hover

Проверим то что у нас получилось.

. То есть у нас получается список в списке. Создадим структуру с вложенным меню.

Теперь нужно добавить стили к вложенному меню. Для создания выпадающего меню необходимо задать вложенному списку абсолютное позиционирование и смещение от основного меню.

nav ul ul < display: none; position: absolute; top100%; >nav ul li:hover>ul < display: inherit; >nav ul ul li

Должно получиться следующее

Добавим для пункта меню с вложенным подменю соответствующий индикатор.

 li> a:after li> a:only-child:after

В итоге у нас получилось следующее

Выпадающее меню css

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

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

В рамках данной статьи мы рассмотрим, то как можно сделать такое меню. Поехали!

Этапы создания меню

Меню мы будем создавать в два этапа:

1. Создание основного меню;
2. Создание выпадающего меню.

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

С этапами определились, теперь перейдем непосредственно к созданию меню.

HTML разметка основного списка меню

Начинаем создание с разметки будущего меню:

• class=”menu” – этот класс нужен для стилизации фона нашего меню;
• class=”content” – данный класс необходим для того что бы наше меню не выходило за рамки контентной части всего сайта;
• class=”menu__wrapp” необходим для центрирования меню по центру страницы;
• class=”menu__list” нужен для того что бы убрать маленькие отступы между списком категорий;
• class=”menu__item” нужен для того что бы расположить элементы списка в строку, также внутри элемента с данным классом мы будем размещать список элементов выпадающего меню;
• class=”menu__link” с помощью этого класса мы будем стилизовать категории меню.

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

Стилизация меню

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

Для начала добавим базовые стили нашего сайта:

* < box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; >body < width: 100%; height: 100%; background-color: #e9e9e9; overflow: hidden; >.content

Здесь я думаю все понятно.

Теперь переходим к нашему меню и для начала нам необходимо сделать так что бы список категорий был расположен не вертикально, а горизонтально. Это мы сможем сделать с помощью свойства “display” и “значения inline-block”

.menu__item

Если всмотреться, то мы можем увидеть маленький отступ между категориями. Что бы его убрать необходимо записать следующее:

.menu__list < font-size: 0; >.menu__link

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

.menu < width: 100%; height: auto; background-color: #282535; box-shadow: 0 0 20px -3px #282535; >.menu__wrapp < display: flex; justify-content: center; >.menu__link

Теперь добавим эффект при наведении на категории:

.menu__link:hover

Вот что получилось:

Проблема в том что данный эффект появляется быстро и не плавно, это можно исправить добавив свойство “transition” элементу с классом “.menu__link”

.menu__link

Теперь наше меню выглядит красиво и можно переходить к созданию выпадающего списка.

Создание выпадающего меню.

Первое что нам нужно, это создать разметку.

Выпадающий список будет появляться только в том случае если человек наведет курсор мыши на элемент с классом “.menu__item”, поэтому и помещать его мы будем в этот элемент сразу после ссылки с классом “.menu__link”:

Добавим элементу с классом “.menu__child-link” размер шрифта:

.menu__child-link

После всех проделанных манипуляций должно быть так:

Стилизация выпадающего списка

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

.menu__item < position: relative; display: inline-block; >.menu__child-wrapp

Результат выполнения вставленного кода:

После этого стилизируем выпадающий список и добавляем ему ховер эффект:

.menu__child-wrapp < position: absolute; width: 180px; height: auto; left: 50%; top: 45px; overflow: hidden; background-color: #e9e9e9; box-shadow: 3px 3px 27px -15px #282535; border-radius: 5px; transform: translateX(-50%); z-index: 1; >.menu__child-link < display: block; padding: 10px 5px; color: #282535; font-size: 18px; text-decoration: none; text-align: center; border-bottom: 1px solid #dddddd; transition: .3s; >.menu__child-link:hover

В итоге должно получится во так:

Последнее что нам нужно сделать, так это спрятать этот список и сделать его появление только после наведения курсора мыши на основную категорию.

Чтобы спрятать список, нам необходимо элементу с классом “.menu__child-wrapp” добавить “opacity: 0; top: -9999px;” и для плавного появления дописать “transition: opacity .4s;”

.menu__child-wrapp

Такая запись «transition: opacity .4s;». означает то что необходимо анимировать только прозрачность элемента, а передвижение с верху будет происходить мгновенно и незаметно для нас.

Если вам интересно, то можете сами поэкспериментировать, сначала написать анимацию без значения opacity, а потом его дописать.

Теперь добавим ховер эффект для появления выпадающего меню:

.menu__item:hover .menu__child-wrapp

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

Если эта статья была вам полезна, то подписывайтесь на новости блога что бы не пропускать новые, еще более интересные статьи!

Также подписывайтесь на мой instagram и telegram, там вы сможете найти много полезной информации.

Не забывайте оставлять свои комментарии, а также если у вас есть интересная тема для следующей статьи, то вы можете написать ее в комментариях или отправить на почту nd.webdew@gmail.com и я постараюсь ее для вас сделать. Спасибо за внимание и пусть баги будут фичами.

Поделиться статьей

Что известно о windows 10xНа выбранном диске находится таблица MBR-разделов

Как сделать горизонтальное и вертикальное выпадающее меню?

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

Здесь вы, как посетитель веб-сайта, ругаетесь на своем ноутбуке, когда некоторые веб-сайты мешают вам делать или находить вещи.

Но затем вы надеваете шляпу своего владельца сайта и — БАМ — вы совершенно другой человек! Все то, что вы раздражали на других сайтах, теперь гордо живет на ваших!

Я не знаю причину этого специфического поведения, но я знаю, что мы должны вылечить это.

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

Представь, ты попал на этот сайт.

Какова вероятность того, что вы хотите узнать об их ценностях, миссии и одобрениях?

Но проблема здесь не только в не относящихся к делу подзаголовках. Это намного хуже.

Как выпадающее меню вредит вашему сайту?

1. Вы просите своих посетителей проделать большую работу, чтобы узнать что-то простое,

… что означает, что они не собираются это делать.

Ваши посетители просто хотят узнать о вас больше, щелкнуть где-нибудь и просто прокрутить вниз, читая.

Но неа, ты решил заставить их работать на это!

2. Вы создали страницы с тонким содержанием.

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

В этом конкретном примере «О нас» ценности и страницы миссий имеют в среднем по 150 слов каждая. 3 страницы, содержащие всего 150 слов, которые не помогают вашим посетителям.

Не так много вещей, которые убивают энтузиазм ваших посетителей быстрее, чем «Наша миссия» и «Наши ценности».

Поговорите с посетителями вашего сайта как нормальный человек! Или вы так говорите в реальной жизни, когда люди спрашивают вас о вашем бизнесе?

Какая альтернатива горизонтальным и вертикальным меню сайта?

Напишите одну твердую страницу «О программе», где ваши посетители смогут найти все, что вы хотели бы, чтобы они знали, просто прокрутив вниз. Таким образом, шансы, что они на самом деле все прочитают, намного выше.

Но, допустим, у вас нет выпадающего меню для раздела «О нас».

А как насчет услуг?

Причина № 3: Вам трудно найти соответствующую информацию.

Представь, ты попал на этот сайт.

Вы хотите узнать об их услугах, наведите курсор на меню «Услуги», и эта красота исчезнет.

Ваш следующий ход?

Вероятно, нажав на ярлык «Услуги», в надежде попасть на страницу, где вы перечислите перечисленные услуги вместе с дополнительным текстом.

Попался! Нет такой вещи. Это просто текст.

Итак, вам нужно СЕЙЧАС решить, о каких услугах вы хотели бы узнать.

Не быстрое решение, особенно потому, что в 4 из 6 сервисов есть слово «маркетинг».

Но хорошо, вы нажимаете «Маркетинговый аудит» и начинаете читать.

Хотите узнать о других услугах?

Приготовься прокручивать, парить, выбирать и нажимать, мой друг.

Хотите вернуться к первому интересному сервису?

Какой выпадающий элемент был снова? Нет, не этот. Попробуйте еще раз!

Как это вредит вашему сайту?

Ваши посетители могут пропустить услугу, которая им действительно нужна (и вы можете потерять деньги).

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

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

Они не могут сосредоточиться так!

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

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

Какая альтернатива создания выпадающего меню?

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

Ряд вариантов:

• Создать страницу под названием «Услуги»
• Добавьте в нее свои отдельные сервисы с заманчивым абзацем и визуально заметной ссылкой на соответствующую страницу для каждой услуги.
• В вашей навигации, ссылка только на главную страницу услуг без каких-либо раскрывающихся списков

… Без выпадающего списка под меткой навигации по сервисам, которая ссылается на это:

Причина № 4: Вы сводите посетителей вашего сайта с ума.

Какая альтернатива?

Если вы абсолютно уверены, что вам нужно много ссылок в навигации, и они не помещаются на верхнем уровне, внедрите все свое меню навигации в виде мегаменю.

Не стесняйтесь давать всем ссылкам достаточно места на экране, делая его полноразмерным. Разработайте свое меню, чтобы облегчить сканирование с использованием различных шрифтов и значков.

Что-то вроде этого:

4 альтернативы выпадающему меню, которое улучшит ваш сайт.

1. Если у вас есть только один выпадающий элемент:
   • либо поместите его как элемент навигации верхнего уровня
   • или удали это.
2. Если это имеет смысл, объедините информацию на отдельных страницах из раскрывающегося меню и сделайте из нее одну страницу (например, если у вас есть раскрывающееся меню в разделе «О программе» на верхнем элементе навигации).
3. Если у вас есть раскрывающееся меню Службы:
   • либо используйте только пункт «Услуги» верхнего уровня, который ведет на выделенную страницу «Услуги»
   • или, если вы предлагаете только 1-2 услуги, удалите элемент навигации «Службы» и создайте ссылку на соответствующие службы прямо из навигации верхнего уровня.
4. Если у вас нет выбора, кроме как предложить своим посетителям множество вариантов навигации, используйте мега-меню.

Что бы вы ни делали, убедитесь, что ваше меню навигации короткое, наглядное и понятное .

Заключительные слова мудрости.

Будьте внимательным к посетителям сайта.

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

Тогда подумайте о своем сайте. Скорее всего, вы делаете те же ошибки.

✔️ Что такое выпадающее меню?

Это меню в верхней навигации сайта которое показывает подкатегории.

✔️ В чем недостатки выпадающего меню?

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

✔️ Стоит ли отказаться от выпадающего меню?

Откажитесь от выпадающих меню. Вы прячете от пользователя информацию.

✔️ Что делать если уже есть выпадающее меню?

Обязательно сделайте ссылкой пункт навигации который раскрывает меню.

✔️ Как сделать горизонтальный выпадающий список?

Установите раскрывающийся список, включив раскрывающееся меню атрибута data-dropdown и class в контейнер меню. Внутри тега li элемента ul вы можете создать еще один новый тег ul для создания множества уровней раскрывающегося списка.

✔️ Как создать горизонтальное раскрывающееся меню в HTML?

Используйте любой элемент, чтобы открыть раскрывающееся меню, например элемент button, a или p. Используйте элемент контейнера (например, div), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки. Оберните элемент div вокруг кнопки и div, чтобы правильно расположить раскрывающееся меню с помощью CSS.

✔️ Как изменить горизонтальное меню на вертикальное в редакторе Wix?

Изменение меню сайта с горизонтального на вертикальное в редакторе Wix.
Щелкните свое меню в редакторе.
Нажмите клавишу Delete на клавиатуре.
Щелкните Добавить в левой части редактора.
Щелкните по меню.
Перетащите новое меню на свою страницу.

✔️ Как создать вертикальное раскрывающееся меню в CSS?

Добавьте таблицу стилей и форму или HTML-страницу. Затем на странице HTML или веб-форме . NET добавьте «Div» и назовите его «divMenu».

✔️ Как создать раскрывающееся меню?

На новом листе введите записи, которые должны появиться в раскрывающемся списке. Выберите ячейку на листе, в которой вы хотите открыть раскрывающийся список. Перейдите на вкладку «Данные» на ленте, затем «Проверка данных». На вкладке Параметры в поле Разрешить щелкните Список. Щелкните в поле Источник, затем выберите диапазон списка.

Получить экспертную критику вашего сайта в компании TopUser.Pro