MOBİLİKA: açılır menü

<br />
<h1 class="post-title entry-title" style="background-color: white; font-family: Verdana, Arial, sans-serif; font-size: 26px; line-height: 1.2em; margin: 0px 0px 8px; padding: 0px 0px 5px; text-shadow: rgb(79, 84, 88) 0.02em 0.02em 0.17em;">
<a href="http://bloghocam.blogspot.com/2012/08/jquery-ile-sayfa-ustune-sabit-aclr-menu.html" style="color: black; display: block; margin: 0px; padding: 0px; text-decoration: none;">Jquery İle Sayfa Üstüne Sabit Açılır Menü Ekleme</a></h1>
<div class="post-header" style="background-color: white; background-image: none; color: #333333; font-family: Verdana, Arial, sans-serif; font-size: 10px; height: 21px; line-height: 19.5px; margin: 0px; padding: 0px;">
<span class="post-author vcard" style="float: left; line-height: 21px; margin: 0px; padding: 0px 0px 0px 10px;"></span><span style="font-size: 13px;">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ü.</span></div>
<div class="post-body entry-content" style="background-color: white; color: #333333; font-family: Verdana, Arial, sans-serif; font-size: 13px; line-height: 19.5px; margin: 0px; padding: 10px 0px;">
<div style="padding: 0px;">
<br />
<br /></div>
<div style="padding: 0px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPGcL3wnPzIwynpmg6UDOsH-i8-zFOg7_32Kf_Bi8lGfFRiZqppvKAAnGbfGSH4RiZ0ugOOHoVOENynlnl3dNkAAmM8lAThO_3T7Bu5SyQbzZUsEhdNSCKX2E_xRhlNZjnbIu6QxC-bdU2/s1600-h/sayfa-ustune-sabit-acilir-menu5.png" style="color: #669900; margin: 0px; padding: 0px; text-decoration: none;" target="_blank"><img alt="Jquery İle Sayfa Üstüne Sabit Açılır Menü" border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipypWzlPCFBX-XMKBzFtFO4rO8bvNeiKkW9eb85Wo5ry4ebYuMMh0tmheKFbMMGrb2AXXe0gE6RYUeGHBSkqY362xnLbcqo6mzvbArDjDHoWEBvv0FubirQG4WSCqqgw3d-9HLdfhB5CBi/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin: 0px auto; padding: 0px 0px 5px;" title="Jquery İle Sayfa Üstüne Sabit Açılır Menü" width="442" /></a></div>
<div style="padding: 0px;">
<br /></div>
<div style="padding: 0px;">
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.<br />
<br />
Bu menüyü blogunuza eklemek isterseniz şablonunuzdan body <span style="background-color: transparent;">kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.</span></div>
</div>
<div style="padding: 0px;">
</div>
<textarea class="bginput" cols="42" name="mobilika.blogspot.com/, html kodları" rows="200" style="height: 1000px; width: 600px;"><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; 
$('#navigation a').each(function(){ 
$(this).stop().animate({ 
'marginTop':'-80px' 
},d+=150); 
}); 
$('#navigation > li').hover( 
function () { 
$('a',$(this)).stop().animate({ 
'marginTop':'-2px' 
},200); 
}, 
function () { 
$('a',$(this)).stop().animate({ 
'marginTop':'-80px' 
},200); 
} 
); 
}); 
</script> 
<ul id='navigation'>
<li class='anasayfa'><a href='http://mobilika.blogspot.com'>Ana Sayfa</a></li>
<li class='hakkimda'><a href='http://mobilika.blogspot.com/p/hakkmda.html'>Hakkımda</a></li>
<li class='takipet'><a href='http://mobilika.blogspot.com/p/takip-et.html'>Takip Et</a></li>
<li class='arsiv'><a href='http://mobilika.blogspot.com/p/arsiv.html'>Arşiv</a></li>
<li class='iletisim'><a href='http://mobilika.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.

Üst Açilir menü

Jquery İle Sayfa Üstüne Sabit Açılır Menü Ekleme Jquery sayesinde bloglarımızın görselliğini ve işlevselliğini bir hayli arttırabiliyoru...

Devamı »