Выпадающее меню на CSS

Итак, учимся делать выпадающее меню на HTML и CSS. Рабочий пример можно посмотреть ниже – просто наведите мышь, кстати, на мобильных устройствах этот меню реагирует на клик мышью.

Пример меню

Текст

Нам нужен следующий код:

1
2
3
4
<div  class="ourstorymenu" onclick="location.href=\'';" style="cursor:pointer;" >
Бесфосфатная  бытовая химия
<div class="ourstorymenu2"><span style="padding:15px">Текст</span></div>
</div>
<div  class="ourstorymenu" onclick="location.href=\'';" style="cursor:pointer;" >
Бесфосфатная  бытовая химия
<div class="ourstorymenu2"><span style="padding:15px">Текст</span></div>
</div>

И, соответственно, необходимые стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.ourstorymenu{
    display: block;
    position:relative;
    float:left;
    width: 185px;
    height: 55px;
    background: url('images/nav_sprite_story_bg.jpg');
    color: white;
    z-index:50;
{
.ourstorymenu2 {
    visibility: hidden;
    width:185px;
    height:125px;
    background:url('images/bg-our-story-megamenu-background.jpg');
}
.ourstorymenu:hover .ourstorymenu2{
      visibility: visible;  
}
.ourstorymenu:hover {
    background:url('images/nav_sprite_story_bg.jpg');
    background-position:0 55px;
}
.ourstorymenu{
	display: block;
	position:relative;
	float:left;
	width: 185px;
	height: 55px;
	background: url('images/nav_sprite_story_bg.jpg');
	color: white;
	z-index:50;
{
.ourstorymenu2 {
	visibility: hidden;
	width:185px;
	height:125px;
	background:url('images/bg-our-story-megamenu-background.jpg');
}
.ourstorymenu:hover .ourstorymenu2{
      visibility: visible;  
}
.ourstorymenu:hover {
	background:url('images/nav_sprite_story_bg.jpg');
	background-position:0 55px;
}

Давайте разберем первый блок кода. Блок ourstorymenu2 является скрытым (visibility: hidden), также он является дочерним по отношению к блоку ourstorymenu. Таким образом, при наведении мыши (hover) на блок ourstorymenu мы можем используя наследственность изменять свойства блока ourstorymenu2. Это делается в данном месте кода.

1
2
3
.ourstorymenu:hover .ourstorymenu2{
      visibility: visible;  
}
.ourstorymenu:hover .ourstorymenu2{
      visibility: visible;  
}

С помощью css можно задать внешний вид и расположение блоков. В приведенном css в качестве фона заданы изображения.
Обращаем ваше внимание на то, что порядок описания divов в css нарушать нельзя!
Адреса ссылок указываются между одинарных кавычек в конструкции href.
Пример меню можно увидеть на сайте ecostoreua.com.

Запись опубликована в рубрике Блог, Дизайн, Разработка. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">