Данная справочная статья расскажет о том, как самостоятельно, быстро и просто создавать выпадающие меню, используя лишь свойства CSS. В ней представлена подробная информация о верстке, с примерами стилей для горизонтального и вертикального меню.
HTML структура
HTML код для любого выпадающего меню практически всегда одинаков, разница заключается лишь в указании и количестве применяемых селекторов.Код для самого простого двухуровневого выпадающего меню будет выглядеть примерно так:
<ul class='menu'>
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a>
<ul> <!--выпадающий блок-->
<li><a href="#">Some page</a></li>
<li><a href="#">Some page</a></li>
<li><a href="#">Some page</a></li>
</ul>
</li>
<li><a href="#">Section 3</a>
<ul> <!--выпадающий блок-->
<li><a href="#">Some page</a></li>
<li><a href="#">Sub-section</a>
<ul> <!--выпадающий блок второго уровня-->
<li><a href="#">Some page</a></li>
<li><a href="#">Some page</a></li>
<li><a href="#">Some page</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Как видим, меню строится на применении HTML списков - это просто и удобно, однако возможно сверстать такое меню на основе других HTML-тегов. В любом случаи, выпадающие блоки могут состоять не только из ссылок, в них возможно включать самые различные блочные и строчные элементы, например блоки с описанием или дополнительные изображения.<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a>
<ul> <!--выпадающий блок-->
<li><a href="#">Some page</a></li>
<li><a href="#">Some page</a></li>
<li><a href="#">Some page</a></li>
</ul>
</li>
<li><a href="#">Section 3</a>
<ul> <!--выпадающий блок-->
<li><a href="#">Some page</a></li>
<li><a href="#">Sub-section</a>
<ul> <!--выпадающий блок второго уровня-->
<li><a href="#">Some page</a></li>
<li><a href="#">Some page</a></li>
<li><a href="#">Some page</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Принцип действия и CSS
Итак, принцип действия выпадающих меню всегда одинаков - изначально перед посетителем обычное меню, но в ответ на какое-либо с ним действие(наведение курсора или клик) появляются дополнительные блоки - подменю. Такой подход позволяет размещать довольно большой объем ссылок для удобства навигации по сайту, занимая при этом минимум полезного пространства.Популярность таких меню обусловлена тем, что подобного эффекта (выпадения-появления) можно добиться используя лишь свойства CSS, без внедрения JavaScript.
В большинстве случаев чтобы "оживить" меню, т.е. сделать его непосредственно "выпадающим", манипулируют CSS свойством display с различными значениями - none для сокрытия и block или inline-block для появления выпадающего блока.
Для сокрытия/появления блоков можно применять и иные свойства CSS, чаще это делается когда к меню применяется эффекты CSS3-анимации
В зависимости от потребностей и дизайна сайта, тип выпадающего меню может быть вертикальным, горизонтальным, реже линейным. Структура кода CSS всегда сходна, но есть и отличия для различных типов.Пример кода CSS горизонтального меню:
/*обнуление стилей*/
*{
margin: 0;
padding: 0;
border: none;
}
ul, li {
list-style-type: none; /*убираем маркеры списка*/
}
li a {
text-decoration: none; /*убираем подчеркивание ссылок*/
}
/*меню*/
.menu li {
position: relative; /*позиционирование*/
float: left; /*обтекание слева*/
}
.menu ul {
position: absolute; /*позиционирование выпадающих блоков*/
display: none; /*скрываем блоки*/
min-width: 150px; /*минимальная ширина выпадающих блоков*/
}
.menu li:hover > ul {
display: block; /*показываем блоки при наведении курсора на родителя*/
}
/*положение выпадающих блоков первого уровня*/
.menu ul {
left: 0;
top: 100%;
}
/*положение вложенных выпадающих блоков*/
.menu li ul li ul{
left: 100%;
top: 0%;
}
RESULT*{
margin: 0;
padding: 0;
border: none;
}
ul, li {
list-style-type: none; /*убираем маркеры списка*/
}
li a {
text-decoration: none; /*убираем подчеркивание ссылок*/
}
/*меню*/
.menu li {
position: relative; /*позиционирование*/
float: left; /*обтекание слева*/
}
.menu ul {
position: absolute; /*позиционирование выпадающих блоков*/
display: none; /*скрываем блоки*/
min-width: 150px; /*минимальная ширина выпадающих блоков*/
}
.menu li:hover > ul {
display: block; /*показываем блоки при наведении курсора на родителя*/
}
/*положение выпадающих блоков первого уровня*/
.menu ul {
left: 0;
top: 100%;
}
/*положение вложенных выпадающих блоков*/
.menu li ul li ul{
left: 100%;
top: 0%;
}
При верстке вертикального выпадающего меню необходимо:
- точно указать ширину (width) всего блока меню (в данном случаи для селектора .menu);
- свойство обтекания float для основных разделов не указывается. Для всех выпадающих блоков можно указать одно положение, относительно основного.
Тогда код CSS будет выглядеть примерно так:
Теперь, чтобы сделать выпадающее меню для сайта в полном смысле этого слова, нужно лишь дополнить уже имеющийся "скелет", записывая для необходимых селекторов свойства CSS с желаемыми значениями. - точно указать ширину (width) всего блока меню (в данном случаи для селектора .menu);
- свойство обтекания float для основных разделов не указывается. Для всех выпадающих блоков можно указать одно положение, относительно основного.
Тогда код CSS будет выглядеть примерно так:
.menu {
width: 150px; /*ширина всего блока*/
}
.menu li {
position: relative;
}
.menu ul {
position: absolute;
display: none;
min-width: 150px;
}
.menu li:hover > ul {
display: block;
}
/*положение всех выпадающих блоков*/
.menu li ul {
left: 100%;
top: 0%;
}
width: 150px; /*ширина всего блока*/
}
.menu li {
position: relative;
}
.menu ul {
position: absolute;
display: none;
min-width: 150px;
}
.menu li:hover > ul {
display: block;
}
/*положение всех выпадающих блоков*/
.menu li ul {
left: 100%;
top: 0%;
}
Пример CSS простейшего оформления:
/*меню*/
.menu {
background: #000;
border: 1px solid #666;
border-radius: 3px;
height: 40px;
}
.menu li {
position: relative;
float: left;
height: 40px;
}
/*ссылки*/
.menu li a {
display: block;
padding: 0 5px;
margin: 3px;
font: normal normal 14px/28px Tahoma, sans-serif;
color: #FFF;
}
.menu li:hover > a {
background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
position: absolute;
display: none;
background: #666;
border: 1px solid #999;
min-width: 150px;
}
.menu li:hover > ul {
display: block;
}
.menu ul {
left: 0;
top: 100%;
}
.menu li ul li ul{
left: 100%;
top: 0%;
}
RESULT.menu {
background: #000;
border: 1px solid #666;
border-radius: 3px;
height: 40px;
}
.menu li {
position: relative;
float: left;
height: 40px;
}
/*ссылки*/
.menu li a {
display: block;
padding: 0 5px;
margin: 3px;
font: normal normal 14px/28px Tahoma, sans-serif;
color: #FFF;
}
.menu li:hover > a {
background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
position: absolute;
display: none;
background: #666;
border: 1px solid #999;
min-width: 150px;
}
.menu li:hover > ul {
display: block;
}
.menu ul {
left: 0;
top: 100%;
}
.menu li ul li ul{
left: 100%;
top: 0%;
}
Применение различных свойств для сокрытия выпадающих блоков
Как было замечено выше, наиболее часто применяемое CSS свойство, которое используют для того чтобы скрыть/показать дополнительные блоки - display. Однако, оно далеко не основное, получить желаемый эффект возможно и применяя иные свойства, например overflow или смещая выпадающий блок далеко за видимую область экрана с помощью свойств top или left.Вариант кода с использованием св-ва overflow
.menu {
background: #000;
border: 1px solid #666;
border-radius: 3px;
height: 40px;
}
.menu li {
position: relative;
float: left;
height: 40px;
overflow: hidden; /*все блоки вне видимой области будут скрыты*/
}
/*ссылки*/
.menu li a {
display: block;
padding: 0 5px;
margin: 3px;
font: normal normal 14px/28px Tahoma, sans-serif;
color: #FFF;
}
.menu li:hover > a {
background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
position: absolute;
*display: none;
background: #666;
border: 1px solid #999;
min-width: 150px;
}
.menu li:hover {
overflow: visible; /*при наведении покажет скрытую область*/
}
.menu ul {
left: 0;
top: 100%;
}
.menu li ul li ul{
left: 100%;
top: 0%;
}
Вариант кода с использованием св-ва topbackground: #000;
border: 1px solid #666;
border-radius: 3px;
height: 40px;
}
.menu li {
position: relative;
float: left;
height: 40px;
overflow: hidden; /*все блоки вне видимой области будут скрыты*/
}
/*ссылки*/
.menu li a {
display: block;
padding: 0 5px;
margin: 3px;
font: normal normal 14px/28px Tahoma, sans-serif;
color: #FFF;
}
.menu li:hover > a {
background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
position: absolute;
*display: none;
background: #666;
border: 1px solid #999;
min-width: 150px;
}
.menu li:hover {
overflow: visible; /*при наведении покажет скрытую область*/
}
.menu ul {
left: 0;
top: 100%;
}
.menu li ul li ul{
left: 100%;
top: 0%;
}
.menu {
background: #000;
border: 1px solid #666;
border-radius: 3px;
height: 40px;
}
.menu li {
position: relative;
float: left;
height: 40px;
}
/*ссылки*/
.menu li a {
display: block;
padding: 0 5px;
margin: 3px;
font: normal normal 14px/28px Tahoma, sans-serif;
color: #FFF;
}
.menu li:hover > a {
background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
position: absolute;
background: #666;
border: 1px solid #999;
min-width: 150px;
top: -9999em; /*изначальное смещение выпадающих блоков*/
}
.menu li:hover > ul {
left: 0;
top: 100%;
}
.menu li ul li:hover > ul {
left: 100%;
top: 0%;
}
RESULTSbackground: #000;
border: 1px solid #666;
border-radius: 3px;
height: 40px;
}
.menu li {
position: relative;
float: left;
height: 40px;
}
/*ссылки*/
.menu li a {
display: block;
padding: 0 5px;
margin: 3px;
font: normal normal 14px/28px Tahoma, sans-serif;
color: #FFF;
}
.menu li:hover > a {
background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
position: absolute;
background: #666;
border: 1px solid #999;
min-width: 150px;
top: -9999em; /*изначальное смещение выпадающих блоков*/
}
.menu li:hover > ul {
left: 0;
top: 100%;
}
.menu li ul li:hover > ul {
left: 100%;
top: 0%;
}
Данные методы на сегодняшний день становятся все более популярными, т.к. позволяют применять к выпадающим меню анимационные эффекты доступные в CSS3.
Использование CSS3 анимации
Эффекты, применяемые к появляющимся блокам меню могут быть самыми разными, например: плавное проявление или развертывание выпадающего блока.DEMO
Таких результатов позволяет добиться использование свойства transition, которое плавно изменять значения свойств элемента.
.menu {
background: #000;
border: 1px solid #666;
border-radius: 3px;
height: 40px;
}
.menu li {
position: relative;
float: left;
height: 40px;
overflow: hidden;
}
/*ссылки*/
.menu li a {
display: block;
padding: 0 5px;
margin: 3px;
font: normal normal 14px/28px Tahoma, sans-serif;
color: #FFF;
}
.menu li:hover > a {
background: #0C6;
}
.menu ul {
position: absolute;
background: #666;
border: 1px solid #999;
/*установленные начальные параметры*/
width: 0px;
opacity: 0;
/*параметры применяемой анимации*/
-webkit-transition: all .25s ease .1s;
-moz-transition: all .25s ease .1s;
-o-transition: all .25s ease .1s;
-ms-transition: all .25s ease .1s;
transition: all .25s ease .1s;
}
.menu li:hover {
overflow: visible;
}
/*приобретаемые параметры при наведении на родителя*/
.menu li:hover > ul {
opacity: 1;
width: 150px;
}
.menu ul {
left: 0;
top: 100%;
}
.menu li ul li ul{
left: 100%;
top: 0%;
}
background: #000;
border: 1px solid #666;
border-radius: 3px;
height: 40px;
}
.menu li {
position: relative;
float: left;
height: 40px;
overflow: hidden;
}
/*ссылки*/
.menu li a {
display: block;
padding: 0 5px;
margin: 3px;
font: normal normal 14px/28px Tahoma, sans-serif;
color: #FFF;
}
.menu li:hover > a {
background: #0C6;
}
.menu ul {
position: absolute;
background: #666;
border: 1px solid #999;
/*установленные начальные параметры*/
width: 0px;
opacity: 0;
/*параметры применяемой анимации*/
-webkit-transition: all .25s ease .1s;
-moz-transition: all .25s ease .1s;
-o-transition: all .25s ease .1s;
-ms-transition: all .25s ease .1s;
transition: all .25s ease .1s;
}
.menu li:hover {
overflow: visible;
}
/*приобретаемые параметры при наведении на родителя*/
.menu li:hover > ul {
opacity: 1;
width: 150px;
}
.menu ul {
left: 0;
top: 100%;
}
.menu li ul li ul{
left: 100%;
top: 0%;
}
Параметры для свойства transition задаются в следующем порядке:
[свойство|продолжительность анимации|тип анимации|пауза перед выполнением]
Например:
transition: height 1s easy-in .5s;
Что на словах можно истолковать как: плавно изменить высоту элемента, в течении 1 секунды, ускоряясь в завершении, начав анимацию с паузой в полсекунды.
Значении all указывает что анимация должна воздействовать на все доступные свойства.
Подобные эффекты можно применять как для блока, так и для каждого элемента в отдельности.[свойство|продолжительность анимации|тип анимации|пауза перед выполнением]
Например:
Значении all указывает что анимация должна воздействовать на все доступные свойства.
На этом, пожалуй, все. Надеюсь данная заметка будет полезна и поможет понять основные моменты и принципы верстки выпадающих меню с применением только каскадных таблиц стилей. Остается только пожелать удачных дизайнерских решений.
©http://magentawave.com
Восхитительно. Спасибо за подробное описание!
ОтветитьУдалитьКак мне выровнять по центру пункты меню, такие как section1 и section2?
ОтветитьУдалитьНе могу понять,что делает универсальный селектор "*" перед display:block в варианте, с Overflov? Подскажет кто-нибудь?
ОтветитьУдалитьЭто не универсальный селектор, а прием чтобы аннулировать и наглядно показать что это свойство в этом данном не нужно и не используется.
Удалить