Write a pure HTML5 fold menu with details

skill • 2 years ago • Lao Li next door Last edited on 2022-06-22 10:33:26

Details is an interesting and useless tag added to HTML5 because of its poor compatibility. According to Baidu, details is only compatible with Chrome, Safari 8+ ，Opera 26+

The details tag is used to describe the details of a document or part of a document. It is easier to understand: Collapse Menu

example:

 <details class="menu" open> <summary>menu</summary>   <ul> <li><a href="#">Submenu</a></li> <li><a href="#">Submenu</a></li>   </ul> </details>

Open defines whether details are visible. To be clear, it is expanded by default when added, and closed by default when not added.

You can define related styles with css

 .menu summary {   height: 40px;   line-height: 40px;   text-indent: 10px;   outline: none;   font-weight: 700;   border-top: 1px solid #ddd;   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #CCCCCC));   cursor: pointer; } .menu ul {   padding: 10px 0;   margin: 0; } .menu ul li {   list-style: none;   text-indent: 25px;   height: 30px;   line-height: 30px; } .menu ul li a {   display: block;   color: #666;   text-decoration: none; }

Complete code:

 <! doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled document</title> <style> * {     margin: 0;     padding: 0; } a {     text-decoration: none; } #conter {     width: 1000px;     margin: auto; } #help-left {     width: 200px;     font-family: 'microsoft YaHei';     float: left; } .menu {     border-left: 1px solid #ccc;     border-right: 1px solid #ccc; } .menu:last-child {     border-bottom: 1px solid #ccc; } .menu summary {     height: 40px;     line-height: 40px;     text-indent: 10px;     outline: none;     font-size: 14px;     font-weight: 700;     border-top: 1px solid #ddd;     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #CCCCCC));     cursor: pointer; } .menu summary::-webkit-details-marker { display: none; } /*Images or characters are available. If images are used, set the value of content to null*/ .menu summary:before {     content: "+"; /*background: url(../Images/right.png) no-repeat center center;*/ /*Picture when stowed*/     display: inline-block;     width: 16px;     height: 16px;     margin-right: 10px;     font-size: 18px;     font-weight: 700; } .menu[open] summary:before {     content: "-"; /*background: url(../Images/down.png) no-repeat center center;*/ /*Picture when expanded*/ } .menu ul {     padding: 10px 0; } .menu ul li {     list-style: none;     text-indent: 25px;     font-size: 12px;     height: 30px;     line-height: 30px; } .menu ul li a {     display: block;     color: #666; } .menu ul li a:hover {     text-decoration: underline; } </style> </head> <body> <section id="conter">   <section id="help-left">     <details class="menu" open> <summary>Menu 1</summary>       <ul> <li><a href="#">Submenu</a></li> <li><a href="#">Submenu</a></li>       </ul>     </details>     <details class="menu" open> <summary>Menu 2</summary>       <ul> <li><a href="#">Submenu</a></li> <li><a href="#">Submenu</a></li>       </ul>     </details>     <details class="menu" open> <summary>Menu 3</summary>       <ul> <li><a href="#">Submenu</a></li> <li><a href="#">Submenu</a></li> <li><a href="#">Submenu</a></li>       </ul>     </details>     <details class="menu" open> <summary>Menu 4</summary>       <ul> <li><a href="#">Submenu</a></li> <li><a href="#">Submenu</a></li> <li><a href="#">Submenu</a></li>       </ul>     </details>   </section> </section> </body> </html>

It is very useful without considering compatibility. After all, the current browsers are only Chrome and others~~

Write the first fold menu of pure HTML5 with details

This article is written by@ Lao Li next door Issued on 2022-06-01 on Yeluzi Blog , unless otherwise specified, all articles in this blog are original, please retain the source for reprinting.

comment (0)