«
»

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


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

, , ,

This entry was posted on August 3, 2009, 7:04 pm and is filed under Jquery, Mootools. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

  1. #1 by meow on September 9, 2009 - 9:35 pm

    您好，之前在網路上看過英文版，
    無意間用google搜尋到這裡，
    有種莫名的感動XD

    請問版主知不知道，
    如果想要讓home一開始就呈現白色背景，要如何設定呢？
    懇請賜教，謝謝！

    Quote

  2. #2 by Chowky on September 9, 2009 - 11:44 pm

    Google 真是“強大” ，我還沒完成這篇文章就有人找到^^”

    你的問題，我不太明的你所指的白色背景，你是指字體上的COLOUR ／ BACKGROUND COLOUR？

    （希望沒有理解錯你的問題）
    文章所用的是要利用 BODY 的TAG 去改變ACTIVE STATE

    <body id="home">
    Quote

  3. #3 by meow on September 10, 2009 - 4:38 pm

    版主您好，
    抱歉問題沒有寫得很完整，我指的是BACKGROUND COLOR，
    原文範例無法設定目前所在位置
    （不管到哪一頁MENU都是一片紅），
    我的理想狀態是如果目前位置在首頁的話，
    HOME的那塊MENU背景一開始就呈現白色，
    如果用jQuery的話則不知道要從何改起，
    懇請賜教，謝謝Orz

    Quote

  4. #4 by Chowky on September 10, 2009 - 5:34 pm

    明白了，其實都不太難的。

    只要在加上就可以了。

    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

    $(document).ready(function() {
 
 
	$("#topnav li").prepend(""); //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...
		if ($(this).hasClass("active")) return; //don't animate if it is active.
 
		$(this).find("span").stop().animate({ 
			marginTop: "-40" //Find the span tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		if ($(this).hasClass("active")) return;
 
		$(this).find("span").stop().animate({
			marginTop: "0" //Move the span back to its original state (0px)
		}, 250);
	});
 
	$("#topnav li.active span").css(
			'margin-top', "-40px" //directly using css to make it selected
		);

    在每一頁加上active 的attribute

    <!-- 假設是首頁 -->
<LI class="active"><SPAN style="display: inline; " >Home</SPAN><a href="http://www.sohtanaka.com/" rel="nofollow">Home</A></LI>
    Quote
(will not be published)

Anti-Spam Protection by WP-SpamFree