漂亮的CSS + XHTML导航菜单

你大概知道：对于一个新的访问者来说，他在最初20秒内与某网站的互动情况，决定了他是否会留在这个网站做进一步的探索，还是扬长而去。这就意味着，在设计网页的时候，你必须遵循一定的规律来留住访问者。简单的说，就是把所有的网页元素放在访问者所期待的位置。进行此设计的一个重要而有效的部分，就是整一个易于使用的导航菜单。
本文将手把手带领您在jQuery的帮助下，制作一个漂亮的CSS + XHTML导航菜单。
Home
Services
Our clients
The team
About us
Contact us
第一步：HTML
<div id="menu-container">
<ul id="navigationMenu">
<li><a href="#" mce_href="#" class="normalMenu">Home</a></li>
<li><a href="#" mce_href="#" class="normalMenu">Services</a></li>
<li><a href="#" mce_href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" mce_href="#" class="normalMenu">The team</a></li>
<li><a href="#" mce_href="#" class="normalMenu">About us</a></li>
<li><a href="#" mce_href="#" class="normalMenu">Contact us</a></li>
</ul>
</div>

呵呵，这代码简单吧？其实就是一个 ul
+ li
的结构。一目了然。如果您想加一项，减一项，或是换个菜单链接，就对着 li
和 a
标签下手就成。嗯，唯一需要注意的就是，怎么设定一个当前（或选定）的菜单项。如上面代码，您就把 a
的 class 设为 “selectedMenu” 即可（如代码中的 Our clients 项）。