Site Tasarım Kodları Webmaster Sitesi
  css dock menu indir sitene ekle
 
css dock menü indir html ve css kodları kodları










homecontactportfoliomusicvideohistorycalendarrss

Download CSS Dock Menu

(View Demo)






Tr.gg Sitelerinde kullanımı :


 Iceblue Tasarımı Kullananlar İçin ;

1-Aşağıdaki kodu tasarımın Üstü bolumunde ilk sıraya koyun 


<script type="text/javascript" src="http://www.ndesign-studio.com/demo/css-dock-menu/js/jquery.js"></script>
<script type="text/javascript" src="http://www.ndesign-studio.com/demo/css-dock-menu/js/interface.js"></script>
 
<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->
<style type="text/css">
 
 
/* dock - top */
.dock {
position: relative; 
height: 50px; 
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(https://img.webme.com/pic/k/kodlarbul/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none; 
margin: 5px 10px 0px; 
width: 100%; 
}
.dock-item span {
display: none; 
padding-left: 20px;
}
 
 
</style>       
 
 
 
<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="http://kodlarbul.tr.gg"><img src="https://img.webme.com/pic/k/kodlarbul/home.png" alt="home" /><span>Ana Sayfa</span></a> 
  <a class="dock-item" href="http://kodlarbul.tr.gg/iletisim.htm"><img src="https://img.webme.com/pic/k/kodlarbul/email.png" alt="contact" /><span>İletisim Formu</span></a> 
  <a class="dock-item" href="http://kodlarbul.tr.gg/PROGRAM-INDIR.htm"><img src="https://img.webme.com/pic/k/kodlarbul/portfolio.png" alt="portfolio" /><span>Program İndir</span></a> 
  <a class="dock-item" href="http://inbir.net"><img src="https://img.webme.com/pic/k/kodlarbul/music.png" alt="music" /><span>Film izle</span></a> 
  <a class="dock-item" href="http://kodlarbul.tr.gg"><img src="https://img.webme.com/pic/k/kodlarbul/video.png" alt="video" /><span>Video</span></a> 
  <a class="dock-item" href="http://kodlarbul.tr.gg"><img src="https://img.webme.com/pic/k/kodlarbul/history.png" alt="history" /><span>History</span></a> 
  <a class="dock-item" href="http://kodlarbul.tr.gg"><img src="https://img.webme.com/pic/k/kodlarbul/calendar.png" alt="calendar" /><span>Calendar</span></a> 
  <a class="dock-item" href="http://kodlarbul.tr.gg"><img src="https://img.webme.com/pic/k/kodlarbul/rss.png" alt="rss" /><span>RSS</span></a> 
</div>
</div>
 
2- Aşagıdaki kodu Tasarımın altı bölümünde en alta koyun


<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
 
 
</script>


3- Linkleri Sitenize göre düzenleyin ; 

İconları arttırabılır yada azaltabilirsiniz , iconların gorunumunu begenmediyseniz yenileriyle değistirebilirsiniz boyutları onemli değil css otomatik boyutloandıracaktır.
Eğer temanızın en tepesinde yapısık değilde biraz daha aşagısında görünmesini istiyorsanız;

dock {
position: relative; 
height: 50px; 
text-align: center;

kodunun hemen altına  '  top: ?px;   ' kodunu ekleyip ? nin yerine istediginiz px i giriniz   örnek: top: 200px;


İconların boyutlarını değistirmek istersenizde tasarımın altına koydugununz kodlardaki ( itemWidth: 40, )kodunu değiştirerek iconlara istediğiniz kadar büyütüp kücültebilirsiniz...

Menüyü başka sekillerdede kulana biliyorsunuz mesela sitenin altında yada hem altında hamde ustunde benim bu işimi gordugu için onları denemedim yukarıdaki linkten indirip indirim deneyebilirsiniz..
 






 
 
  bugun 7 ziyaretçi (200 klik) kişi kodlarbuldu  
 
Copyright ©KODLARBUL ( YsF®2009 )Tüm Hakları saklıdır..

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol