Topic: Выпадающее верхнее меню для сайта на CSS
Есть много способов сделать выпадающее меню для сайта, но мы рассмотрим самый простой основанный на чистом CSS. В теме приведены рвзные варианты выпвдающего меню уже с готовой HTML страницей.
Итак, вначале приведу разметку для меню, а затем виды CSS.
Создадим файл menu.html и поместим в него след. код.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar" lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Верхнее выпадающее меню</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div>
<ul id="menu">
<li><a href="#">Выпадающее №1</a></li>
<li>
<a href="#">Выпадающее №2</a>
<ul>
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
<li><a href="#">Подпункт №3</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>
</ul>
</li>
<li>
<a href="#">Пункт №4</a>
<ul>
<li><a href="#">Подпункт №1</a></li>
</ul>
</li>
<li>
<a href="#">Пункт №5</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>
</ul>
</li>
</ul>
</div>
</body>
</html>Один из следующих вариантов стиля для выпадающего меню подключить вставив в разметку страницы.
Выпадающее меню 1
<style>
#menu {
padding: 0;
margin: 0;
font-size: 100%;
font-family: Georgia;
}
#menu li {
list-style: none;
float: left;
height: 33px;
padding: 0;
margin: 0;
width: 150px;
text-align: center;
background: #171717;
position: relative;
padding-top: 12px;
}
#menu li ul {
list-style: none;
padding: 0;
margin: 0;
width: 150px;
display: none;
position: absolute;
left: 0;
top: 45px;
}
#menu li ul li {
float: none;
height: 33px;
margin: 0;
width: 150px;
text-align: center;
background: #7F7F7F;
}
#menu li a {
display: block;
width: 150px;
height: 33px;
color: #fff;
text-decoration: none;
}
#menu li:hover ul, #menu li.jshover ul {
display: block;
}
#menu li:hover, #menu li.jshover {
background: #424242;
}
</style>
Выпадающее меню 2 (css встроен в разметку)
<style>
#nav7, #nav7 ul, #nav7 li {
margin: 0;
padding: 0;
}
#nav7, #nav7 ul {
background: rgb(46,95,122);
}
#nav7 { /* подменю перемещается относительно меню */
position: relative;
display: table;
width: 100%;
}
#nav7 ul { /* подменю находится вне потока */
position: absolute;
z-index: 5;
display: none;
}
#nav7 li:hover ul { /* подменю будет показано, если курсор наведён на пункт меню с выпадающем списком */
display: block;
}
#nav7 li {
display: table-cell;
text-align: center;
}
#nav7 ul li {
display: block;
text-align: left;
}
#nav7 .right { /* последнее подменю будет расширяться справа налево */
direction: rtl;
}
#nav7 .right ul { /* для IE, решение найдено случайно, где связь ??? */
right: 0;
}
#nav7 .right li { /* последнее подменю будет расширяться справа налево, но не пункты последнего подменю */
direction: ltr;
}
#nav7 a {
display: block;
padding: 3px 0;
color: #fff;
text-decoration: none;
}
#nav7 ul a {
padding: 3px 15px;
}
#nav7 li:hover {
background: rgb(96,145,172);
}
</style>
<ul id="nav7">
<li><a href="#1">Выпадающее 1</a>
<li><a href="#2">Выпадающее 2</a>
<ul>
<li><a href="#2-1">Подменю 1</a>
<li><a href="#2-2">Подменю 2</a>
<li><a href="#2-3">Подменю 3</a>
<li><a href="#2-4">Подменю 4</a>
</ul>
<li><a href="#3">Выпадающее 3</a>
<ul>
<li><a href="#3-1">Подменю 1</a>
<li><a href="#3-2">Подменю 2</a>
</ul>
<li class="right"><a href="#4">Выпадающее 4</a>
<ul>
<li><a href="#4-1">Подменю 1</a>
<li><a href="#4-2">Подменю 2</a>
<li><a href="#4-3">Подменю 3</a>
</ul>
</ul>Цвет и размер выпадающего верхнего меню можно настроить по своему вкусу.
