Меню навигации с выпадающим списком на чистом CSS
Чтобы сделать меню навигации с выпадающим списком на чистом CSS, мы воспользуемся возможностями CSS3, а именно, псевдоклассом :checked.
Этот псевдосласс применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение “включено”. Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.
Разметка
<nav> <div>Website</div> <ul> <li> <input type="radio" name="nav-group"> <label for="home">Home</label> <label for="nav-close"></label> <div> <div> <ul> <li><a href="#">More about us 1</a></li> <li><a href="#">More about us 2</a></li> <li><a href="#">More about us 3</a></li> </ul> </div> </div> </li> <li> <input type="radio" name="nav-group"> <label for="css">CSS</label> <label for="nav-close"></label> <div> <div> <ul> <li><a href="#">More about us 1</a></li> <li><a href="#">More about us 2</a></li> <li><a href="#">More about us 3</a></li> </ul> </div> </div> </li> <li> <input type="radio" name="nav-group"> <label for="dropdown">Dropdown</label> <label for="nav-close"></label> <div> <div> <ul> <li><a href="#">More about us 1</a></li> <li><a href="#">More about us 2</a></li> <li><a href="#">More about us 3</a></li> </ul> </div> </div> </li> </ul> <input type="radio" name="nav-group"> </nav>
Стили
.
nav-main {
width: 100%;
background-color: #222;
height: 70px;
color: #fff;
}
.nav-main .logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height: 40px;
}
.nav-main > ul {
margin: 0;
padding: 0;
float: left;
list-style-type: none;
}
.nav-main > ul > li {
float: left;
}
.nav-option {
display: none;
}
.nav-option:checked ~ .nav-content {
max-height: 400px;
-webkit-transition: max-height 0.4s ease-in;
-moz-transition: max-height 0.4s ease-in;
transition: max-height 0.4s ease-in;
}
.nav-option:checked + label {
background-color: #444;
}
.nav-option:checked ~ .nav-close {
display: block;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
margin: 0;
}
.nav-item:hover {
background-color: #444;
cursor: pointer;
}
.nav-content {
position: absolute;
top: 70px;
overflow: hidden;
max-height: 0;
background-color: #222;
color: #fff;
}
.nav-content a {
color: #fff;
text-decoration: none;
}
.
Результат:
Смотреть результат
Теги: css
Редактировать
Создаем анимированное выпадающее меню при помощи CSS3
Я убежден, что CSS3 функции, такие как переходы, анимация и трансформация могут добавить дополнительную привлекательность многим элементам в Ваших проектах.
В этой статье вы увидите, как можно построить симпатичное, анимированное выпадающее меню при помощи одного только CSS3.
Онлайн-демо
HTML
Структура меню очень простая — это неупорядоченный список с ссылками. Вот фрагмент его кода:
<ul>
<li><a href=»#»>Home</a></li>
<li>
<a href=»#»>Categories</a>
<ul>
<li><a href=»#»>CSS</a></li>
<li><a href=»#»>Graphic design</a></li>
<li><a href=»#»>Development tools</a></li>
<li><a href=»#»>Web design</a></li>
</li>
<li><a href=»#»>Work</a></li>
<li><a href=»#»>About</a></li>
<li><a href=»#»>Contact</a></li>
</ul>
CSS
Сначала сбрасываем стили по-умолчанию:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
Первый уровень меню.
Возможности CSS3 по созданию таких вещей как градиент, тени и закругленные углы легко позволят нам реализовать следующее:
#menu {
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
Clear floats.
Это метод Nicolas Gallagher, который я обычно использую:
#menu:before,
#menu:after {
content: «»;
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
Список элементов.
Обратите внимание на селектор #menu li:hover>a. Это, пожалуй, наиболее важный CSS трюк для этого выпадающего меню.
Итак, вот как это работает: выбираем элемент «а», который является дочерним для «li», а элемент «li» должен быть в свою очередь потомком «#menu». Подробнее о селекторах читайте здесь.
#menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
Подпункты меню.
С помощью свойства CSS3 transitions мы можем создать анимацию изменяя такие CSS-свойства, как margin или opacity.
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .
2s ease-in-out;-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
Стили для первого и последнего элемента меню.
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: »;
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
jQuery
Данное меню работает во всех популярных современных браузерах, но если вам нужно добавить поддержку также IE6, то без использования JavaScript не обойтись.
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$(‘li’).has(‘ul’).mouseover(function(){
$(this).children(‘ul’).css(‘visibility’,’visible’);
}).mouseout(function(){
$(this).children(‘ul’).css(‘visibility’,’hidden’);
})
}
});
Онлайн-демо
Данное меню протестировано в Firefox 8, Chrome 15, Opera 11.52, Safari и IE7.
Скачать исходники.
Перевод
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
сделать выпадающее меню на CSS и HTML.
Задача
Создать выпадающее меню инструментами CSS и HTML.
Решение
Для начала давайте создадим список, разместим его горизонтально и оформим его внешний вид. Это будет основное меню, а потом сделаем для его пунктов выпадающее меню.
<!DOCTYPE html>
<html>
<head>
<title>Выпадающее меню</title>
<style>
ul.
menu{
padding: 3px; /* убираем отступы */
margin-top: 50px; /* для красоты отодвигаю вниз */
text-align: center; /* выравниваю элементы спаска по центру */
}
ul.menu > li{
list-style: none; /* убираем маркеры списка */
display: inline-block; /* разещаем списки горизонтально */
background-color: #D87171;
padding: 5px 15px;
}
/* устанавливаем стиль ссылок в меню */
ul.menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Услуги</a></li>
</ul>
</body>
</html>У нас получился список такого вида:
Рисунок 1.
Подготовительные работы.Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover. Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки — это уже другой псевдокласс.
Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта «Услуги», добавим выпадающие разделы: «Купить», «Продать», «Обменять». Эти пункты — это отдельный список, который вложен в тег <li>
Создадим этот список и добавим стили, описывающие его внешний вид.
<!DOCTYPE html>
<html>
<head>
<title>Выпадающее меню</title>
<style>
ul.menu{
padding: 3px; /* убираем отступы */
margin-top: 50px; /* для красоты отодвигаю вниз */
text-align: center; /* выравниваю элементы спаска по центру */
}
ul.menu > li{
list-style: none; /* убираем маркеры списка */
display: inline-block; /* разещаем списки горизонтально */
background-color: #D87171;
padding: 5px 15px;
}
/* устанавливаем стиль ссылок в меню */
ul.
menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
/* устанавливаем стиль для внутреннего меню */
.menuInner{
list-style: none;
padding: 4px;
border: 1px solid #000000;
border-radius: 5px;
background-color: #FFFFFF;
text-align: left;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Услуги</a>
<ul>
<li>Купить</li>
<li>Продать</li>
<li>Обменять</li>
</ul>
</li>
</ul>
</body>
</html>Теперь у нас получился такой список:
Рисунок 2. Подготовительные работы.Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши.
Скрыть элемент можно при помощи правила правила {display: none}. А при наведении курсора его нужно активировать сделав снова видимым правила {display: inline-block}.
<!DOCTYPE html>
<html>
<head>
<title>Выпадающее меню</title>
<style>
ul.menu{
padding: 3px;
margin-top: 50px;
text-align: center;
}
ul.menu > li{
list-style: none;
display: inline-block;
background-color: #D87171;
padding: 5px 15px;
}
/* устанавливаем стиль ссылок в меню */
ul.menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
/* устанавливаем стиль для внутреннего меню */
.menuInner{
display: none; /* делаем невидимым */
list-style: none;
padding: 4px;
border: 1px solid #000000;
border-radius: 5px;
background-color: #FFFFFF;
text-align: left;
}
/* делаем видимым при наведении курсора на блок li */
.
menu > li:hover > .menuInner{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Услуги</a>
<ul>
<li>Купить</li>
<li>Продать</li>
<li>Обменять</li>
</ul>
</li>
</ul>
</body>
</html>Теперь наше меню исчезает и появляется, но нам нужно чтобы оно появлялось поверх существующих элементов, не меняя уже установленные границы существующих блоков.
Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute.
<!DOCTYPE html>
<html>
<head>
<title>Выпадающее меню</title>
<style>
ul.menu{
padding: 3px;
margin-top: 50px;
text-align: center;
}
ul.menu > li{
position: relative; /* добавляем позиционирование */
list-style: none;
display: inline-block;
background-color: #D87171;
padding: 5px 15px;
height: 20px; /* добавляем высоту */
}
/* устанавливаем стиль ссылок в меню */
ul.
menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
/* устанавливаем стиль для внутреннего меню */
.menuInner{
display: none; /* делаем невидимым */
list-style: none;
padding: 4px;
border: 1px solid #000000;
border-radius: 5px;
background-color: #FFFFFF;
text-align: left;
}
.menu > li:hover > .menuInner{
display: block;
position: absolute;
top: 30px;
left: 0;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Услуги</a>
<ul>
<li>Купить</li>
<li>Продать</li>
<li>Обменять</li>
</ul>
</li>
</ul>
</body>
</html>Что мы тут сделали:
- Добавили в родительский элемент <li> правило позиционирования {position: relative;}.
Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана. - Добавили в родительский элемент <li> правило {height: 20px;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
- Установили абсолютное позиционирование {position: absolute;} выпадающему списку и установили координаты: top и left.
Теперь выпадающее меню работает корректно.
Рисунок 3. Окончательный вариант.Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.
Учебная задача решена. Пока.
Как сделать горизонтальное выпадающее меню на сайте
Перед прочтением предлагаю рассмотреть — горизонтальное меню для сайта.
Перед тем как начнем копаться в коде, отмечу: данное выпадающее меню реализовано без использования jQuery и JavaScript, а только при помощи CSS и новых свойств CSS3. Помимо навигации снабдим наше меню еще и красивым раздвижным полем поиска.
Итак, структура HTML:
<div>
<!-- #navigation -->
<div>
<!-- #menu -->
<div>
<!-- #nav-->
<ul>
<!-- Home Item -->
<li>
<a href="#">Главная</a>
<!-- Level 1 -->
<ul>
<li><a href="#">Пункт №1</a></li>
<li><a href="#">Пункт №2</a></li>
<li><a href="#">Пункт №3</a></li>
<li><a href="#">Пункт №4</a></li>
<li><a href="#">Пункт №5</a></li>
<li><a href="#">Пункт №6 - Урв. 2</a>
<!-- Level 2 -->
<ul>
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
<li><a href="#">Подпункт №3 - Урв.
3</a>
<!-- Level 3 -->
<ul>
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
<li><a href="#">Подпункт №3 - Урв. 4</a>
<!-- Level 4 -->
<ul>
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
<li><a href="#">Подпункт №3</a></li>
</ul>
<!-- END Level 4 -->
</li>
</ul>
<!-- END Level 3 -->
</li>
</ul>
<!-- END Level 2 -->
</li>
</ul>
<!-- END Level 1 -->
</li>
<!-- END Home Item -->
<!-- Portfolio Item -->
<li>
<a href="#">Портфолио</a>
<ul>
<li><a href="#">Пункт №1</a></li>
<li><a href="#">Пункт №2</a></li>
<li><a href="#">Пункт №3</a></li>
<li><a href="#">Пункт №4</a></li>
<li><a href="#">Пункт №5</a></li>
</ul>
</li>
<!-- END Portfolio Item -->
<!-- Blog Item -->
<li>
<a href="#">Блог</a>
<ul>
<li><a href="#">Пункт №1</a></li>
<li><a href="#">Пункт №2</a></li>
<li><a href="#">Пункт №3</a></li>
<li><a href="#">Пункт №4</a></li>
</ul>
</li>
<!-- END Blog Item -->
<li><a href="#">Сервисы</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Написать нам</a></li>
</ul>
<!-- END #nav -->
<!-- Search Form -->
<form action="#">
<input type="text" value="Поиск.
.." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
</form>
<!-- END Search Form -->
</div>
<!-- END #menu -->
</div>
<!-- END #navigation -->
</div>В оберточный div помещаем заготовку нашего меню и форму для строки поиска. Первый уровень нашего меню представляет собой основные пункты меню, которые будут видны всегда, запихнуты они в элементы li списка ul с id=nav. Обворачиваем их в ссылки и начинаем наращивать нашу структуру – кладем списки ul без id в нужные элементы li корневого списка. Необходим еще один уровень вложенности? — Всегда, пожалуйста, выбираем li и засовываем туда еще один список. Количество уровней не ограничено, но не злоупотребляйте этим, иначе меню станет просто неюзабельным.
Далее подключаем уже готовый файл CSS:
<link href="style-menu.css" rel="stylesheet" type="text/css" />Кто просто искал красивое плавающие выпадающее меню, на этом месте может остановиться и просто прикрепить файлы из архива себе на страницу.
Для всех остальных же, скажу еще пару слов. Весь эффект данного меню заключается всего лишь в одной группе свойств transition:
#nav li a:hover,
#nav li ul li a:hover{
transition-property: color, background;
transition-duration: 0.5s, 0.5s;
transition-timing-function: linear, ease-out;
}
.searchfield:focus,
.searchfield:not(:focus){
transition-property: width;
transition-duration: 0.5s, 0.5s;
transition-timing-function: linear, ease-out;
}
#menu_div:hover,
#navigation:hover,
#nav li ul a,
#menu_div,
#navigation,
#nav li a,
#menu_div:not(:hover),
#navigation:not(:hover){
transition-property: opacity;
transition-duration: 0.5s, 0.5s;
transition-timing-function: linear, ease-out;
}В transition-property указываем необходимое нам свойство: цвет, прозрачность, длину, ширину, фон и т.п., transition-duration – задает скорость изменения указанного свойства, transition-timing-function – стиль изменения свойства – довольно интересный атрибут, но об этом расскажу как-нибудь в следующий раз.
Плавно открывающееся меню с помощью CSS
Осуществим нашу задумку с помощью самого обычного CSS. В следующей статье, если не забуду, то опишу этот же эффект с помощью jQuery. Но а пока, давайте приступим к разбору данного метода. Но, сначала предложу посмотреть, что получится в итоге:
Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.
<nav> <ul> <li> <a href="#">пункт 1</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="#">пункт 2</a> <ul> <li><a href="#">Выпадающий пункт 1</a></li> <li><a href="#">Выпадающий пункт 2</a></li> <li><a href="#">Выпадающий пункт 3</a></li> </ul> </li> </ul> </nav>
Думаю тут все понятно, самое простое 2-х уровневое меню.
Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂
#slow_nav > ul{
width: 500px;
margin:25px auto 0;
}
#slow_nav > ul > li{
list-style: none;
display: inline-block;
position:relative;
padding:0;
}
#slow_nav a{text-decoration:none;}
#slow_nav > ul > li > a{
font-size:18px;
padding:5px;
background-color:#333;
color:#fff;
}
#slow_nav li ul{
position:absolute;
list-style:none;
text-align:center;
top:15px;
font-size:15px;
left:0;
margin:0;
padding:0;
/* Данные строки нужны для правильной работы анимации */
max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.
4s linear;
/* конец */
}
#slow_nav li:hover ul{
max-height:300px;
}
#slow_nav li ul li{
background-color:#333;
border-bottom:1px solid #888;
}
#slow_nav li ul li:last-child{
border-bottom:none;
}
#slow_nav li ul li a{
padding:5px 12px;
color:#fff;
display:block;
}
#slow_nav li ul li:hover{
background-color:#444;
}
#slow_nav li ul li:first-child{
margin-top:25px;
position:relative;
}
#slow_nav li ul li:first-child:before{
content:'';
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#333;
left:10px;
top:-10px;
}
Код CSS не маленький., но по своей сути не сложный. Если Вы владеете навыками верстки, то запросто разберетесь что и как. Я лишь остановлюсь на некоторых моментах, которые являются важными.
Первым делом это сама анимация.
Нужный код выделен комментариев в коде — /* Данные строки нужны для правильной работы анимации */. Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей —
max-height:0px; и прописываем свойство overflow:hidden;, чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition, которое совершит анимацию.
-webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear;
Тут можете изменить разве что время анимации. В данный момент время задано 0.4 секунды. Сразу после того как задали анимацию, добавлено свойство , для задания новой высоты при наведении на главные пункты меню:
#slow_nav li:hover ul{
max-height:300px;
}
Тут такая картинка. Высота задается максимальная фиксированная, если у Вас высота выпадающего меню будет побольше, то и значение меняйте на больше.
В противном случаи Ваше меню обрежет по высоте 300 пикселей.
Далее уже задаем стили для выпадающего меню, так что на них подробно останавливаться не буду. Ту как бы и все. Это и есть весь способ. Он простой и действенный и справляется со своей задачей на все 100%.
Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.
На этом все, спасибо за внимание. 🙂
Как создать раскрывающееся меню в HTML
В HTML мы можем легко создать раскрывающееся меню в документе Html, используя следующие различные способы:
- Использование HTML-формы
- Использование внутреннего CSS
Использование HTML-формы
Если мы хотим создать раскрывающееся меню в документе Html с помощью формы, мы должны выполнить шаги, указанные ниже.
Используя эти шаги, мы можем легко создать раскрывающееся меню:
Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать форму для создания раскрывающегося меню.
<Голова> <Название> Создайте раскрывающееся меню с помощью HTML-формы <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе. И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.