Горизонтальное выпадающее меню на CSS
Здравствуйте, сегодня вашему вниманию будет представлена возможность реализации горизонтального выпадающего меню на CSS. За основу самого меню мы возьмем горизонтальное резиновое меню, из недавнего урока. И опираясь на это меню, реализуем выпадающие блоки. Приступим к структуре html кода и напишем следующее:
<html>
<head>
<title>Горизонтальное выпадающее меню на CSS</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul class="top-menu">
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">Раздел 1</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="#">Раздел 2</a>
<ul>
<li>
<a href="#">Подпуннкт 1</a>
</li>
<li>
<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>
</ul>
</li>
<li>
<a href="#">Раздел 4</a>
<ul>
<li>
<a href="#">Подпуннкт 1</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
В отличие от прошлого меню, мы установили класс для элемента списка и добавили внутрь элементов li, после ссылок еще список, который и будет выпадать при наведении курсора мыши на пункт меню. Приступим к CSS стилям:
#menu {
width: 100%;
}
#menu .top-menu {
display: table-row;
list-style: none;
margin: 0;
padding: 0;
}
#menu .top-menu li {
display: table-cell;
position: relative;
}
#menu .top-menu li a {
background: #ccc;
color: #000;
display: table-cell;
padding: 10px 0;
text-align: center;
text-decoration: none;
width: 1000px;
}
#menu .top-menu li a:hover {
background: #aaa;
}
#menu .top-menu ul {
background: #eee;
border-radius: 10px;
display: none;
margin: 0;
padding: 10px 0;
position: absolute;
left: 30px;
top: 43px;
}
#menu .top-menu ul li {
display: block;
}
#menu .top-menu ul li a {
background: #eee;
}
#menu .top-menu li:hover ul {
display: block;
}
#menu .top-menu ul::after {
border: 15px solid transparent;
border-bottom: 15px solid #eee;
content: '';
position: absolute;
left: 42%;
top: -30px;
}
Все, мы полностью реализовали горизонтальное выпадающее меню на CSS, Вам осталось лишь скопировать этот код и вставить на своем сайте, но конечно лучше всего было бы полностью разобраться, как оно работает. Вы можете добавлять новые пункты меню, подпункты к ним и все замечательно будет работать.
Немного поясню действия, которые были предприняты для вложенных элементов списка. Мы задали немного другой цвет фона, чтобы он отличался от основного меню, убрали отступы, но добавили сверху и снизу поля, для того чтобы можно было установить радиус закругления, установили абсолютное позиционирование, и задали соответственное расположение, и скрыли наш элемент. Ко всему этому, чтобы позиционирование было верным, я добавил относительное позиционирование для элемента списка, в котором находятся эти подпункты. Следующим действием мы переопределяем свойство display у элемента списка, и делаем его блочным, также переопределяем цвет ссылок выпадающего меню. При наведении на пункт меню курсора мыши, если у него имеются подпункты, то они открываются, заменяя значение none, на значение block. Убрав курсор мыши, блок вновь исчезает. И последнее действие, мы реализуем треугольник, который указывает на наш пункт, из которого исходят подпункты меню. Эта возможность выполнена при помощи рамок. Вкратце скажу, что мы устанавливаем значение пятнадцать пикселей для рамки, в результате мы получаем некоторый квадрат, но устанавливаем прозрачный цвет, и задаем при помощи нижней рамки другой цвет для нашего треугольника, таким образом, мы получаем в нашей части треугольник. Вы все более детально поймете, если установите цвет для рамки не прозрачный, а например черный. Тогда и пояснений не потребуется. И в конечном итоге позиционируем этот треугольник в подходящее для нас место. Все на этом реализация меню полностью завершена, до скорого.
