Nav with Arrow

Nav with Arrow

HTML
———————-
<ul class=”nav”>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
<li><a href=”#”>Item 5</a></li>
<li><a href=”#”>Item 6</a></li>
<li><a href=”#”>Item 7</a></li>
<li><a href=”#”>Item 8</a></li>
<li><a href=”#”>Item 9</a></li>
<li><a href=”#”>Item 10</a></li>
</ul>

CSS
———————-
ul.nav{
float:left;
position:relative;
height:40px;
}

ul.nav li{
line-height:40px;
float:left;
list-style-type:none;
}
ul.nav li a{
display:block;
background:#000;
color:#fff;
text-decoration:none;
padding:0 10px;
}

ul.nav li a:hover{
background:#ccc;
}
ul.nav li#more a{
color:red;
}

.moreLi{
position:absolute;
right:0;
top:40px;
width:200px;
display:none;
}

.moreLi li{
float:none!important;
}

ul.nav li#more .moreLi li a{
color:#fff;
}

JQUERY
———————-

$(window).load(function() {
if ($(‘.nav > li’).length > 6) {
$(‘.nav’).append(‘<li id=”more”><a href=”#”>more<ul class=”moreLi”></ul></li>’);
$(‘.nav li:gt(5):not(#more)’).appendTo(‘#more ul’);
}

$(“#more”).hover(function(){
$(“.moreLi”).slideDown();
});
$(“#more”).mouseleave(function(){
$(“.moreLi”).hide();
});

});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s