Üst Açilir menü

Jquery İle Sayfa Üstüne Sabit Açılır Menü Ekleme

Jquery sayesinde bloglarımızın görselliğini ve işlevselliğini bir hayli arttırabiliyoruz.Bu yazıda vereceğim örnek te blogunuzun görselliğini ve kalitesini arttırmaya yönelik bir menü.

Dikey versiyonunda olduğu gibi yatay versiyonuna da ikonlardan faydalanıyoruz.Sayfa açıldığında smenünün sadece yazılı bölümü gözüküyor.Üzerine gelindiğinde ise aşağı doğru açılarak ikon gözüküyor.

Bu menüyü blogunuza eklemek isterseniz şablonunuzdan body kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.

<div class='clear'/> <style> ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 0px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; border:0; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#eeeeee; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.96; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#CAE3F2; } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; font-family:trebuchet-ms, arial, tahoma, Sans-Serif; font-weight:bold; text-shadow: 0 -1px 1px #fff; } ul#navigation .anasayfa a { background-image: url(http://icons.iconarchive.com/icons/delacro/once/48/Home-icon.png); } ul#navigation .hakkimda a { background-image: url(http://icons.iconarchive.com/icons/delacro/once/48/Friends-icon.png); } ul#navigation .takipet a { background-image: url(http://icons.iconarchive.com/icons/delacro/once/48/Link-icon.png); } ul#navigation .arsiv a{ background-image: url(http://icons.iconarchive.com/icons/delacro/once/48/Search-icon.png); } ul#navigation .iletisim a { background-image: url(http://icons.iconarchive.com/icons/delacro/once/48/Mail-icon.png); } </style> <script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'> </script> <script type='text/javascript'> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script> <ul id='navigation'> <li class='anasayfa'><a href='http://mobilika.blogspot.com'>Ana Sayfa</a></li> <li class='hakkimda'><a href='http://mobilika.blogspot.com/p/hakkmda.html'>Hakkımda</a></li> <li class='takipet'><a href='http://mobilika.blogspot.com/p/takip-et.html'>Takip Et</a></li> <li class='arsiv'><a href='http://mobilika.blogspot.com/p/arsiv.html'>Arşiv</a></li> <li class='iletisim'><a href='http://mobilika.blogspot.com/p/iletisim.html'>İletişim</a></li> </ul>

İsterseniz .png uzantılı ikonların yerine kendi ikonlarınızı kullanabilirsiniz.Menüde kendi sayfalarıma link verdim.Kodlarda benim bloguumua ait adreslerin yerine kendi sayfalarınıza ait adresleri yazın.