11 Kasım 2011 Cuma

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

18 yorum

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

Jquery İLe Dikey Sabit Açılır 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.

18 yorum:

  1. Güzelmiş.Peki hocam ikonları nasıl değiştireceğiz ?

    YanıtlaSil
  2. İlk bölümdeki kodlarda tüm ikonların linkleri var, onları değiştirebilirsiniz.Örneğin ana sayfa ikonu için değiştirmeniz gereken link şu: http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png

    YanıtlaSil
  3. herşey tamam fakat sizin linkleri silip kendiminkileri eklemeyi beceremedim galiba nasıl yapabilirim...

    YanıtlaSil
  4. 3.adımda yazdığım kodlardaki linkleri kendi linklerinizle değiştirirseniz sorun olacağını sanmıyorum.

    YanıtlaSil
  5. sa hocam benim bir sorunum var blogger temamı bu şekilde yapabilirmiyim eger yapabilirsim nasıl yaparım http://2.bp.blogspot.com/-6Dfv4WzWe8I/TsJRDNSKJdI/AAAAAAAAA0Y/vuGCJLZ1wVg/s1600/cvhr.PNG bu linkte ki gibi her yayından sonra aralarda çizgi olacak post menu kenarı renginde şimdiden tşk ederim kolay gelsin

    YanıtlaSil
  6. Cevher onu yapmak çok basit.Şablondaki CSS kodlarında .post { diye bir kod olucaktır.Parantez kapanmadan border-bottom: 1px solid #ff0000; kodunu eklersen kırmızı renkli yazılar arasında görünür.Eğer çizginin kalınlığını arttırmak istiyorsan 1px değerini değiştir, rengi içinde ff0000 değerini değiştir.

    YanıtlaSil
  7. tşk ler hocam sagol eline saglık;)

    YanıtlaSil
  8. Hocam bir ricam olacak. Ben ikonları değiştirmek istiyorum fakat bu ikonları nerden bulup değiştireceğim. Yani bu ikonların yer aldığı bir adres var mı? Yoksa kendimizmi yüklemeliyiz?

    YanıtlaSil
  9. İkonları ilk adımda verdiğim kodlardan değiştirebilirsiniz.Örneğin ana sayfa ikonunu değiştirmek için http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png yerine istediğiniz ikonun urlini yazın.

    İkonları kendiniz picasa veya başka bir resim barındırma sitesine yüklemelisiniz.

    YanıtlaSil
  10. Çok teşekkür ederim. Şimdi oldu. İlginiz için teşekkürler...

    YanıtlaSil
  11. hazır ikon barındıran bir site mevcut mudur?

    YanıtlaSil
  12. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  13. Hocam gerçekten çok güzel durdu. Teşekkürler.

    YanıtlaSil
  14. acaba soldan açılma yerine yukarıdan açılma şeklinde ayarlamak için neresiyle oynamamız gerekir? yukarıdan açılan şekilde yapıp sağ üste yaslamak istiyorum. hiçbir şeyi değiştirmesek bile illa ki bir kaç ufak pozisyon oynamasıyla olacaktır diye düşünüyorum ama bulamadım.

    YanıtlaSil

  15. Menünün pozisyonu 1. kodlardaki top ve left yazan yerlerden, açılma efekti de ikinci kodlardaki javascript animate satırından ayarlanıyor

    YanıtlaSil

Picardes

LİNKLER