Выпадающее меню с помощью CSS стилей без javascript

Чаще всего, когда Вебмастер хочет установить на сайт выпадающее, раскрывающееся меню (drop down menu), он начинает искать решение на javascript , dhtml или возможно что-то ещё более экзотическое.
Не будет подвергать сомнению функционал и мощность JAVASCRIPT . Но тем не менее с силой приходит и ответственность. Javascript нагружает браузер, а тот, в свою очередь, нагружает процессор и оперативную память, что может существенно сказаться на бюджетных мобильных устройствах и компьютерах старой модели.

На самом деле решение с drop down меню лежит на поверхности и легко выполняется средствами современных каскадные таблиц стилей CSS в связки с простым HTML .

Во-первых, напишем CSS часть нашего будущего выпадающего меню:
<style>
ul li{
/* Как видим, меню построено на элементах HTML, списках, тегах LI */
list-style: none;
/* чтобы список не выглядел списком, а выглядел как меня , отключаем боковые маркеры: точки, цифры - всё это нам не нужно */
width: 200px;
text-align: center;
background-color: #FFF300;
/* просто минимальная настройка внешнего вида наших пунктов - ширина, выравнивание текста, цвет фона */
}
.top-menu .top-menu-point{
/* опишем свойства верхних пунктов - шапок, они видны по умолчанию, при наведении на текст внутри этих элементов, выпадают скрытые под-пункты */
float: left;
/* обтекание по левому краю */
height: 50px;
/* высота ячейки пункта */
position: relative;
/* расположение относительное */
}
.hide-menu{
/* пункты меню скрытые по-умолчанию */
position: absolute;
left: 0px;
top: 50px;
/* расположение абсолютное, сверху отступ 50 пикселей, что совпадает с высотой верхней ячейки */
margin: 0px;
padding: 0px;
display: none;
/* последний пункт особенно важен, он делает срытой меню, собственно - скрытым */
}
.top-menu .top-menu-point:hover ul.hide-menu,
.top-menu .top-menu-point.hover ul.hide-menu{
display: block;
/* здесь происходит волшебство, скрытые пункты появляются их небытия. За это отвечает параметр hover . Он говорит : когда мышка наведена на соответствующий пункт class="top-menu-point" принадлежащего верхнему меню с class="top-menu" , дочерним пунктам меню с class="hide-menu" присваивается свойства display: block; */
}
</style>

Осталось написать html часть страницы с нашим меню:
<ul class="top-menu">
<li class="top-menu-point">Top Menu 1
<ul class="hide-menu">
<li class="hide-menu-point">Hiden Menu 1-0</li>
<li class="hide-menu-point">Hiden Menu 1-1</li>
<li class="hide-menu-point">Hiden Menu 1-2</li>
</ul>
</li>
<li class="top-menu-point">Top Menu 2
<ul class="hide-menu">
<li class="hide-menu-point">Hiden Menu 2-0</li>
<li class="hide-menu-point"><a href="#">Hiden Menu 2-1</a></li>
<li class="hide-menu-point">Hiden Menu 2-2</li>
</ul>
</li>
<li class="top-menu-point">Top Menu 3
<ul class="hide-menu">
<li class="hide-menu-point"><a href="#">Hiden Menu 3-0</a></li>
<li class="hide-menu-point">Hiden Menu 3-1</li>
<li class="hide-menu-point">Hiden Menu 3-2</li>
</ul>
</li>
</ul>

Всё! Работа закончена, меню сделано , пример разобран. Теперь единственное что нам остается – это посмотреть как это работает и поиграть с оформлением пунктов меню, поменять цвета, бордюры, добавить прозрачность и тени.

Опубликовано 04.08.2015 в 02:33 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: CSS, HTML · Теги: , , , , , , ,