> , CSS/Style Sheets > CSS3

CSS3


17 2010, 16:25. : Mysterious Master
CSS3. CSS3. CSS3, jQuery. , !

- -

1. CSS3 Safari Chrome

2. jQuery

, . , , HTML. 2 div- li. div- li, , CSS, ul, . li, ul div- , . , HTML-. CSS.

HTML-:

<div id="menu-demo">
<ul>
<li>
<div id="up"><a href="#">Home</a></div>
<div id="slide"><a href="#">Home</a></div>
</li>

<li>
<div id="up"><a href="#">About Us</a></div>
<div id="slide"><a href="#">About Us</a></div>
</li>

<li>
<div id="up"><a href="#">Services</a></div>
<div id="slide"><a href="#">Services</a></div>
</li>

<li>
<div id="up"><a href="#">Contact Us</a></div>
<div id="slide"><a href="#">Contact Us</a></div>
</li>
</ul>
</div>

CSS



UL . .., div , div .

CSS3 , Text shadow, Box shadow, CSS3.

#menu-demo ul {
width:500px;
height:50px;
background-color:#CCC;
overflow:hidden;
/*CSS3 Border radius*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
/*CSS3 Box Shadow*/
-moz-box-shadow:1px 2px 4px #666;
-webkit-box-shadow:1px 2px 4px #666;
/*CSS3 Gradient Property for menu*/
background-image:-moz-linear-gradient(rgb(48,161,171), rgb(56,192,207));
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
from(rgb(48,161,171)), to(rgb(56,192,207)));

}
#menu-demo li {
float:left;
list-style-type:none;
margin-left:40px;
text-shadow: 1px 1px 2px #ccc;
}
#menu-demo li a {
text-decoration:none;
color:#303;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#up {
margin-top:13px;
margin-bottom:40px;
}
li:hover {
/*As soon as hover over li elements animation will start*/
-webkit-animation-name: slide;
/*Duration of Animation would be 1 Second*/
-webkit-animation-duration: 1s;
}
@-webkit-keyframes slide {
0% { margin-top: 0px;}
/* When animation completed the li will move up 60pixel*/
100% { margin-top: -60px;}
}

jQuery

, jQuery.

$(document).ready(function() {
$("#menu-demo li").hover(function() {//as soon as the mouse hovers over li
$(this).stop().animate({//animation will start now
marginTop: "-60"//move li tag up with 60px
}, 1000);//time to complete animation would be 1 second
} , function() {
$(this).stop().animate({
marginTop: "0"
}, 0);
});

});