這個navigation 令chowky 眼前一亮，真的很難明白為什麼一個developer 會有這麼高的design sense 呢~ 令人羨慕。
見到效果是否覺得不錯呢~。
最難得是簡單直接~~(當然這個東西不太適用於cms 的template design 上，他的做法不是dynamic 的~但得到的是design 上的空間)
HTML 方面都是利用ul (unordered list)
<ul id="topnav"> <li class="home"><a href="index.htm">Home</a></li> <li class="about"><a href="about.htm">About Us</a></li> <li class="services"><a href="services.htm">Services</a></li> <li class="portfolio"><a href="portfolio.htm">Portfolio</a></li> <li class="contact"><a href="contact.htm">Contact</a></li> <li class="blog"><a href="blog.htm">Blog</a></li> </ul>
CSS styling 方面，基本的樣貌已經完成。
1 2 3 4 5 6 7 8 9 10 | 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
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 34 35 36 37 | /*--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/
Recent Comments