<!--- KAYNAK: http://www.catlak-site55.tr.gg --->
-----------------------------------------------------------------Tasarım Üstüne-------------------------------------------------------------
<script type="text/javascript" src="http://catlaksite.iwoly.com/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://catlaksite.iwoly.com/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function () {
//Set the height of the block
$('#menu .block').height($('#menu li').height());
//go to the default selected item
topval = $('#menu .selected').position()['top'];
$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
$('#menu li').hover(
function() {
//get the top position
topval = $(this).position()['top'];
//animate the block
//you can add easing to it
$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
//add the hover effect to menu item
$(this).addClass('hover');
},
function() {
//remove the hover effect
$(this).removeClass('hover');
}
);
});
</script>
-------------------------------------------------------------Tasarım Üstü Bitiş---------------------------------------------------------------------------
----------------------------------------------------Menüyü Göstermek İstediginiz Yer----------------------------------------------------------
<div id="menu">
<ul>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li class="selected"><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
<li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li>
</ul>
<div class="block png"></div>
</div>
--------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş--------------------------------------------------
-----------------------------------------------------------------Css Kodu--------------------------------------------------------------------------------
#menu {
font-family:verdana;
font-size:12px;
position:relative;
margin:0 auto;
width:200px;
}
#menu ul {
/* remove list style */
list-style:none;
padding:0;
margin:0;
/* set the layer position */
position:relative;
z-index:5;
}
#menu li {
/* set the styles */
background:#ccc url(http://img.webme.com/pic/c/catlak-site55/vbg.gif) no-repeat 0 0;
padding:5px;
margin:2px;
cursor:pointer;
border:1px solid #ccc;
}
#menu li.hover {
/* on hover, change it to this image */
background-image:url(http://img.webme.com/pic/c/catlak-site55/bg_hover.gif) !important;
}
#menu li a {
text-decoration:none;
color:#888;
}
#menu .block {
/* allow javascript to move the block */
position:absolute;
top:0;
/* set the left position */
left:150px;
/* display above the #menu */
z-index:10;
/* the image and the size */
background:transparent url(http://img.webme.com/pic/c/catlak-site55/darrow.png) no-repeat top right;
width:39px;
padding:4px;
cursor:pointer;
}
/* fast png fix for ie6 */
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
----------------------------------------------------------------Css Kodu Bitiş-----------------------------------------------------------
Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
