- В этом уроке мы создадим простое меню, которое будет выделяться (весь экран, кроме самого меню, будет затемнен - эффект наложения) при наведении на него мышкой. Подобное можно сделать благодаря jQuery.
Структура HTML будет состоять из главного оберточного слоя для меню, который будет содержать наложение и неупорядоченный список элементов меню. Меню само по себе будет содержать непосредственно ссылку и элемент div в качестве подменю элементов списка. Каждый из элементов подменю будет содержать список колонок, в которых будут заголовки наших ссылок.
Код: Выделить всё
<div class="oe_wrapper">
<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
<li>
<a href="">Collections</a>
<div>
<ul>
<li class="oe_heading">
Summer 2011
</li>
<li><a href="#">Milano</a></li>
...
</ul>
<ul>
...
</ul>
<ul>
...
</ul>
</div>
</li>
<li>
<a href="">Projects</a>
<div style="left:-111px;">
...
</div>
</li>
<li>
<a href="">Fragrances</a>
<div style="left:-223px;">
<ul class="oe_full">
<li class="oe_heading">
Fashion Fragrances
</li>
<li><a href="#">Deálure</a></li>
<li><a href="#">Violet Woman</a></li>
<li><a href="#">Deep Blue for Men</a></li>
<li><a href="#">New York, New York</a></li>
<li><a href="#">Illusion</a></li>
</ul>
</div>
</li>
<li><a href="">Events</a>
<div style="left:-335px;">
...
</div>
</li>
<li><a href="">Stores</a>
<div style="left:-447px;">
...
</div>
</li>
</ul>
</div>
Давайти посмотрим на стили!
CSS
Убедитесь, что для начала Вы сделаете сброс стилей (нам не нужны отступы браузеров по умолчанию). Начнем с наложения, которое по сути является простым слоем с изначальной прозрачностью 0.
Код: Выделить всё
.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
Код: Выделить всё
ul.oe_menu{
list-style:none;
position:relative;
margin:30px 0px 0px 40px;
width:560px;
float:left;
clear:both;
}
Код: Выделить всё
ul.oe_menu > li{
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
}
Код: Выделить всё
ul.oe_menu > li > a{
display:block;
background-color:#101010;
color:#aaa;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:90px;
height:80px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}
Код: Выделить всё
.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
Код: Выделить всё
ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:498px;
height:180px;
padding:30px;
display:none;
}
Код: Выделить всё
ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
}
view source
print?
Код: Выделить всё
ul.oe_menu div ul.oe_full{
width:100%;
}
Код: Выделить всё
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
}
view source
Код: Выделить всё
li.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
}
JavaScript
Главная идея заключается в появлении наложения и затемнении всего экрана, кроме области меню. Наложению всего экрана будет под меню, так как оно было размещено ранее в коде. В свою очередь наложение остается поверх всего остального, так как идет перед структурой HTML. Таким образом, z-indexы в правильном порядке.
Для начала кешируем элементы:
Код: Выделить всё
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
Код: Выделить всё
$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});
Теперь позаботимся о наложении. Мы поменяем прозрачность до 0.6 и добавим класс “hovered” нашему оберточному слою, чтобы якоря (анкоры) оставались белыми.
Код: Выделить всё
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 0);
$oe_menu_items.children('div').hide();
})
Источник: ruseller.com