纯CSS实现的竖向导航菜单

更新时间：2010年03月03日 23:14:19 作者：

纯CSS实战竖向导航菜单，这也算是一个典型的CSS菜单啦，这里要用到两个背景图片，在鼠标动作时分别加载不同的背景图片，以达到反差给人的清新效果，其实这种菜单的制作是很简单的，代码量不大，作为初级者的教程还是很不错的。

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>纯CSS竖向导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 80%; font-weight: bold; } ul { list-style: none; margin: 0; padding: 0; } #menu3 { width: 160px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(/upload/2010-3/20100303231545473.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li a:active { color: #ffffff; background: url(/upload/2010-3/20100303231637519.png) 0 -32px; padding: 8px 0 0 30px; } </style> </head> <body> <div id="menu3"> <ul> <li><a href="#" title="脚本之家">脚本之家</a></li> <li><a href="#" title="About">CSS特效</a></li> <li><a href="#" title="Portfolio">源码下载</a></li> <li><a href="#" title="Store">广告联系</a></li> </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

几个不错的自动收缩菜单导航效果
几个不错的自动收缩菜单导航效果...
2007-10-10
一个很简单的无限分类树实现代码
一个很简单的无限分类树实现代码，需要的朋友可以参考下。
2010-11-11
改写一个简单的菜单弹性大小
看到一个简单的菜单样式，由于是作者比较早的作品，视觉效果不太好，有点突兀自己做了一点小修改，模仿icon动画的效果(区别的关键点是getStyle取得当前计算样式这个函数)
2010-12-12
js实现的XP风格的右键菜单
js实现的XP风格的右键菜单...
2007-03-03
用javascript实现的不错的一款网页选项卡
用javascript实现的不错的一款网页选项卡...
2007-11-11
用js实现的比较经典实用的触发型导航菜单
用js实现的比较经典实用的触发型导航菜单...
2007-03-03
无限级别的菜单（侧拉菜单）
无限级导航菜单，这个是可以任意加载子菜单，原理比较不错，推荐大家学习
2008-09-09
滑动门式菜单实现代码
自已写的横排的导航菜单，红色水晶风格，大家可以用啦，不过也有些地方需要高手指教啊，代码里有注释，兼容性还不错，希望一起提高吧。
2009-10-10
CSS导航菜单，三级菜单实现代码
CSS导航菜单，三级菜单，资源完整，超实用，希望大家喜欢。
2010-11-11
搜集了几个不错的下拉菜单效果
搜集了几个不错的下拉菜单效果...
2007-05-05