Posts Tagged Animated navigation

[jQuery] 利用 jqeury 和 css 建立一個navigation menu

Posted by Chowky in Jquery, Mootools on August 3, 2009

Chowky 一向欣賞這位作者所做的simple and elegent 效果和教學。

只是簡單的4個steps 就可以做到以下的效果。

Step 1: HTML 都是利用ul 和li

1
2
3
4
5
6
7
8

<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>

Step 2. CSS
要留意的是，現在是還未add span 的，span 會在之後用jquery 加上去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;  /*--Important - Masking out the hover state by default--*/
	float: left;
	height:40px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(a_bg.gif) repeat-x;
	text-transform: uppercase;
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
	color: #555;
	background-position: left bottom;
}
ul#topnav span{ /*--Default state of navigation--*/
	background-position: left top;
}

Step 3. 利用jquery製造的animation effect

a). embed jquery 的library

b). 利用jqeury 去製造animation，shift image -40px pixel向上。 

$(document).ready(function() {
 
	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
 
	$("#topnav li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
		$(this).find("span").show().html(linkText); //Add the text in the <span> tag
	}); 
 
	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({
			marginTop: "-40" //Find the <span> tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0"  //Move the <span> back to its original state (0px)
		}, 250);
	});
 
});

Source: http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/
Demo: http://www.sohtanaka.com/web-design/examples/fancy-navigation/

Share

, , ,

4 Comments