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

MySQL uninstall and install graphic tutorial under Linux

This is my first time writing a blog. I have been...

Implementation of vue-nuxt login authentication

Table of contents introduce Link start Continue t...

MySQL 5.7.20 free installation version configuration method graphic tutorial

I have seen many relevant tutorials on the Intern...

How to insert video into HTML and make it compatible with all browsers

There are two most commonly used methods to insert...

Brief introduction and usage of Table and div

Web front end 1 Student ID Name gender age 01 Zha...

How to deploy zabbix_agent in docker

zabbix_agent deployment: Recommendation: zabbix_a...

Steps to install MySQL using Docker under Linux

As a tester, you may often need to install some s...

Fixed table width table-layout: fixed

In order to make the table fill the screen (the re...

How to use Axios asynchronous request API in Vue

Table of contents Setting up a basic HTTP request...

Thirty HTML coding guidelines for beginners

1. Always close HTML tags In the source code of p...

Vue implements zip file download

This article example shares the specific code of ...

Create a movable stack widget function using flutter

This post focuses on a super secret Flutter proje...

Detailed explanation of Nodejs array queue and forEach application

This article mainly records the problems and solu...

How to successfully retrieve VMware Esxi root password after forgetting it

Prepare a CentOS6 installation disk (any version)...