JS на меню

shashma88

Registered
Някой може ли да ми направи и моето меню като това: gcolor.org/art/
Ето кода на менюто

Код:
<div id="navbar">
<ul>

<li><a href="index.php">Начало</a></li>
<li><a href="index.php?p=">Начало</a></li>
<li><a href="index.php?p=">Начало</a></li>
<li><a href="index.php?p=">Начало</a></li>
<li><a href="index.php?p=">Начало</a></li>
<li><a href="index.php?p=">Начало</a></li>
<li><a href="index.php?p=">Начало</a></li>
<li><a href="index.php?p=">Начало</a></li>
<li><a href="index.php?p=">Начало</a></li>

</ul>
</div>

Дайте ми и js-то което да вкарам. Благодаря много!
 
Дай си css кода на менюто, защото ми трябва да знам колко ще е висок всеки елемент li и да преправя кода... :roll:
Направо, ако те мързи архивирай менюто и картинките, че може да се бъгне нещо и ми прати линк.
 
Код:
#navbar {
margin: 0 auto;
padding: 0;
position: relative;
height: 28px;
background: #9c0 url(images/nav-bg.png) 0 0 repeat-x;
font-weight: bold;
color: #fff;
}

#navbar ul {
margin: 0;
padding: 0;
float: left;
}

#navbar li {
padding: 0 2px 0 0;
margin: 0;
float: left;
background: url(images/nav-sep.png) 100% 0 no-repeat;
}

#navbar ul li a:link, #navbar ul li a:active, #navbar ul li a:visited {
display: block;
float: left;
padding: 0 20px;
height: 28px;
line-height: 28px;
color: #fff;
text-decoration: none;
}

#navbar ul li a:hover {
background: url(images/nav-bg.png) 0 100% repeat-x;
}


#navigmenu ul li {
display: block;
font-size: 11px;
margin: 0 0 3px 0;
font-weight: bold;
}

#navigmenu ul li a {
display: block;
border: 1px #fff dotted;
padding: 3px 0 3px 11px;
font-size: 11px;
color: #444;
text-decoration: none;
}

#navigmenu ul li a:hover {
background: #FFFFCC no-repeat;
border: 1px #d9d9d9 solid;
color: #7CAD00;
}
 
Сложи този код там, където ти е менюто и кажи дали го искаш така ..

Код:
<script type="text/javascript">

$(function()
{



	$("#navbar li").hover(function() {
		$(this) .stop()  .animate({
		marginTop: "-5px"
		
			     }, 300)
	}, (function() {
		   
		   $(this) .stop() .animate ({
			
		marginTop: "0px"
		
				}, 300)
		   
		   }));



 


});


</script>
 

Back
Горе