交互设计中心-72色

在网上发现了这个极酷的导航条，整理一下放到这里给大家欣赏之！
内容太多了就不贴出代码了，打个包共大家下载研究！

在线演示
打包下载

...

        在网页设计中，导航是整个网页设计的最重要的因素。导航为用户提供一定意义上的定位，并引导他们进入网站。
由于在网络布局本着为用户更直观、方便的原则，导航菜单没有太多的设计元素，大多数都选择更为简单、直观和常规的方式。不过，这不意味着它们必须沉闷，现在给大家展示一些优秀的导航设计,从中我们可以观察总结出现一些导航设计的方法和设计趋势，也许它可以成为你的灵感来源。......

 

今天看到网上有个做导航的软件，里面有好多时下流行的导航样式，
自己可以编辑，可以增加栏目，减少栏目，等等，还是自己体验吧

查看效果

 

废话不多说,先给出CSS

body{margin:100px 0} .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:70px; background:url(img/nav_bg.png) repeat-x} div#nav ul{width:960px; margin:0 auto; list-style:none} div#nav ul li{float:left; height:35px; overflow:hidden; padding:0 2px 0 0; font: bold 12px/35px Arial; background:url(img/nav_right.png) repeat-y right 0} div#nav ul li a{float:left; height:100%; padding:0 20px; background:url(img/nav_sub.png) repeat-x; color:#fff; text-decoration:none} div#nav ul li a.hover{clear:both; background-position:0 -35px} div#nav ul li.on a{background-position:0 -35px} div#nav ul li.nobg{background:none}

.....