纯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需再刷新一下页面才能执行]

麦鸡的TAB切换功能结合了javascript和css
麦鸡的TAB切换功能结合了javascript和css...
2007-12-12
又一个漂亮的导航栏的下拉菜单
这篇文章主要介绍了又一个漂亮的导航栏的下拉菜单,需要的朋友可以参考下
2007-06-06
CSS 伪类实现的鼠标滑动图片链接
CSS伪类实现的鼠标滑动链接，是一个图片导航，在早期的DW中有专一制作本效果的插件，不过随着大家CSS水平的提高，现在做出这种效果好像得心应手了，因为这种果大家应该都挺喜欢的。
2009-10-10
CSS TreeMenu 二级树形菜单示例
二级树形菜单示例：CSS TreeMenu ，非常漂亮的树形菜单，用在网站右侧比较合适。
2010-11-11
css+js下拉菜单
js+css实现的简单的下来菜单。兼容性好。
2009-05-05
javascript实现的鼠标悬停时动态翻滚的导航条
鼠标悬停时动态翻滚的导航条，注意这里用了两个背景图，请等待网页加载完成或多刷新几次，这个是使用JavaScript实现的，不过代码好像是从jQuery里摘出来的，有点像。
2009-11-11
js仿淘宝的拼音检索特效代码
如果需要查询数据库,自己修改成ajax调用吧,效果会很好的.
2008-08-08
超个性的导航效果
超个性的导航效果...
2007-11-11
鼠标经过导航菜单时颜色改变效果
鼠标经过导航菜单的时候，颜色改变，可自定义颜色。
2010-07-07
js iframe网站后台左右收缩型页面脚本
其实和我的后台一样网站后台免费提供这里的样式的重点是指当鼠标移到三角按钮时变成手掌
2008-07-07

纯CSS实现的竖向导航菜单

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具