Меню с плавно выпадающими подпунктами с использованием 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: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
14 сентября 2015 в 8:18
Жаль что не адаптивное