HTML6 implements folding menu and accordion menu example code

HTML6 implements folding menu and accordion menu example code

The main part of the page:

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

Folding menu example:

CSS part

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

Accordion menu example:

CSS part

<head>
<style type="text/css">
li{
    list-style:none; remove the graphics in front of the list}
li a{
    color:#123; Set the first level menu text color}
#menu>li,#menu>li>a,#menu>li>ul{
    float:left; first level menu, second level menu moves left}
#menu>li>a{
    display:block;
    background-color;red;    
}
#menu>li:hover ul{
    display:block;
}
#menu>ul{
     display:none;
     width:100px;
     background-color:#123 ;
     padding-top:20px;
}
</style>
</head>

Summarize

The above is the example code of HTML6 implementing folding menu and accordion menu introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  Using CSS3 to create header animation effects

>>:  Web page header optimization suggestions

Recommend

How to use Nginx to carry rtmp live server

This time we set up an rtmp live broadcast server...

Solutions to MySql crash and service failure to start

I have been in contact with PHP for so long, but ...

How to implement Docker container self-start

Container auto-start Docker provides a restart po...

3 ways to add links to HTML select tags

The first one : Copy code The code is as follows: ...

Hyperlink icon specifications: improve article readability

1. What is the hyperlink icon specification ?<...

MySQL database advanced query and multi-table query

MySQL multi-table query Add a worksheet -- User t...

An example of elegantly writing status labels in Vue background

Table of contents Preface optimization Extract va...

About Tomcat combined with Atomikos to implement JTA

Recently, the project switched the environment an...

JavaScript to implement limited time flash sale function

This article shares the specific code of JavaScri...

Use and understanding of MySQL triggers

Table of contents 1. What is a trigger? 2. Create...

VMware Workstation installation Linux system

From getting started to becoming a novice, the Li...

Detailed steps to install VMware Tools from scratch (graphic tutorial)

VMware Tools is a tool that comes with VMware vir...

Detailed tutorial on installing CUDA9.0 on Ubuntu16.04

Preface: This article is based on the experience ...

mysql-8.0.16 winx64 latest installation tutorial with pictures and text

I just started learning about databases recently....

JavaScript to achieve a simple page countdown

This article example shares the specific code of ...