web-touristАнимирано меню с jQuery
Автор: RiddleR
Здравейте на всички ,
сега ще ви споделя едно анимирано меню доста удобно и красиво и дано и на вас да ви хареса …
да си направим менюто ,
версия 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/
Това е, дано ви хареса 🙂
