Меню с плавно выпадающими подпунктами с использованием CSS3

13 сентября 2015 | Опубликовано в css | 1 Комментарий »

В этом уроке мы создадим интересное меню с плавно выпадающими подпунктами с помощью CSS3. Для плавного выпадания вложенных элементов воспользуемся эффектами переходов. Конечно, обратите внимание, что анимации будут работать только в современных версиях браузеров, таких как Firefox, Chrome, Safari, Opera и Internet Explorer от версии 9. В старых версиях браузеров меню не потеряет функциональности, но не будет анимации плавного выпадания подпунктов.

Вот так будет выглядеть конечный результат — меню с выпадающими подпунктами:

Вот демонстрация работы и исходный код:

Демонстрация работы – Скачать исходный код

Скачайте пример, и приступим к созданию этого меню.

Шаг 1. Код HTML

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

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<title>CSS3 Drop sliding list menu #6</title>
</head>
<body>
<div>
<ul>
<!-- элементы меню верхнего уровня -->
<li class="main"><a href="http://www.script-tutorials.com/">Home</a></li>
<li id="has-sub1"><a href="http://www.script-tutorials.com/">Tutorials</a></li>
<li id="has-sub2"><a href="http://www.script-tutorials.com/category/resources/">Resources</a></li>
<li id="has-sub3"><a href="#">Menus #4</a></li>
<li id="has-sub4"><a href="#">Menus #5</a></li>
<li class="main"><a href="http://www.script-tutorials.com/about/">About</a></li>
<li class="main"><a href="http://www.script-tutorials.com/creating-css3-drop-sliding-list-menu-6/">Back</a></li>

<!-- вложенные элементы меню -->
<li id="sub1">
<table><tr>
<td>
<dl>
<dt>Links #1</dt>
<dd><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
<dd><a href="http://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
<dd><a href="http://www.script-tutorials.com/category/php/">PHP</a></dd>
<dd><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
<dt>Links #2</dt>
<dd><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
<dd><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
<dd><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
</dl>
</td>
<td>
<dl>
<dt>Links #3</dt>
<dd><a href="#">link 31</a></dd>
<dd><a href="#">link 32</a></dd>
<dd><a href="#">link 33</a></dd>
<dd><a href="#">link 34</a></dd>
<dd><a href="#">link 35</a></dd>
<dd><a href="#">link 36</a></dd>
<dd><a href="#">link 37</a></dd>
<dd><a href="#">link 38</a></dd>
</dl>
</td>
<td>
<dl>
<!-- повторяющиеся вложенные ссылки-->
</dl>
</td>
</tr></table>
</li>

<!-- и другие повторяющиеся вложенные ссылки с подобной структурой -->
</ul>
<div style="clear:both"></div>
</div>
</body>
</html>

Шаг 2. Код CSS

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

css/style.css

/* стили демонстрационной страницы */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
position:relative;
background:#fff url(../images/background.jpg);
width:765px;
height:560px;
border:1px #000 solid;
margin:20px auto;
padding:20px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

/* стили главного меню */
.menu {
font-family:Verdana, sans-serif;
list-style:none;
margin:0;
min-height:35px;
padding:0;
position:relative;
width:100%
}
.menu li.main {
float:left;
padding-right:1px
}
.menu li.main a {
background-color:#000;
color:#fff;
display:block;
font-size:13px;
font-weight:700;
height:35px;
line-height:35px;
padding:0 25px;
text-decoration:none
}
.menu li.sub {
background-color:#444;
border:0;
clear:both;
float:left;
height:0;
overflow:hidden;
position:relative;
width:100%;

-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top;

-moz-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;

-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.menu li.sub table {
width:100%
}
.menu li.sub dl {
background-color:#fff;
height:195px;
margin:5px 5px 0 0;
padding:10px;

-moz-border-radius:8px;
border-radius:8px
}
.menu li.sub dt {
border:1px solid #000;
color:#000;
font-size:14px;
font-weight:700;
line-height:18px;
margin:1px 0;
padding:0 10px;

border-radius:5px;
-moz-border-radius:5px
}
.menu li.sub dt:hover {
background-color:#ccc
}
.menu li.sub dd {
margin:0;
padding:0
}
.menu li.sub dd a {
color:#666;
display:block;
font-size:12px;
line-height:20px;
padding-left:30px;
text-decoration:none;

-moz-border-radius:5px;
border-radius:5px
}
.menu li.sub dd a:hover {
background-color:#ccc;
color:#444
}
.menu li#has-sub1:hover ~ li#sub1,
.menu li#has-sub2:hover ~ li#sub2,
.menu li#has-sub3:hover ~ li#sub3,
.menu li#has-sub4:hover ~ li#sub4 {
height:240px;

-moz-transition: height 0.5s ease-in-out 0.2s
-ms-transition: height 0.5s ease-in-out 0.2s
-o-transition: height 0.5s ease-in-out 0.2s
-webkit-transition: height 0.5s ease-in-out 0.2s
transition: height 0.5s ease-in-out 0.2s
}
li#sub1:hover,
li#sub2:hover,
li#sub3:hover,
li#sub4:hover {
height:240px;
-moz-transition: height 0.5s ease-in-out 0.2s
-ms-transition: height 0.5s ease-in-out 0.2s
-o-transition: height 0.5s ease-in-out 0.25
-webkit-transition: height 0.5s ease-in-out 0.2s
transition: height 0.5s ease-in-out 0.2s
}

Шаг 3. Изображения

Вот единственное использованное изображение для фона демонстрационной страницы:

Демонстрация работы – Скачать исходный код

Заключение

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

Изначальная идея была взята у Stu Nicholls.

Автор урока Andrew Prikaznov

Смотрите также:

Опубликовано в css, сентября 13, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Меню с плавно выпадающими подпунктами с использованием CSS3

Шаг 1. Код HTML

Шаг 2. Код CSS

Шаг 3. Изображения

Заключение

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые