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ü.

Resimde gördüğünüz dikey menü Jquery ile yapılmıştır ve sabittir.Yani sayfayı aşağıya kaydırsanız bile o menü hep gözükecektir.Ayrıca menüdeki butonların üzerine geldiğinizde sağa  doğru slide efektiyle açılır.Menünün nasıl göründüğünü ve nasıl çalıştığını resme bakarak anlamak zor.Bu yüzden aşağıdaki videoyu hazırladım.Videoyu izleyerek daha net anlayabilirsiniz.

Ş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(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
$(function() {
$(&#39;#menusisi a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},1000);
$(&#39;#menusisi &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},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://bloghocam.blogspot.com' title='Ana Sayfa'/></li>
<li class='tentang'><a href='http://bloghocam.blogspot.com/p/hakkmda.html' title='Hakkımda'/></li>
<li class='cari'><a href='http://bloghocam.blogspot.com/p/arsiv.html' title='Arşiv'/></li>
<li class='alat'><a href='http://bloghocam.blogspot.com/p/kaynaklar.html' title='Kaynaklar'/></li>
<li class='rssfeed'><a href='http://bloghocam.blogspot.com/p/takip-et.html' title='Takip Et'/></li>
<li class='komentar'><a href='http://bloghocam.blogspot.com/p/misafir-blogculuk.html' title='Misafir Blogculuk'/></li>
<li class='kontak'><a href='http://bloghocam.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.

Paylaş

BLOG SEO , teknoloji

Melisa