Google tarzı Menü Yapmak
Google tarzı Menü Yapmak
HtmlKodu
HtmlKodu
<div class="menu">
<ul>
<li>
<a href="#">More Examples
<span class="arrow"></span>
</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<ul>
<div>
Css Kodu
body{
padding:0;
margin:0;
}
.menu{
font: 13px/27px Arial,sans-serif;
color:#3366CC;
height:30px;
background: url(back.gif) repeat-x;
}
.menu a:hover{
background-color:#e4ebf8;
}
.menu a {
text-decoration: none;
padding: 4px 8px 7px;
color:#3366CC;
outline:none;
}
.menu ul{
list-style: none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin: 0 0 0 0px;
width:100%;
}
.menu ul li ul{
position: absolute;
border: 1px solid #C3D1EC;
box-shadow: 0 1px 5px #CCCCCC;
margin-top: -1px;
display:none;
padding: 0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.active a{
background-color: white;
border: 1px solid #C3D1EC;
border-bottom: 0;
box-shadow: 0 -1px 5px #CCCCCC;
display: block;
height: 29px;
padding: 0 8px 0 8px;
position:relative;
z-index: 1;
}
.active a:hover{
background-color:white;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border: 0 !important;
box-shadow: 0 0 0 #CCCCCC;
border:0;
width: 100%;
}
.arrow {
border-color: #3366CC transparent transparent;
border-style: solid dashed dashed;
margin-left: 5px;
position: relative;
top: 10px;
}
JavaScrip Kodu
(function($){ $.fn.fixedMenu=function(){ return this.each(function(){ var menu= $(this); menu.find('ul li > a').bind('click',function(){ if ($(this).parent().hasClass('active')){ $(this).parent().removeClass('active'); } else{ $(this).parent().parent().find('.active').removeClass('active'); $(this).parent().addClass('active'); } }) }); } })(jQuery);