DropDown üst-menü çalışması

Sitenizde kullandığınız zaman sayfanın en üstünde  sabit  bir şekilde duruyor menü örneğimiz. Sayfa aşağı yukarı kaydırdıkça sayfa ile beraber  o da aşağı ve yukarı doğru kayıyor. Mouse ile linklerin üzerine geldiğinizde  alt menü çerçevesi açılıyor.  Çerçeve yüksekliği biraz kalın olsa da tasarım gayet başarılı. Linklerin başlıklarında  da text-shadow yani yazılara Css gölge efekti eklenmiş. Drop down açılan alt kategori listesindeki linklerin üzerine mouse gelince  adeta  linkler içeri batıyor. Hafif 3 boyutlu bir  görünümü  var yatay üst menü örneğinde.

 Kullanım

• Head etiketleri arasına eklenmesi gereken bölümler.

Js dosya adresi : 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>

 JavaScript : 

<script type='text/javascript'>
$(document).ready(function(){
$("ul.subnav, ul.subnav_last").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav, ul.subnav_last").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){  
$(this).parent().find("ul.subnav, ul.subnav_last").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>

 Css : 

#top-wrapper{background:url(img/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 40px 7px}
#top a.arrow{background-image:url(img/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 30px 7px 20px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: ""}""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

    <div id='fixed'>
    <div id='fixedinner'>
    <div id='top-wrapper'>
    <div id='topbar'>
    <ul id='top'>
    <li><a href='/'><span>Welcome</span>Homepage</a></li>
    <li><a href='#'><span>This is</span>About Us</a></li>

    <li><a class='arrow' href='#'><span>M 1</span>Description Here</a>
    <ul>
    <li><a href='#'>Sub 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>M 2</span>Description Here</a>
    <ul>
    <li><a href='#'>Sub 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>M 3</span>Description Here</a>
    <ul>
    <li><a href='#'>Sub 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub 4</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub 5</a></li>
    </ul>
    </li>

    <br class='clearit'/>
    </div>
    <div style='clear:both;'/>
    </div>
    </div></div>