CSS+JS制作纵向点击展开的二级导航菜单

江山如画 • 2018年9月19日下午5:16 • 网页特效 • 阅读 3426

网页制作时，如产品分类目录、导航等，需要制作纵向二级导航菜单，点击展开分类显示子目录，再点击收缩起目录。

中国网页设计分享的二级导航菜单使用CSS+JS制作，调用简单方便，可移植、可修改。

网页HTML代码（放在body区域）：

<div id="my_menu" class="sdmenu">
      <div>
        <span>教程</span>
        <a href="http://www.125jz.com/course/html">HTML/HTML5</a>
        <a href="http://www.125jz.com/course/css">CSS/CSS3</a>
        <a href="http://www.125jz.com/course/js">JavaScript/jquery</a>
        <a href="http://www.125jz.com/course/webdevelopment">建站入门</a>
      </div>
      <div>
        <span>设计</span>
        <a href="http://www.125jz.com/design/appreciate">设计欣赏</a>
        <a href="http://www.125jz.com/design/images">设计素材</a>
      </div>
      <div>
        <span>资源</span>
        <a href="http://www.125jz.com/resources/freespace">免费空间</a>
        <a href="http://www.125jz.com/resources/effects">网页特效</a>
       </div>
       <div>
        <span><a href="http://www.125jz.com/">网页制作</a></span>
       </div>
       <div>
        <span><a href="http://www.125jz.com/">网页设计</a></span>
       </div>
    </div>

页面引入CSS和JS文件:

<script src="sdmenu.js" type="text/javascript"></script>
<link href="css.css" rel="stylesheet" type="text/css" />

在页面底部</html>后添加

<script type="text/javascript">
  var myMenu;
  window.onload = function() {
    myMenu = new SDMenu("my_menu");
    myMenu.init();
    var firstSubmenu = myMenu.submenus[0];
          myMenu.expandMenu(firstSubmenu);
  };
</script>

css.css代码：

div.sdmenu {
  width: 325px; font-size:14px;  color:#fff; margin-bottom:1px;
}
div.sdmenu div {
  background: #fc3939;overflow: hidden;
}
* html div.sdmenu div{
    float:left
}
div.sdmenu div.collapsed {
  height: 37px;
}
div.sdmenu div span {
  display: block;line-height:37px;width:325px;font-weight: bold;color: white;cursor: pointer; margin-left:10px;_margin-left:0px;margin-bottom:1px;
}
div.sdmenu div span a{
    padding:0; background:none; border:0; font-size:14px;line-height:37px;display:block
}
div.sdmenu div.collapsed {
  background:#fc3939; width:325px; color:#fff;margin-bottom:1px;
}
div.sdmenu div.collapsed span{
    color:#fff; line-height:37px
}
div.sdmenu div.collapsed span a.current{
    color:#ad8634;
}
div.sdmenu div a {
  padding-left:47px;display: block;border-bottom: 1px solid #fff;color: #333;font-size:13px; background:#eee; line-height:28px; text-decoration:none;
}
div.sdmenu div a.current {
  background : #fc3939;  color:#fff
}
div.sdmenu div span a.current {
  background :none; color:#fff
}
div.sdmenu div a:hover {
  background :#dfdede;text-decoration: none;
}
div.sdmenu div span a:hover {
  background:none;
}
.sdmenu span a,.sdmenu span a:link,.sdmenu span a:visited{ color:#fff;}

js代码略……

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2606.html