2011年12月23日星期五

7个强大超酷的CSS导航菜单

7 Advanced CSS Menu via noupe.

新的技术在不断的发展和更新,利于我们创造更多独特和看上去很酷的菜单效果。下面是7个基于CSS创建的网页导航菜单:

1) 强大的 CSS 导航菜单

这是来自Nick La设计的一个漂亮的CSS导航菜单效果,其中详细的介绍了如何对一幅图片进行切片并把它们组合在一起,形成一个独特漂亮的菜单。
需要注意的是, 这个菜单在IE6下面有一个bug,在悬浮的时候,并不能达到背景图片切换的效果,这个时候,你需要给链接属性指定mouseover来进行显示。

Demo
7个强大超酷的CSS导航菜单

2) 先进的CSS导航菜单技术

这是一个全新的菜单设计概念。通常我们设计一个导航菜单,会改变鼠标悬浮在它上面时的样式,而这个菜单是当你鼠标悬浮在当前导航链接时,改变其它链接的样式。

Demo
7个强大超酷的CSS导航菜单

3) 多级下拉导航菜单

著名的Suckerfish Dropdowns回来了,并且这次它的体积更小了,仅仅12行的javascript代码,并且正常运行于Safari和Opera,支持多级下拉菜单。

Demo
7个强大超酷的CSS导航菜单

4) Tree Frog slide and fly 导航菜单

树蛙菜单,光是这个名字就挺有趣的。当鼠标悬停的时候才出现二级菜单列表,而同时又支持多级的浮动菜单。

7个强大超酷的CSS导航菜单

5) Mike’s Experiment

这个菜单的最大特点是当鼠标悬浮的时候,出现对导航菜单的补充说明。这一应用能精简你的导航系统,且给用户一个更直观的导航描述,让用户知道,他将点击的东西会为他带为什么样的内容,而这一切,都是纯CSS的,不需要任何Javascript.

7个强大超酷的CSS导航菜单

6) 8 个不能错过的网页导航菜单

这是8个基于CSS的导航菜单,它们或许并不是最特别的,却是最常用最基础的,你不能错过。
7个强大超酷的CSS导航菜单

7) 下拉选项卡的导航菜单

Drop Down Tabs 提供了五种不同样样式的下拉选项卡的导航单,当然,你完全可以自定义它,让它看上去更加漂亮和特别。

7个强大超酷的CSS导航菜单

来源于 7个强大超酷的CSS导航菜单 | 帕兰映像

没有评论:

发表评论