Jquery İle Dikey Sabit Açılır Menü

Jquery adı verilen Java Script kütüphanesini çok seviyorum.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ü.


Şimdi menüyü blogunuza nasıl ekleyeceğinize geçelim.
1.Adım: İlk olarak şablonunuzdan ]]></b:skin> kodunu bulun ve bunun hemen üstüne aşağıdaki kodları ekleyin.
ul#menusisi { position: fixed; margin: 0px; padding: 0px; top: 50px; left: 0px; list-style: none; z-index:9999; } ul#menusisi li { width: 100px; } ul#menusisi li a { display: block; margin-left: -50px; width: 100px; height: 55px; background-color:#141414; background-repeat:no-repeat; background-position:48px center; border:1px solid #cfcfcf; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; /*-moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; */ opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); } ul#menusisi .beranda a{ background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png); } ul#menusisi .tentang a{ background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png); } ul#menusisi .cari a{ background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png); } ul#menusisi .komentar a{ background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png); } ul#menusisi .rssfeed a{ background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png); } ul#menusisi .alat a{ background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png); } ul#menusisi .kontak a{ background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png); }

2.Adım: Şablonunuzdan </head> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.
<script src='http://www.google.com/jsapi'/> <script> google.load("jquery", "1.3.2"); </script> <script type='text/javascript'> $(function() { $('#menusisi a').stop().animate({'marginLeft':'-50px'},1000); $('#menusisi > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-50px'},200); } ); }); </script>

3.Adım: Son olarak şablonunuzdan </body> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.
<ul id='menusisi'> <li class='beranda'><a href='http://phtmldrive.blogspot.com/' title='Ana Sayfa'/></li> <li class='tentang'><a href='http://phtmldrive.blogspot.com/p/hakkmda.html' title='Hakkımda'/></li> <li class='cari'><a href='http://phtmldrive.blogspot.com/p/arsiv.html' title='Arşiv'/></li> <li class='alat'><a href='http://phtmldrive.blogspot.com/p/kaynaklar.html' title='Kaynaklar'/></li> <li class='rssfeed'><a href='http://phtmldrive.blogspot.com/p/takip-et.html' title='Takip Et'/></li> <li class='komentar'><a href='http://phtmldrive.blogspot.com/p/misafir-blogculuk.html' title='Misafir Blogculuk'/></li> <li class='kontak'><a href='http://phtmldrive.blogspot.com/p/iletisim.html' title='İletişim'/></li> </ul>

Düzenlemeniz Gereken Yerler

3.Adımdaki kodlarda menüdeki butonlara linkler verilmiştir.Ben örnek olması açısından blogumdaki sayfaların linklerini ekledim ( hakkımda, iletişim, takip et…vs.). Buradaki linkleri ve yanınlarındaki açıklamaları kendinize göre değiştirin.