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

css菜单演示

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;
//-->

  • 我们

    • 脚本专栏
    • 网络编程
    • 数据库
    • 源码下载
    • 软件下载
  • 服务介绍
    • 服务二
    • 服务二
    • 服务二
    • 服务二服务二
    • 服务二服务二服务二
    • 服务二
  • 成功案例
    • 案例三
    • 案例
    • 案例三案例三
    • 案例三案例三案例三
  • 关于我们
    • 我们四
    • 我们四
    • 我们四
    • 我们四111
  • 在线演示
    • 演示
    • 演示
    • 演示
    • 演示演示演示
    • 演示演示演示
    • 演示演示
    • 演示演示演示
    • 演示演示演示演示演示
  • 联系我们
    • 联系联系联系联系联系
    • 联系联系联系
    • 联系
    • 联系联系
    • 联系联系
    • 联系联系联系
    • 联系联系联系

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

第二种方法：
其实，所谓的二级菜单都差不多，无非就是为二级菜单定义一个层，当鼠标放在一级菜单上的时候显示这个层，而将鼠标从一级菜单上移开时隐藏这个层。因此，通过这个经典的CSS二级菜单又可以衍生出很多种不同的二级菜单，其中一种如下图所示，弹簧式的。

css菜单演示

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;

//-->

  • 产品介绍

    • 产品一
    • 产品一
    • 产品一
    • 产品一
    • 产品一
    • 产品一
  • 服务介绍
    • 服务二
    • 服务二
    • 服务二
    • 服务二服务二
    • 服务二服务二服务二
    • 服务二
  • 成功案例
    • 案例三
    • 案例
    • 案例三案例三
    • 案例三案例三案例三
  • 关于我们
    • 我们四
    • 我们四
    • 我们四
    • 我们四111
  • 在线演示
    • 演示
    • 演示
    • 演示
    • 演示演示演示
    • 演示演示演示
    • 演示演示
    • 演示演示演示
    • 演示演示演示演示演示
  • 联系我们
    • 联系联系联系联系联系
    • 联系联系联系
    • 联系
    • 联系联系
    • 联系联系
    • 联系联系联系
    • 联系联系联系

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

也可以竖着的二级菜单变成横着的，如下面两个图所示。

css菜单演示

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;

//-->

  • 产品介绍

    • 产品一
    • 产品一
    • 产品一
    • 产品一
    • 产品一
    • 产品一
  • 服务介绍
    • 服务二
    • 服务二
    • 服务二
    • 服务二服
    • 服务二服
    • 服务二
  • 成功案例
    • 案例三
    • 案例
    • 案例三案
    • 案例三案
  • 关于我们
    • 我们四
    • 我们四
    • 我们四
    • 我们四111
  • 在线演示
    • 演示
    • 演示
    • 演示
    • 演示演示
    • 演示演示
    • 演示演示
    • 演示演示
    • 演示演示
  • 联系我们
    • 联系联系
    • 联系联系
    • 联系
    • 联系联系
    • 联系联系
    • 联系联系
    • 联系联系

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

css菜单演示

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;
//-->

  • 产品介绍

    • 产品一
    • 产品一
    • 产品一
    • 产品一
    • 产品一
    • 产品一
  • 服务介绍
    • 服务二
    • 服务二
    • 服务二
    • 服务二服
    • 服务二服
    • 服务二
  • 成功案例
    • 案例三
    • 案例
    • 案例三案
    • 案例三案
  • 关于我们
    • 我们四
    • 我们四
    • 我们四
    • 我们四111
  • 在线演示
    • 演示
    • 演示
    • 演示
    • 演示演示
    • 演示演示
    • 演示演示
    • 演示演示
    • 演示演示
  • 联系我们
    • 联系联系
    • 联系联系
    • 联系
    • 联系联系
    • 联系联系
    • 联系联系
    • 联系联系

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

以上几种菜单在IE、Firefox、Opera、Flock浏览器下运行通过，但是有一个问题，就是在一级菜单中单击鼠标后，二级菜单就不会消失了。这不能不说是一个bug啊。另外，还有一种横着的二级菜单，这个菜单如下图所示。该菜单在IE浏览器中运行通过，但在Firefox、Opera、 Flock浏览器中运行不正常。

css菜单演示

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;
//-->

  • 产品介绍

    • 产品一
    • 产品一
    • 产品一
    • 产品一
    • 产品一
    • 产品一
  • 服务介绍
    • 服务二
    • 服务二
    • 服务二
    • 服务二服务二
    • 服务二服务二服务二
    • 服务二
  • 成功案例
    • 案例三
    • 案例
    • 案例三案例三
    • 案例三案例三案例三
  • 关于我们
    • 我们四
    • 我们四
    • 我们四
    • 我们四111
  • 在线演示
    • 演示
    • 演示
    • 演示
    • 演示演示演示
    • 演示演示演示
    • 演示演示
    • 演示演示演示
    • 演示演示演示演示演示
  • 联系我们
    • 联系联系联系联系联系
    • 联系联系联系
    • 联系
    • 联系联系
    • 联系联系
    • 联系联系联系
    • 联系联系联系

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

