Вертикальное выпадающее меню на CSS

5 августа 2010 | Автор: | Категория: Уроки вёрстки

css стили Сегодня я приведу пример создания вертикального выпадающего меню оформленного с помощью CSS. Постараюсь задействовать как можно больше свойств css, чтобы наглядно показать, как можно оформить созданное меню. Меню будет полностью оформлено с использованием Каскадных таблиц стилей. Единственно, что пришлось сделать с помощью JavaScript, это эффект выпадающего меню для Internet Explorer, т.к одно из нужных свойств он всё таки не поддерживает.

Для начала нужно построить структуру нашего меню. Она будет состоять из ненумерованного базового списка включающего в себя списки-подменю.
index.html

<html>
<head>
<title>Вертикальное выпадающее меню на CSS</title>
<script type=»text/javascript» src=»cssmenu.js»></script>
<link rel=»stylesheet» type=»text/css» href=»style.css» />
</head>
<body>
<ul id=»nav»>
<li><a href=»#»>Главная страница</a></li>
<li><a href=»#»>Создание сайтов</a>
<ul>
<li><a href=»#»>Дизайн сайтов</a></li>
<li><a href=»#»>Вёрстка сайтов</a></li>
<li><a href=»#»>Оптимизация сайтов</a></li>
</ul>
</li>
<li><a href=»#»>Продвижение сайтов</a>
<ul>
<li><a href=»#»>SEO продвижение</a></li>
<li><a href=»#»>SMO продвижение</a></li>
</ul>
</li>
<li><a href=»#»>SEO биржи</a></li>
<li><a href=»#»>SEO софт</a></li>
</ul>
</body>
</html>

style.css

/* Убираем отступы и маркеры в ненумерованном списке, задаём ширину и стили оформления */
ul {
padding: 0;
margin: 0;
list-style: none;
width: 140px;
list-style: none;
border-bottom: 1px solid #C1D8E6;
font-size: 11px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
/* Задаём относительное позиционирование выпадающего списка */
ul li {
position: relative;
}
/* Задаём абсолютное позиционирование выпадающего списка, сдвиг влево на 139 px, чтобы выпадающее меню перекрывало главное и не создавалась двойная граница, по умолчанию выпадающий список будет скрыт */
li ul {
position: absolute;
left: 139px;
top: 0;
display: none;
}
/* Задаём стили для ссылок */
ul li a {
display: block;
text-decoration: none;
color: #003399;
background: #EAF4FF;
background-image: url(‘images/bullet-arrow.gif’) ;
background-repeat: no-repeat;
background-position: 1px 9px;
padding: 5 5 5 10;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Указываем браузеру, что подменю будет появляться, когда курсор находится над элементом списка. */
li:hover ul, li.over ul{
display: block;
}
/* Задаём стили для выпадающего меню */
ul li a:hover {
background: #77CF7F;
background-image: url(‘images/bullet-arrow.gif’) ;
background-repeat: no-repeat;
background-position: 1px 9px;
text-decoration: none;
}
/* ХАК для ie, чтобы и там всё корректно отображалось:)*/
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

JavaScript нужен, чтобы заставить выпадающее меню работать в Internet Explorer. В остальных браузерах должно работать без него.
cssmenu.js

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById(«nav»);
for (i=0; i

Вот так вот работает наше меню — Вертикальное выпадающее меню на CSS
Скачать Example1.zip

Для этой страницы комментарии закрыты.