CSS navigation with 3 個不同的state (default, active, hover)

Chowky — Wed, 09 Sep 2009 18:08:01 +0000

這個navigation 令chowky 眼前一亮，真的很難明白為什麼一個developer 會有這麼高的design sense 呢~ 令人羨慕。

見到效果是否覺得不錯呢~。

最難得是簡單直接~~(當然這個東西不太適用於cms 的template design 上，他的做法不是dynamic 的~但得到的是design 上的空間)

HTML 方面都是利用ul (unordered list)


	Home
	About Us
	Services
	Portfolio
	Contact
	Blog

CSS styling 方面，基本的樣貌已經完成。

ul#topnav { 
	margin: 0; padding: 0;
	list-style: none;
	float: left;
	width: 960px; //這是整個menu 的闊 960 x 800 是web design 上的magic number
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
}

現在要加上3 個的state，利用了css sprite (chowky 看完才知道原來利用background position 這種technique 是有名堂的呢~)

加完下面的CSS 之後，就會完成了2個state： default 和 hover

/*--CSS Sprites - Default State--*/
ul#topnav a {
	float: left;
	display: block;
	height: 58px; /*--Specify height of navigation--*/
	text-indent: -99999px; /*--Shoot the text off the page--*/
	background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
	background-position: left -58px; /*--- coordination system 是left top 代表座標上的(0,0) ，所以(-)是代表向下。*/
}
/*--Assign an image and width to each link--*/
ul#topnav li.home a {
	background-image: url(home_a.jpg);
	width: 120px;
}
ul#topnav li.about a {
	background-image: url(about_a.jpg);
	width: 147px;
}
ul#topnav li.services a {
	background-image: url(services_a.jpg);
	width: 157px;
}
ul#topnav li.portfolio a {
	background-image: url(portfolio_a.jpg);
	width: 182px;
}
ul#topnav li.contact a {
	background-image: url(contact_a.jpg);
	width: 179px;
}
ul#topnav li.blog a {
	background-image: url(blog_a.jpg);
	width: 175px;
}

之後就要加上最後一個state: “Active”。
作的的做法是在html 的tag 上加上 id ，所以每一頁都要在body 的tag 上加上id 的attribute

註：其他不同的navigation 的example 會加多一個class attribute= “active” 再用CSS LOAD active 的圖

Home Page HTML

...
<body id="home">
...

之後就要利用 CSS Specificity 去override default 和 hover states.

因為作者的方法是用不同的圖做的。所以每加一個menu item 就要加一個呢～

#home li.home a, /*--Home Page > Home Link--*/
#about li.about a, /*--About Page > About Link--*/
#services li.services a, /*--Services Page > Services Link--*/
#portfolio li.portfolio a, /*--Portfolio Page > Portfolio Link--*/
#contact li.contact a, /*--Contact Page > Contact Link--*/
#blog li.blog a /*--Blog Page > Blog Link--*/
{
	background-position: left bottom;
}

結構上如下：

Demo: http://www.sohtanaka.com/web-design/examples/active-navigation/blog.htm
Source: http://www.sohtanaka.com/web-design/active-state-in-css-navigations/

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

Chowky — Mon, 03 Aug 2009 11:04:37 +0000

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

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

Step 1: HTML 都是利用ul 和li

<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 加上去。

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  and  share the same properties since the   will be a duplicate of the  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(""); //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  tag
		$(this).find("span").show().html(linkText); //Add the text in the  tag
	}); 
 
	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({
			marginTop: "-40" //Find the  tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0"  //Move the  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/

Lab of Chowky » menu

CSS navigation with 3 個不同的state (default, active, hover)

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