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






 




Bu sayfa hakkındaki yorumlar:
Yorumu gönderen: dasd( ), 22.01.2012, 13:43 (UTC):
Arkadaşlar Bunu NapCaz



Bu sayfa hakkında yorum ekle:
İsmin:
E-mail adresin:
Mesajınız:

 
  bugun 35 ziyaretçi (118 klik) kişi kodlarbuldu  
 
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=
Copyright ©KODLARBUL ( YsF®2009 )Tüm Hakları saklıdır..