以上我们文件打包下载

赞 (0)

相关推荐

  • 自己做一款不错的二级导航菜单

    多级导航菜单 /* ::::: css ::::: */ strong { font-style: normal; font-weight: normal; font-weight: bold; } a { cursor: pointer; text-decoration: none; } #container { width: 960px; margin: 0pt auto; } #nav, .nav-container, .nav-container ul, #nav .nav-master

  • 二级连动菜单

    var onecount; subcat = new Array(); subcat[0] = new Array("奥迪A4","奥迪","奥迪A4"); subcat[1] = new Array("奥迪A6","奥迪","奥迪A6"); subcat[2] = new Array("捷达","大众(一汽)","捷达");

  • 用jquery生成二级菜单的实例代码

    javascript 页面中的函数 复制代码 代码如下: function querySub(id,sid/*选中的项*/){$.post('${path}/page/article/querySubChannelArticle.action',                 {'channelId':id},function(data){                     $('select[name="article.subChannel.subId"] option[va

  • 鼠标经过显示二级菜单js特效

    复制代码 代码如下: <!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=&qu

  • css 二级菜单 实现代码集合 修正版

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

    css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.cla

  • jquery实现像栅栏一样左右滑出式二级菜单效果代码

    jquery实现像栅栏一样左右滑出式二级菜单效果代码

    本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了jquery实现像栅栏一样的左右滑出式二级菜单,会向左或向右滑出,支持中英文,使用时别忘了引入jquery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/ 具体代码如下: <!DOCTYPE html> <head> <meta ht

  • 基于jQuery实现的向下滑动二级菜单效果代码

    基于jQuery实现的向下滑动二级菜单效果代码

    本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jQuery制作向下滑动的二级菜单,本二级菜单带有动画效果,而且比较流畅,鼠标放在一级菜单上,就可以向下滑出二级子菜单,相对实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-down-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • jQuery实现的淡入淡出二级菜单效果代码

    jQuery实现的淡入淡出二级菜单效果代码

    本文实例讲述了jQuery实现的淡入淡出二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款加入了jQuery的菜单,一个看似平凡菜单突然有味道.有生机起来,这里将jQuery1.3.2引用进来,让弹出的二级菜单具备淡入淡出的效果,虽然就效果本身来说并不起眼,但比起无任何效果的菜单,从体验上来说,已经强了很多倍. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-2l-nav-menu-codes/ 具

  • jquery实现的简单二级菜单效果代码

    jquery实现的简单二级菜单效果代码

    本文实例讲述了jquery实现的简单二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的二级菜单,研究了这么多天,才学会用jquery写一个菜单,也算是对自己的鼓励吧,自我感觉这个菜单很不错,欢迎朋友们指点江山. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-2l-menu-style-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • jquery实现树形二级菜单实例代码

    直接上代码: 复制代码 代码如下: <!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-eq

  • PHP初学者常见问题集合 修正版(21问答)

    1,如何连接连两个字符串? 答:在php中连接两个字符串可以直接使用"."操作符号,例如$newStr="Zhang"."san",在java中是使用"+"操作符号,不要混淆. 2,如何计算一个字符串的长度? 答:$str="test";$length=strlen($str);即使用strlen(str)函数. 3,如何按照某个分割符拆分一个字符串? 答:使用explode(delim,str)函数,例如

  • 通用的二级菜单代码(css+javascript)

    ]但在<CSS二级菜单>中,如果一级菜单中的超链接是#,那么只要单击该一级菜单,那么与这个一级菜单对应的二级菜单就会一直显示在网页中,不能隐藏,是一个小小的bug.后来仔细的想了一想,其实,无论是什么样的二级菜单,原理都是一样的: 1.每一个一级菜单都会对应一个层,而这个层里放着的就是该一级菜单对应的二级菜单. 2.默认情况下,二级菜单这个层是隐藏的,在CSS中将层的display属性值设为none,可以达到这一目的. 3.当鼠标放在一级菜单上时,将对应的二级菜单层显示出来,在CSS中将层的d

  • js+css实现超简洁的二级下拉菜单效果代码

    js+css实现超简洁的二级下拉菜单效果代码

    本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

  • javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版

    第一个 文字上下间隔滚动 修正版 符合WEB标准的文字间隔滚动JS代码 var marqueeContent=new Array(); //滚动新闻 marqueeContent[0]='14:25 HTML/JS互相转换工具-IE7兼容版'; marqueeContent[1]='14:25 css 在线压缩工具'; marqueeContent[2]='14:25 CSS整形与最佳化工具[压缩]'; marqueeContent[3]='14:25 JS Minifier js压缩'; va

随机推荐