滑动门式菜单实现代码- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 滑动门式菜单实现代码

Javascript: JavaScript教程：浅析JS运行机制; JavaScript类型检测小结; JavaScript内置对象:arguments; 编写复杂环境下不出错的Javascript代码; 掌握JavaScript语言; IE7中网页动态创建iframe时边框问题; 总结常用JavaScript语法107条; AJAX教程(1)：AJAX简介; AJAX教程(2)：AJAX Http请求; AJAX教程(3)：AJAX实例; AJAX教程(4)：AJAX 浏览器支持; AJAX教程(5)：AJAX-XMLHttpRequest 对象; AJAX教程(6)：AJAX - 请求服务器; AJAX教程(7)：AJAX - 服务器端的脚本; AJAX教程(8)：AJAX 请求实例; AJAX教程(9)：AJAX 请求源代码; AJAX教程(10)：AJAX 数据库实例; AJAX教程(11)：AJAX XML 实例; AJAX教程(12)：AJAX ResponseXML 实例; AJAX教程(13)：通过XMLHTTP把文本文件载入HTML元素

No. « ‹ 169 170 171 172 › »

技术文章搜索

关键字

Javascript 中的滑动门式菜单实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 362 ::

收藏到网摘: n/a

javascript 线性渐变三 extjs 学习笔记（三）最基本的grid

自已写的横排的导航菜单，红色水晶风格，大家可以用啦，不过也有些地方需要高手指教啊，代码里有注释，兼容性还不错，希望一起提高吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自写的滑动门式菜单/</title>
<style type="text/css">
*{margin:0;padding:0;}
body{ margin:auto;font:14px "宋体",Verdana, Arial, Helvetica, sans-serif;color:#333;}
ul,li{padding:0; list-style:none;}
a:link,a:visited{color:#333;text-decoration:none;}
a:hover{color:#d00;text-decoration:none;}
#headNav{background:url(/upload/tech/20100110/20100110113207_7a53928fa4dd31e82c6ef826f341daec.png) 0 -42px repeat-x; border-top:solid 1px #E5B0B1; height:42px;}
#headNav ul li{float:left; padding:13px 0; text-align:center; cursor:pointer; }
#headNav ul li a{display:block; font-size:14px; padding:0 9px; font-weight:bold; color:#fff;}
#headNav ul li a.lineLink{border-left:dotted 1px #fff;}
.navNormalLink{background:url(/upload/tech/20100110/20100110113207_7a53928fa4dd31e82c6ef826f341daec.png) 0 -42px no-repeat; padding-bottom:4px;}
.navNormalOver{background:url(/upload/tech/20100110/20100110113207_7a53928fa4dd31e82c6ef826f341daec.png) no-repeat; padding-bottom:4px;}
</style>
</head>
<body> <div id="headNav"> <ul> <li><a href="http://www.ruanchen.com" style="color: #000">软晨学习网</a></li> <li><a href="#" title="">行业资讯</a></li> <li><a href="#" title="">搜索引擎</a></li> <li><a href="#" title="">站长访谈</a></li> <li><a href="#" title="">网站联盟</a></li> <li><a href="#" title="">源码下载</a></li> <li><a href="#" title="">网页特效</a></li> <li><a href="#" title="">模板素材</a></li> <li><a href="#" title="">软件下载</a></li> </ul> <script type="text/javascript"> </script> </div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript 线性渐变三 extjs 学习笔记（三）最基本的grid

Javascript 中的 滑动门式菜单 实现代码

评论 (0) All

Javascript 中的滑动门式菜单实现代码