Анимирано меню с jQuery
Здравейте на всички ,
сега ще ви споделя едно анимирано меню доста удобно и красиво и дано и на вас да ви хареса ...
DEMO

така 1 .

да си направим менюто ,

версия 1

<ul id="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>

<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>


версия 2


<ul id="topnav" class="v2">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>

<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>


между <head> и </head>

слагаме това :

<style type="text/css">

body {
margin: 0; padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;

}

h1 {
font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
color: #fff;
margin: 0;
text-align: center;
padding: 5px 0;
}
h1 small{
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.4em;
display: block;
color: #ccc;
}
.container {
width: 520px;
height: 330px;
position: absolute;
top: 50%; left: 50%;
margin: -165px 0 0 -210px;
overflow: hidden;
}
img {border: none;}
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(a_bg.gif) repeat-x left bottom;
}
</style>



отново между <head> и </head>

слагаме това :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">


$(document).ready(function() {


$("#topnav li").prepend("<span></span>");

$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});

$("#topnav li").hover(function() {
$(this).find("span").stop().animate({
marginTop: "-40"
}, 250);
} , function() {
$(this).find("span").stop().animate({
marginTop: "0"
}, 250);
});


});
</script>




Източник: http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/

Това е, дано ви хареса :)




/ Трябва да сте регистриран за да напишете коментар /
От: alex95_bg_2
22:49 13-09-2009
супер е :)
От: vik96
19:50 17-09-2009
Няма демо :S
От: federer_11
18:47 04-11-2009
има демо :)
От: ReD_z0n3
15:18 17-04-2010
Много е яко :)
От: narc0
9:48 24-04-2010
Перфектно :))
От: webdeveloper
12:55 04-05-2010
V2 нещо не работи... явно картинките му липсват?
От: SpeeDeRa
22:51 09-04-2011
Дайте клипче защото аз като направя сичко тфа и не ми излиза червено меню
От: p0nk
18:53 10-04-2011
супер е меню-то за тези който незнаят ,да ми пишат ЛС !
1