HTML6 Implementation folding menu and accordion menu example code

Time:2019-9-9

The main body of the page:

<body>  <ul id="menu">
          <li>   
                 <a href=""> Level 1 Menu</a>
                 <ul>
                        <li> Level 2 menu 1-1</li>
                        <li> Level 2 menu 1-2</li>
                        <li> Level 2 menu 1-3</li>
                 </ul>       
          </li>
          <li>    
                  <a href=""> Level 1 Menu 2</a>
                  <ul>
                        <li> Level 2-1 Menu</li>
                        <li> Level 2-2 Menu</li>
                        <li> Level 2-3 Menu</li>
                  </ul>   
          </li>
          <li>
                  <a href=""> Level 1 menu 3</a>
                  <ul>
                        <li> Level 2 menu 3-1</li>
                        <li> Level 2 menu 3-2</li>
                        <li> Level 2 menu 3-3</li>
                  </ul> 
          </li>
          <li>
                  <a href=""> Level 1 Menu 4</a>
                  <ul>
                        <li> Level 2 menu 4-1</li>
                        <li> Level 2 menu 4-2</li>
                        <li> Level 2 menu 4-3</li>
                  </ul> 
          </li>
  <ul>
</body>

Folding menu example:

CSS section

<head>
<style type="text/css">
li{
    List-style: none; remove the graphics in front of the list
}
li a{
    Color: 123; Set the text color of the first-level menu
}
#menu ul{
    Display: none; Set the secondary menu not to be displayed by default
}
#menu>li:hover ul{
    Display: block; when the mouse slides over a first-level menu, it displays a second-level menu
}
</style>
</head>

Examples of accordion menus:

CSS section

<head>
<style type="text/css">
li{
    List-style: none; remove the graphics in front of the list
}
li a{
    Color: 123; Set the text color of the first-level menu
}
#menu>li,#menu>li>a,#menu>li>ul{
    Float: left; Level 1 menu, Level 2 menu move 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>

summary

Above is the example code of HTML6 folding menu and accordion menu introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message, Xiaobian will reply to you in time. Thank you very much for your support to developpaer.
If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!

Recommended Today

Introduction of SDK for Rainbow Soft Face Recognition under Qt

brief introduction In this paper, we will briefly introduce the application process of Hongsoft Face Recognition SDK under Qt platform, which includes three main steps: material preparation, environment construction and code implementation, to help us in the process of reference. Development environment: win10 Qt5.11.2 (Mingw 32 bit) stores reserve Face Recognition SDK (ArcSoft_ArcFace) Download HongSoft […]