zyblog Keşke Burada Paylaş saydın Menüleri .
Reklam Amaçlı Değil Demişsin.Ancak Forumda Reklama Giriyor.Yinede Saol Menüler İçin
Kodlar Bana Ait Değil Bedava Kod veren Bir Sitenin Kodları İsteyen Kullana Bilir .
Mac Menüsüne Benzer Site İçin
Kod: <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>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
<style type="text/css">
#yukari {
width: 100%;
bottom: 0px;
position: fixed;
left: 0px;
}</style>
<div id="yukari">
<!--bottom dock -->
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="/Ana-Sayfa.htm"><span>Ana Sayfa</span><img src="http://img.webme.com/pic/e/expert-production/home.png" alt="home" /></a>
<a class="dock-item2" href="/%26%23304%3Bleti%26%23351%3Bim.htm"><span>İletişim</span><img src="http://img.webme.com/pic/e/expert-production/email.png" alt="contact" /></a>
<a class="dock-item2" href="/T.ue.m-Kategoriler.htm"><span>Kategoriler</span><img src="http://img.webme.com/pic/e/expert-production/portf.png" alt="portfolio" /></a>
<a class="dock-item2" href="/Payla%26%23351%3B%26%23305%3Bm.htm"><span>Web Dersleri</span><img src="http://img.webme.com/pic/e/expert-production/music.png" alt="music" /></a>
<a class="dock-item2" href="/Video.htm"><span>Video</span><img src="http://img.webme.com/pic/e/expert-production/video.png" alt="video" /></a>
<a class="dock-item2" href="/Tarih.htm"><span>Tarih</span><img src="http://img.webme.com/pic/e/expert-production/history.png" alt="history" /></a>
<a class="dock-item2" href="/Eklenenler.htm"><span>Yeni Eklenenler</span><img src="http://img.webme.com/pic/e/expert-production/calendar.png" alt="calendar" /></a>
<a class="dock-item2" href="/yardim_platform.htm"><span>Yardım PlatFormu</span><img src="http://img.webme.com/pic/e/expert-production/link.png" alt="links" /></a>
<a class="dock-item2" href="/Haberler.htm"><span>RSS</span><img src="http://img.webme.com/pic/e/expert-production/rss.png" alt="rss" /></a>
<a class="dock-item2" href="/Haberler.htm"><span>RSS2</span><img src="http://img.webme.com/pic/e/expert-production/rss2.png" alt="rss" /></a>
</div>
</div>
<!--dock menu JS options -->
</div>
Kod: a, a:visited {
outline: none
}
img {
border: none;
}
/* dock - top */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(http://img.webme.com/pic/e/expert-production/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;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url(http://img.webme.com/pic/e/expert-production/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}