css dock menü indir html ve css kodları kodları
(
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..
