在线咨询
服务热线
服务热线:021-61554458
TOP
网站建设 四川网站建设> 建站学堂 四川网站建设HTML6实现折叠菜单与手风琴菜单的实例代码

四川网站建设HTML6实现折叠菜单与手风琴菜单的实例代码

来源:网站建设 | 时间:2020-04-11 | 浏览:

HTML6实现折叠菜单与手风琴菜单的实例代码

页面主体一部分:

<body>  <ul id="menu">
          <li>   
                 <a href="#">一级莱单1</a>
                 <ul>
                        <li>二级菜单1-1</li>
                        <li>二级菜单1-2</li>
                        <li>二级菜单1-3</li>
                 </ul>       
          </li>
          <li>    
                  <a href="#">一级莱单2</a>
                  <ul>
                        <li>二级菜单2-1</li>
                        <li>二级菜单2-2</li>
                        <li>二级菜单2-3</li>
                  </ul>   
          </li>
          <li>
                  <a href="#">一级莱单3</a>
                  <ul>
                        <li>二级菜单3-1</li>
                        <li>二级菜单3-2</li>
                        <li>二级菜单3-3</li>
                  </ul> 
          </li>
          <li>
                  <a href="#">一级莱单4</a>
                  <ul>
                        <li>二级菜单4-1</li>
                        <li>二级菜单4-2</li>
                        <li>二级菜单4-3</li>
                  </ul> 
          </li>
  <ul>
</body>

伸缩莱单 例:

css一部分

<head>
<style type="text/css">
li{
    list-style:none;  除掉目录前边图型
}
li a{
    color:#123;    设定一级莱单文字色调
}
#menu ul{
    display:none;  设定二级菜单默认设置无法显示
}
#menu>li:hover ul{
    display:block;       鼠标滑过一级莱单时,显示信息二级菜单
}
</style>
</head>

电子琴莱单 例:

css一部分

<head>
<style type="text/css">
li{
    list-style:none;  除掉目录前边图型
}
li a{
    color:#123;    设定一级莱单文字色调
}
#menu>li,#menu>li>a,#menu>li>ul{
    float:left;             一级莱单,二级菜单左挪动
}
#menu>li>a{
    display:block;
    background-color;red;    
}
#menu>li:hover ul{
    display:block;
}
#menu>ul{
     dispaly:none;
     width:100px;
     background-color:#123 ;
     padding-top:20px;
}
</style>
</head>

小结

之上上述是我给大伙儿详细介绍的HTML6完成伸缩莱单与电子琴莱单的案例编码,期待对大伙儿有一定的协助,假如大伙儿有一切有意者帮我留言板留言,我会立即回应大伙儿的。在这里也特别感谢大伙儿对脚本之家网址的适用!
如果你觉得文中对给你协助,热烈欢迎转截,劳烦标明出處,感谢!