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.

 

 

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.

Paylaş

BLOG SEO , teknoloji

Melisa