Выпадающее меню css
Выпадающее меню можно встретить на большинстве таких сайтов как блоги, интернет магазины, на корпоративных сайтах и т.д.
Благодаря этому важнейшему элементу, посетитель с легкостью сможет перемещаться по сайту, а правильно продуманное меню также ускорит индексацию вашего интернет ресурса.
В рамках данной статьи мы рассмотрим, то как можно сделать такое меню. Поехали!
Этапы создания меню
Меню мы будем создавать в два этапа:
- Создание основного меню;
- Создание выпадающего меню.
В первом этапе мы создадим разметку для основного меню, которое будет видно всегда, его мы стилизируем, после этого мы создадим разметку для выпадающего, которое будет появляться только после наведения на один из нескольких элементов основного меню.
С этапами определились, теперь перейдем непосредственно к созданию меню.
HTML разметка основного списка меню
Начинаем создание с разметки будущего меню:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Menu</title>
</head>
<body>
<nav class="menu">
<div class="content">
<div class="menu__wrapp">
<ul class="menu__list">
<li class="menu__item">
<a href="#" class="menu__link">Главная</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Атомобили</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Самолеты</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Велосипеды</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Самокаты</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</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{
width: 1140px;
height: auto;
margin: 0 auto;
}
Здесь я думаю все понятно.
Теперь переходим к нашему меню и для начала нам необходимо сделать так что бы список категорий был расположен не вертикально, а горизонтально. Это мы сможем сделать с помощью свойства “display” и “значения inline-block”
.menu__item{
display: inline-block;
}
Если всмотреться, то мы можем увидеть маленький отступ между категориями. Что бы его убрать необходимо записать следующее:
.menu__list{
font-size: 0;
}
.menu__link{
font-size: 18px;
}
Теперь добавим красоты нашему меню и расположим его по центру страницы:
.menu{
width: 100%;
height: auto;
background-color: #282535;
box-shadow: 0 0 20px -3px #282535;
}
.menu__wrapp{
display: flex;
justify-content: center;
}
.menu__link{
display: block;
padding: 13px 20px;
font-size: 18px;
color: #e9e9e9;
letter-spacing: 1px;
text-decoration: none;
border-radius: 5px;
}
Результат:
Теперь добавим эффект при наведении на категории:
.menu__link:hover{
color: #a8a3c2;
background-color: #3f3c4e;
}
Вот что получилось:
Проблема в том что данный эффект появляется быстро и не плавно, это можно исправить добавив свойство “transition” элементу с классом “.menu__link”
.menu__link{
position: relative;
display: block;
padding: 13px 20px;
font-size: 18px;
color: #e9e9e9;
letter-spacing: 1px;
text-decoration: none;
border-radius: 5px;
transition: .1s;
z-index: 2;
}
Теперь наше меню выглядит красиво и можно переходить к созданию выпадающего списка.
Создание выпадающего меню.
Первое что нам нужно, это создать разметку.
Выпадающий список будет появляться только в том случае если человек наведет курсор мыши на элемент с классом “.menu__item”, поэтому и помещать его мы будем в этот элемент сразу после ссылки с классом “.menu__link”:
<nav class="menu">
<div class="content">
<div class="menu__wrapp">
<ul class="menu__list">
<li class="menu__item"><a href="#" class="menu__link">Главная</a></li>
<li class="menu__item">
<a href="#" class="menu__link">Атомобили</a>
<ul class="menu__child-wrapp">
<li class="menu__child-item">
<a href="#" class="menu__child-link">Категория-1</a>
</li>
<li class="menu__child-item">
<a href="#" class="menu__child-link">Категория-2</a>
</li>
<li class="menu__child-item">
<a href="#" class="menu__child-link">Категория-3</a>
</li>
<li class="menu__child-item">
<a href="#" class="menu__child-link">Категория-4</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Добавим элементу с классом “.menu__child-link” размер шрифта:
.menu__child-link{
font-size: 18px;
}
После всех проделанных манипуляций должно быть так:
Стилизация выпадающего списка
Из-за добавления дополнительного списка, расположение элементов у нас не правильное. Должно быть так что все категории расположены друг за другом в одну линию, а выпадающий список должен быть под категорией. Что бы это сделать запишем следующие стили:
.menu__item{
position: relative;
display: inline-block;
}
.menu__child-wrapp{
position: absolute;
top: 45px;
}
Результат выполнения вставленного кода:
После этого стилизируем выпадающий список и добавляем ему ховер эффект:
.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{
color: #a8a3c2;
background-color: #3f3c4e;
}
В итоге должно получится во так:
Последнее что нам нужно сделать, так это спрятать этот список и сделать его появление только после наведения курсора мыши на основную категорию.
Чтобы спрятать список, нам необходимо элементу с классом “.menu__child-wrapp” добавить “opacity: 0; top: -9999px;” и для плавного появления дописать “transition: opacity .4s;”
.menu__child-wrapp{
position: absolute;
width: 180px;
height: auto;
left: 50%;
top: -9999px;
opacity: 0;
overflow: hidden;
background-color: #e9e9e9;
box-shadow: 3px 3px 27px -15px #282535;
border-radius: 5px;
transform: translateX(-50%);
z-index: 1;
transition: opacity .4s;
}
Такая запись "transition: opacity .4s;". означает то что необходимо анимировать только прозрачность элемента, а передвижение с верху будет происходить мгновенно и незаметно для нас.
Если вам интересно, то можете сами поэкспериментировать, сначала написать анимацию без значения opacity, а потом его дописать.
Теперь добавим ховер эффект для появления выпадающего меню:
.menu__item:hover .menu__child-wrapp{
opacity: 1;
top: 45px;
}
Вот и все, наше выпадающее меню полностью готово. Посмотреть на результат проделанной работы можно по этой ссылке:
Если эта статья была вам полезна, то подписывайтесь на новости блога что бы не пропускать новые, еще более интересные статьи!
Также подписывайтесь на мой instagram и telegram, там вы сможете найти много полезной информации.
Не забывайте оставлять свои комментарии, а также если у вас есть интересная тема для следующей статьи, то вы можете написать ее в комментариях или отправить на почту nd.webdew@gmail.com и я постараюсь ее для вас сделать. Спасибо за внимание и пусть баги будут фичами.
комментарии (0)
написать комментарийкомментариев нет