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

Jquery sayesinde web sitelerine görsel açıdan oldukça zengin öğeler eklemek mümün oluyor.Daha önce jquery ile oluşturulmuş dikey bir menü paylaşmıştım.Bu yazıda ise onun yatay versiyonu diyebileceğim bir menü paylaşacağım.

 

Jquery İle Sayfa Üstüne Sabit Açılır 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.Aşağıdaki video daha net anlatacaktır.

 

 

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;
$(&#39;#navigation a&#39;).each(function(){
$(this).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},d+=150);
});
$(&#39;#navigation &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-2px&#39;
},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},200);
}
);
});
</script>
<ul id='navigation'>
<li class='anasayfa'><a href='http://bloghocam.blogspot.com'>Ana Sayfa</a></li>
<li class='hakkimda'><a href='http://bloghocam.blogspot.com/p/hakkmda.html'>Hakkımda</a></li>
<li class='takipet'><a href='http://bloghocam.blogspot.com/p/takip-et.html'>Takip Et</a></li>
<li class='arsiv'><a href='http://bloghocam.blogspot.com/p/arsiv.html'>Arşiv</a></li>
<li class='iletisim'><a href='http://bloghocam.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.

15 yorum:

  1. hocam nereden buluyorsunuz bunları ?
    çok güzel elleriniz dert görmesin. :)

    dikey menüye göre daha bir görsellik katılmış bu na

    YanıtlaSil
  2. Teşekkürler.Takip ettiğim web development siteleri var.Oralara bunun gibi yüzlerce script paylaşılıyor.

    YanıtlaSil
  3. Elinize sağlık hocam. Çok fazla script kullanmak açılışı yavaşlatıyor ama demi?

    YanıtlaSil
  4. @Fırat Yalçın
    Elbette yavaşlatır.Dengeli kullanmak gerekir bu eklentileri.

    YanıtlaSil
  5. HOCAM öncellikle böyle faydalı bişey yaptığınz için teşekkür ederim benim sorunum şu ben blog yaptım ve payşaımlara göre bir tema buldum ve kendime göre dizayn ettim fakat yönlendirme işini yapamıorum blogumda şöyle butounlar var ANA SAYFA- LİGLERİMİZ (bu butona bağlı açılır iki buton var)- DÜNYADAN FUTBOL (buna bağlı 4 buton var) -FOTO diye buotnlar var yönlendirmeleri nasıl yapabilirim lütfrn yardım kaç blogda bunu yazdım ama yardım etten olmadı

    YanıtlaSil
  6. yönlendirme sorunu olan adsız kişinin sorunun devamı HOCAM ŞUANA BENZER BİR TEMA KULLANIYORUM http://bloghocam.blogspot.com/2011/04/bloggermint-blogger-temas.html

    YanıtlaSil
  7. Serdar abi bu menüye ek menüler nasıl ekleye biliriz mesela 5 pencere yerine 7 pencere lazım bana nasıl yapa biliriz ben yapamadımda

    YanıtlaSil
  8. @Hasan Ekşi
    Önce ul#navigation .hakkimda a gibi bir stil sınıfı tanımlayacaksın.Sonra o sınıfı kullanarak menüye yeni bir öğe satırı ekleyeceksin.Biraz meşakkatli iş.

    YanıtlaSil
  9. serdar abi cevap bekliyorum :D

    YanıtlaSil
  10. Çok saol abi gercekten guzel oldu.

    YanıtlaSil
  11. görsellik eklenirse süper olur

    YanıtlaSil
  12. çok teşekkür ederim sağolun

    YanıtlaSil
  13. body Kodunu nasıl bulcaz

    YanıtlaSil
  14. Peki kardeşim örneğin hakkında ya tıkladıgımızda yenı bır pencere açılacak ve bilgilerimiz görünecek onu bu vermiş olduğun koda nasıl ekleriz, acil halledebilirsen çok iyi olacak.:)

    YanıtlaSil

Blogger tarafından desteklenmektedir.