您现在的位置是：网站首页> 编程资料编程资料

HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单使用HTML+CSS实现鼠标划过的二级菜单栏的示例纯CSS实现鼠标滑过显示子菜单的二级菜单效果js+css实现圆角二级菜单jQuery CSS 完美兼容的二级菜单css 实现动态二级菜单

2021-09-07 840人已围观

简介 通过嵌套的ul li 实现简单的二级菜单兼容IE6-9,谷歌火狐等主流浏览器，示例代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助


复制代码
代码如下:

HTML网页如下：(通过嵌套的
)(兼容IE6-9,谷歌火狐等主流浏览器)


复制代码
代码如下:

网页加载时，需要将所有的菜单项都暂时隐藏，调用相关的JavaScript代码

复制代码
代码如下:

/*网页加载时触发的函数*/
function loadFun() {
//获取
    的所有子节点
  • 节点5个
    var array = document.getElementsByTagName("ul").item(0).childNodes;
    //遍历子节点
    for (var i = 0; i < array.length; i++) {
    //获取
  • 标签的子节点
    var childnodes = array[i].childNodes;
    for (var j = 0; j < childnodes.length; j++) {
    //如果碰到主菜单中的
      标签就隐藏该子菜单的下拉菜单
      if (childnodes[j].tagName == "UL") {
      childnodes[j].style.display = "none";
      }
      }
      }
      }

    详细的CSS代码如下：

    复制代码
    代码如下:



    鼠标点击触发的JavaScript代码如下：

    复制代码
    代码如下:

    /*点击按钮是触发的事件*/
    var arrays = new Array("rule","load","info","window","phone");
    function Show(tagId) {
    for (var i = 0; i < arrays.length; i++) {
    if (arrays[i] == tagId) {
    //设置全新的背景颜色
    document.getElementById(arrays[i]).parentNode.style.backgroundColor = "RGB(237,237,237)";
    document.getElementById(arrays[i]).style.display = "block";
    }
    else {
    //将背景颜色还原
    document.getElementById(arrays[i]).parentNode.style.backgroundColor = "RGB(216,216,216)";
    document.getElementById(arrays[i]).style.display = "none";
    }
    }
    }

    效果图如下：

    上一篇：css3学习心得分享css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

    下一篇：CSS3正方体旋转示例代码css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网