> , > jQuery

jQuery


21 2011, 13:10. : Mysterious Master
, , . , . jQuery.

     jQuery

, !



HTML div- , . 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&#225;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>

DIV . , , , , . , div , div , .. ( 112 ).

.

CSS-

, ( , - .) . div .

.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}

, , div , .
:

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;
}

javascript ul hovered, . , .

.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;
}

, , :

ul.oe_menu div ul.oe_full{
width:100%;
}

, , 150 . , :

ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
}

, , , :

li.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
}

! , jQuery.

javascript-

, , , . , , HTML. , HTML- . , z-index, , .

, :

var $oe_menu= $('#oe_menu');
var $oe_menu_items= $oe_menu.children('li');
var $oe_overlay= $('#oe_overlay');

, slided selected. div , . , z-index . , selected:

$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');
});

selected , slided - , , .

, , . 0.0, 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();
})

! , , .

|
! .