Как правило меню такого типа делают с помощью вложенных друг в друга маркированных списков, устанавливая элементам списка различные значения фона в зависимоти от того, какой пункт меню в данный момент активен. Единственное, что при этом нужно учитывать - высота актианого пункта меню верхнего уровня растягивается на высоту отображаемых вложенных пунктов. Впрочем это легко решается добавлением дескриптроа "top" к свойству background.
Попробуем сверстать вот такое меню:
Попробуем сверстать вот такое меню:
Для верстики заголовка и низа меню воспользуемся методом, который я уже описывал ранее. Границы меню и его пунктов сделаем с помощью border.
Изображения, которые нам понадобятся:
- Картинки для верстки заголовка меню;-
- Картинки для верстки подвала меню;
-
- Картинки маркеров пунктов меню;
<html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="menu-module">
<!-- Заголовок меню -->
<img alt="" src="images/lbar.png" class="lbar top_bar">
<img alt="" src="images/rbar.png" class="rbar top_bar">
<h3 class="mbar menu-header">Навигация</h3>
<!-- Список пунктов меню -->
<ul class="nav menu">
<li class="item"><a href="#">Главная</a></li>
<li class="item active deeper parent">
<a href="#">DataLife Engine</a>
<ul class="nav-child unstyled small">
<li class="item"><a href="#">Хаки</a></li>
<li class="item"><a href="#">Модули</a></li>
<li class="item current active"><a href="#">Релизы</a></li>
<li class="item"><a href="#">Баги/Фиксы</a></li>
</ul></li>
<li class="item parent"><a href="#">Invision Power Board</a></li>
<li class="item parent"><a href="#">vBulletin</a></li>
<li class="item parent"><a href="#">phpBB</a></li>
</ul>
<!-- Подвал меню -->
<img alt="" src="images/bottom_left_menu_bar.png" class="lbar bottom_bar">
<img alt="" src="images/bottom_right_menu_bar.png" class="rbar bottom_bar">
<div class="mbar menu_bottom"></div>
</div>
</body>
</html>
Поскольку нижняя граница последнего пункта меню у нас задается в подвале, то при написании CSS-стилей для остальных пунктов будем отображать только верхнюю границу. Также необходимо учесть, что верхняя граница не нужна под активным пунктом меню верхнего уровня, для этого используем стиль ".menu-module .menu li:FIRST-CHILD". В итоге CSS-стили получатся следующие:
/* --- Общие настройки обтекания блоков ---*/
.lbar {
display: block; float: left;
}
.rbar {
display: block; float: right;
}
.mbar {
margin-top: 0px; margin-bottom: 0px;
}
.clr {
clear:both;
}
/* --- Заголовок меню --- */
.menu-module {
max-width: 300px;
margin: 100px;
}
.menu-module .top_bar {
width: 8px; height: 34px;
}
.menu-header {
height: 34px;
background: url('../images/mbar.png');
margin: 0px 8px; padding-left: 20px;
font-size: 12px; color: #fff; line-height: 34px;
}
/* --- Пункты меню --- */
.menu-module ul {
list-style: none;
}
.menu-module .menu {
border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;
}
.menu-module .menu li {
border-top: 1px solid #ccc;
}
.menu-module .menu li:FIRST-CHILD {
border-top: none;
}
.menu-module .menu a {
height: 25px; margin-left: 10px; padding-left: 10px;
display: block;
background: url('../images/inactivebullet.png') left no-repeat;
line-height: 25px;
}
.menu-module .menu .active {
background: url('../images/active_background.png') top repeat-x;
}
.menu-module .menu .active a {
margin-left: 30px; padding-left: 10px;
background: url('../images/activebullet.png') left no-repeat;
color: #fff;
}
.menu-module .menu ul .active {
background: none;
}
.menu-module .menu ul a {
background: none !important;
color: #000 !important;
}
.menu-module .menu ul li.current a {
background: url('../images/currentbullet.png') left no-repeat !important;
}
/* --- Подвал меню --- */
.menu-module .bottom_bar {
width: 11px; height: 11px;
}
.menu_bottom {
height: 11px;
background: url('../images/bottom_medium_menu_bar.png');
margin: 0px 11px;
}
Проверка доменов на занятость, проверка списком, подбор доменов по ключевым словам, поиск похожих доменов
Перейти
