前端观察 » 菜单

导航菜单对每一个网站来说都很重要。设计良好的网站能够提高网站的视觉效果和体验，就像可用性。对于大型网站来说，一般都有很多内容或页面，这个时候，下拉菜单就被广泛使用了，因为它们能够让站内不同页面之间的跳转变得更加轻松。在本文中，我们收集了25个下拉菜单脚本，当然这些菜单可能不够漂亮，但是你可以完全通过CSS来将其整合入自己的网站或应用中去。

1.jQuery Multi Level CSS Menu #1

2.jQuery Multi Level CSS Menu #2

3.All Levels Navigation Menu

4.Smooth Navigation Menu

5.Simple CSS Vertical Menu Digg-Like

6.Professional Dropdown #1

7.Professional Dropline #1

8.Jim’s DHTML Menu v5.7

9.Drop Down Tabs

10.Suckertree Vertical Menu

11.Superfish

12.jQuery SuckerFish

13.Ultimate Drop Down Menu

14.JavaScript Dropdown Menu with Multi Levels

15.MenuMatic

16.Sliding JavaScript Dropdown Menu

17.jGlide Menu

18.Dropdown Menu Made with Scriptalicious/Prototype

19.Chrome CSS Drop Down Menu

20.Professional Dropdown #2

21.Hover Drop #2

22.Skeleton Dropdown

23.HV Menu v5.5

24.Simple Drop Down Menu v2.0

25.Horizontal Drop Down Menu Script

创建带有图标的导航菜单

神飞 — Sat, 14 Mar 2009 05:01:28 +0000

在我创建的每一个互联网应用中，我都试图避免创建完全由图片组成的菜单。在我看来，菜单系统中应该使用文字。这样做也会让菜单变得更干净利落、清晰和易读，不用考虑应用程序如何读取它，以及页面放大的时候也不会失真等。或许这只是我的想法？但是我们不能创建即好看又好用的菜单吗？

下面是创建下面的有图标支持的导航菜单的代码和样式。

点击这里查看演示(在新窗口中打开).

基本标签


<ul class="nav">
	<li class="home"><a href="#link">home</a></li>
	<li class="about"><a href="#link">about</a></li>
	<li class="work"><a href="#link">work</a></li>
</ul>

The CSS

/* style.css */
.nav {width:550px; height:50px; padding:0px 25px; margin:0px; background:url(img/bg.gif) repeat-x; border:1px solid #efefef;}
	.nav li {float:left; width:125px; height:50px; display:inline; padding:0px; margin:0px 25px 0px 0px;}
	li.home {background:url(img/nav-home.gif) top left no-repeat;}
		li.home:hover {background:url(img/nav-homeHover.gif) top left no-repeat;}
	li.about {background:url(img/nav-about.gif) top left no-repeat;}
		li.about:hover {background:url(img/nav-aboutHover.gif) top left no-repeat;}
	li.work {background:url(img/nav-work.gif) top left no-repeat;}
		li.work:hover {background:url(img/nav-workHover.gif) top left no-repeat;}
		.nav li a {display:block; padding:15px 0px 0px 50px; color:#000; font-size:18px; font-family:arial; height:35px; text-decoration:none;}
		.nav li a:hover {color:#C00;}

在更精细的网站设计中，菜单会变的更多的样式来支持。公平的说，如果你想使用一款特定的字体——事实上很少有网站允许这样做——那么你就需要使用图片、Flash或一些魔法。最后，尽可能保持易用性是非常重要的。

学习的最佳方式是练习，试着吧图标移动到文字的后面，或者创建一个有图标的垂直导航菜单系统。

神飞认为，其实这是一个很简单的教程，属于入门级别的，没有什么高级的技术，只是提供了一个制作带图标的水平导航菜单的方法。从网站的性能上来说，这样做并不是很好，现在最推荐的方法是CSS Sprite，就是将用到的那些图片放到一个图片文件中，然后通过background-position来分别调用。另外，对于使用特殊文字的情况，现在的情况有了一点小改观，就是CSS3已经开始支持网站的内嵌字体了。

如果你有什么更好的制作此类菜单的方法，不妨与前端观察的朋友一起分享，多谢。