| Уроки CSS |
| Создание вертикального выпадающего меню CSS |
В данном уроке будет подробно рассмотрено создание вертикального меню с выпадающими пунктами. Для основы возьмём меню из предпредыдущего урока.
Для создания меню будет применён класс .drop_vert_menu;
В коде несколько раз встретиться запись подобно этой .drop_vert_menu > li
Стрелка > указывает на дочерний селектор (li)
Для того что бы добавить подпункты к пункту меню - нужно перед закрывающимся тегом </li> «вставить как бы» ещё одно меню (то есть теги <ul></ul> внутри которых будут пункты <li></li>).
Основные параметры в CSS-стилях для выпадающего меню:
top: 2px; - определяет на сколько пикселей вниз будет отступать раскрывающееся подменю;
left: 195px; - размер отступа от левого края;
position: relative; - пункты будут располагаться один за другим, а не сожмутся в кучу;
position: absolute; - означает, что пункты основного меню будут находиться в фиксированном положении относительно подпунктов;
display: none; - элемент невидим (его как бы нет).
display: block; - означает что подпункты этого меню будут «резиновыми, как блок» - если название подпункта большое, то он растянется в высоту.
Так же в CSS – коде будет присутствовать параметр:
border-top: 1px solid White; - с помощью него можно регулировать размер и цвет отступа между пунктами меню; То есть вы будете регулировать толщину и цвет верхней рамки. А отступы ещё можно регулировать с помощью атрибута – margin … ;
Значение остальных параметров вам должно быть знакомо из предыдущих уроков по CSS, а так же уроков HTML.
Создайте два файла: drop_vert_menu.css и test_menu.html. Предпологается, что эти файлы находятся в одной директории.
Содержание файла drop_vert_menu.css
.drop_vert_menu {
list-style-type: none;
width: 198px;
margin: 0;
padding: 0;
}
.drop_vert_menu ul {
list-style-type: none;
width: 180px;
margin: 0;
padding: 0;
}
.drop_vert_menu > li{
position: relative;
background: url(images/vert_css_menu_0.png) no-repeat 0 0;
padding:10px 0px 10px 16px;
border-top: 1px solid White;
}
.drop_vert_menu > li:hover {
background: url(images/vert_css_menu_1.png) no-repeat 0 0;
}
.drop_vert_menu > li > a{
font-size:18px;
color: White;
text-decoration:none;
}
.drop_vert_menu li ul {
position: absolute;
display: none;
top: 2px;
left: 195px;
}
.drop_vert_menu li:hover ul {
display: block;
}
.drop_vert_menu li ul li{
text-align:left;
background: #59C113;
padding: 8px 0px 8px 10px;
}
.drop_vert_menu li ul li:hover {
background: #87DA50;
}
.drop_vert_menu li ul li a{
font-size:14px;
color:White;
text-decoration:none;
}
.drop_vert_menu li ul li a:hover{
font-size: 14px;
color: White;
text-decoration:none;
}
Содержание файла test_menu.html
<html>
<head>
<title>Выпадающие вертикальные меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href=" drop_vert_menu.css " type="text/css" />
</head>
<body>
<ul class="drop_vert_menu">
<li><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Контакты</span></a>
<ul>
<li><a href="#"><span>Телефон</span></a></li>
<li><a href="#"><span>E-mail</span></a></li>
<li><a href="#"><span>Адреса</span></a></li>
</ul>
</li>
<li><a href="#"><span>О сайте</span></a>
<ul>
<li><a href="#"><span>История</span></a></li>
<li><a href="#"><span>Коллектив</span></a></li>
</ul>
</li>
<li><a href="#"><span>Карта сайта</span></a></li>
<li><a href="#"><span>Ссылки</span></a></li>
</ul>
</body>
</html>
Безусловно можно сделать нечто более интересное, чем это меню. Всё что вам нужно – это найти примеры меню, которые примерно похожи на те, что у вас в воображении и изучить их, для того что бы потом переделать.
Самый лучший способ изучения в таком случае будет – «метод тыка». То есть вы видите параметр задающий цвет или размера -> изменяете это параметр на другой и смотрите, что произойдёт и т.д. И уже после нескольких переделок вы сможете самостоятельно (без чужих примеров) сделать то, что вам нужно.
| ◄ Предыдущий урок | Содержание | Следующий урок ► |
