Выпадающее меню на CSS
Пару дней назад я показывал Вам, как можно создать вертикальное меню при помощи CSS. Сегодня я хочу показать и научить создавать выпадающее меню на CSS. Чем хорошо использование такого меню ? Прежде всего, это хорошо тем, что мы не будем использовать никаких скриптов и язык Javascript. Выпадающее меню на CSS, довольно легкое в реализации, а также оно является достаточно кроссбраузерным. И в принципе, лучше не использовать Javascript, если подобную задачу возможно реализовать на языке CSS. А теперь переходим к реализации:
<html>
<head>
<title>Выпадающее меню</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">Меню 1</a>
<ul>
<li>
<a href="#">Пункт 1</a>
</li>
<li>
<a href="#">Пункт 2</a>
</li>
<li class="last">
<a href="#">Пункт 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Меню 2</a>
<ul>
<li>
<a href="#">Пункт 1</a>
</li>
<li class="last">
<a href="#">Пункт 2</a>
</li>
</ul>
</li>
<li>
<a href="#">Меню 3</a>
<ul>
<li>
<a href="#">Пункт 1</a>
</li>
<li>
<a href="#">Пункт 2</a>
</li>
<li>
<a href="#">Пункт 3</a>
</li>
<li>
<a href="#">Пункт 4</a>
</li>
<li>
<a href="#">Пункт 5</a>
</li>
<li class="last">
<a href="#">Пункт 6</a>
</li>
</ul>
</li>
<li>
<a href="#">Меню 4</a>
<ul>
<li class="last">
<a href="#">Пункт 1</a>
</li>
</ul>
</li>
<li class="last">
<a href="#">Меню 5</a>
<ul>
<li>
<a href="#">Пункт 1</a>
</li>
<li>
<a href="#">Пункт 2</a>
</li>
<li>
<a href="#">Пункт 3</a>
</li>
<li class="last">
<a href="#">Пункт 4</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
При помощи языка CSS, создаем выпадающее меню:
#menu {
width: 200px;
}
#menu ul {
background: #a7d922;
border: 1px solid #000;
border-radius: 10px;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
position: relative;
}
#menu ul li a {
border-bottom: 1px solid #000;
color: #00f;
display: block;
padding: 10px 0 10px 10px;
text-decoration: none;
}
#menu ul ul {
background: #a7d922;
border-radius: 0 10px 10px 0;
border: 1px solid #000;
position: absolute;
top: -9999px;
left: -9999px;
width: 150px;
}
#menu ul li:hover {
background: #ccc;
border-radius: 10px;
}
#menu ul li:hover ul {
left: 198px;
top: -1px;
}
#menu .last > a {
border-bottom: none;
}
На этом мы завершили процесс создания меню, и можете посмотреть результат на экране:
Начнем разбираться, каким образом мы реализовали такое меню. В основе создания меню лежит ненумерованный список, в элементах li находятся ссылки, а также еще один ненумерованный список, в котором мы размещаем подпункты меню. Это вся html структура, которая понадобится для реализации выпадающего меню. Вкратце разберем CSS код. Первым делом мы устанавливаем фиксированную ширину для создаваемого меню, задаем цвет фона, рамку, закругленные углы, в принципе все идентично, как и при создании обычного меню, основное отличие я сейчас поясню. Мы задаем для элементов li, относительное позиционирование, а для подпунктов меню - абсолютное позиционирование, благодаря которому, при наведении курсора на элемент li, указываем нужное местоположение наших подпунктов. Это и является основным и самым главным отличием от обычного меню. Но я советую Вам самим разобраться в данном коде, чтобы понять каким образом все это действует, а сейчас мы завершим статью, и встретимся уже в новой!
