css二级菜单实现代码集合修正版_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:43:19

css二级菜单实现代码集合修正版_javascript技巧

css二级菜单实现代码集合修正版_javascript技巧: css菜单演示 0 : ) + sfhover; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0 : ) + sfhover; } sfEls[i].onMouseUp=function() { th

推荐度：

点击下载本文 文档为doc格式

导读css二级菜单实现代码集合修正版_javascript技巧: css菜单演示 0 : ) + sfhover; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0 : ) + sfhover; } sfEls[i].onMouseUp=function() { th

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> </style> 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; //--></ script> </head> <body> <li>脚本之家 <li>脚本专栏</li> <li>网络编程</li> <li>数据库</li> <li>源码下载</li> <li>软件下载</li> </li> <li>服务介绍 <li>服务二</li> <li>服务二</li> <li>服务二</li> <li>服务二服务二</li> <li>服务二服务二服务二</li> <li>服务二</li> </li> <li>成功案例 <li>案例三</li> <li>案例</li> <li>案例三案例三</li> <li>案例三案例三案例三</li> </li> <li>关于我们 <li>我们四</li> <li>我们四</li> <li>我们四</li> <li>我们四111</li> </li> <li>在线演示 <li>演示</li> <li>演示</li> <li>演示</li> <li>演示演示演示</li> <li>演示演示演示</li> <li>演示演示</li> <li>演示演示演示</li> <li>演示演示演示演示演示</li> </li> <li>联系我们 <li>联系联系联系联系联系</li> <li>联系联系联系</li> <li>联系</li> <li>联系联系</li> <li>联系联系</li> <li>联系联系联系</li> <li>联系联系联系</li> </li> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
第二种方法：
其实，所谓的二级菜单都差不多，无非就是为二级菜单定义一个层，当鼠标放在一级菜单上的时候显示这个层，而将鼠标从一级菜单上移开时隐藏这个层。因此，通过这个经典的CSS二级菜单又可以衍生出很多种不同的二级菜单，其中一种如下图所示，弹簧式的。

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css菜单演示</title>

0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseDown=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseUp=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

""); 
} 
} 
} 
window.onload=menuFix;

//--></ script>

</head> 
<body>

<li>产品介绍 
 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
 
</li> 
<li>服务介绍 
 
<li>服务二</li> 
<li>服务二</li> 
<li>服务二</li> 
<li>服务二服务二</li> 
<li>服务二服务二服务二</li> 
<li>服务二</li> 
 
</li> 
<li>成功案例 
 
<li>案例三</li> 
<li>案例</li> 
<li>案例三案例三</li> 
<li>案例三案例三案例三</li> 
 
</li> 
<li>关于我们 
 
<li>我们四</li> 
<li>我们四</li> 
<li>我们四</li> 
<li>我们四111</li> 
 
</li>

<li>在线演示 
 
<li>演示</li> 
<li>演示</li> 
<li>演示</li> 
<li>演示演示演示</li> 
<li>演示演示演示</li> 
<li>演示演示</li> 
<li>演示演示演示</li> 
<li>演示演示演示演示演示</li> 
 
</li> 
<li>联系我们 
 
<li>联系联系联系联系联系</li> 
<li>联系联系联系</li> 
<li>联系</li> 
<li>联系联系</li> 
<li>联系联系</li> 
<li>联系联系联系</li> 
<li>联系联系联系</li> 
 
</li> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
也可以竖着的二级菜单变成横着的，如下面两个图所示。

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css菜单演示</title>

""); 
} 
} 
} 
window.onload=menuFix;

//--></ script>

</head> 
<body>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css菜单演示</title> 
<style type="text/css"> 
 
</style> 
0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseDown=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseUp=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
""); 
} 
} 
} 
window.onload=menuFix; 
//--></ script> 
</head> 
<body> 
 
<li>产品介绍 
 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
 
</li> 
<li>服务介绍 
 
<li>服务二</li> 
<li>服务二</li> 
<li>服务二</li> 
<li>服务二服</li> 
<li>服务二服</li> 
<li>服务二</li> 
 
</li> 
<li>成功案例 
 
<li>案例三</li> 
<li>案例</li> 
<li>案例三案</li> 
<li>案例三案</li> 
 
</li> 
<li>关于我们 
 
<li>我们四</li> 
<li>我们四</li> 
<li>我们四</li> 
<li>我们四111</li> 
 
</li> 
<li>在线演示 
 
<li>演示</li> 
<li>演示</li> 
<li>演示</li> 
<li>演示演示</li> 
<li>演示演示</li> 
<li>演示演示</li> 
<li>演示演示</li> 
<li>演示演示</li> 
 
</li> 
<li>联系我们 
 
<li>联系联系</li> 
<li>联系联系</li> 
<li>联系</li> 
<li>联系联系</li> 
<li>联系联系</li> 
<li>联系联系</li> 
<li>联系联系</li> 
 
</li> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
以上几种菜单在IE、Firefox、Opera、Flock浏览器下运行通过，但是有一个问题，就是在一级菜单中单击鼠标后，二级菜单就不会消失了。这不能不说是一个bug啊。另外，还有一种横着的二级菜单，这个菜单如下图所示。该菜单在IE浏览器中运行通过，但在Firefox、Opera、 Flock浏览器中运行不正常。

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css菜单演示</title> 
<style type="text/css"> 
 
</style> 
0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseDown=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseUp=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
""); 
} 
} 
} 
window.onload=menuFix; 
//--></ script> 
</head> 
<body> 
 
<li>产品介绍 
 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
<li>产品一</li> 
 
</li> 
<li>服务介绍 
 
<li>服务二</li> 
<li>服务二</li> 
<li>服务二</li> 
<li>服务二服务二</li> 
<li>服务二服务二服务二</li> 
<li>服务二</li> 
 
</li> 
<li>成功案例 
 
<li>案例三</li> 
<li>案例</li> 
<li>案例三案例三</li> 
<li>案例三案例三案例三</li> 
 
</li> 
<li>关于我们 
 
<li>我们四</li> 
<li>我们四</li> 
<li>我们四</li> 
<li>我们四111</li> 
 
</li> 
<li>在线演示 
 
<li>演示</li> 
<li>演示</li> 
<li>演示</li> 
<li>演示演示演示</li> 
<li>演示演示演示</li> 
<li>演示演示</li> 
<li>演示演示演示</li> 
<li>演示演示演示演示演示</li> 
 
</li> 
<li>联系我们 
 
<li>联系联系联系联系联系</li> 
<li>联系联系联系</li> 
<li>联系</li> 
<li>联系联系</li> 
<li>联系联系</li> 
<li>联系联系联系</li> 
<li>联系联系联系</li> 
 
</li> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

以上脚本之家文件打包下载

css二级菜单实现代码集合修正版_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：菜单 js 代码

热门焦点

css二级菜单实现代码集合修正版_javascript技巧

css二级菜单实现代码集合修正版_javascript技巧

css二级菜单实现代码集合修正版_javascript技巧

最新推荐

猜你喜欢

热门推荐