HTML6 -Beispielcode zum Implementieren des Menü- und Akkordeon -Menüs

Autor：Eve Cole Aktualisierungszeit：2025-05-17 18:32:01

Page Hauptteil:

 <body> <ul id=menu> <li> <a href=#>First Menu1</a> <ul> <li>Second Menu1</li> <li>Second Menu1-1</li> <li>Second Menu1-2</li> <li>Second Menu1-3</li> </ul> </li> <li>Second Menu1-3</li> </li> </li> <li> <a href=#>Second Menu2</a> <ul> <li>Second Menu2-1</li> <li>Second Menu2-2</li> <li>Second Menu2-3</li> </li> </li> <li>Second Menu2-3</a> <ul> <li>Second Menu3</a> <ul> <li>Second Menu3</a> <ul> <li>Second Menu3</a> <ul> <li>Second Menu3</li> <li> zweites Menü3 </li> </li> <li> Zweites Menü3 </a> <ul> <li> Menü der zweiten Ebene 4-1 </li> <li> Menü der zweiten Ebene 4-2 </li> <li> Menü der zweiten Ebene 4-3 </li> </li> </li> <ul> </body>

Beispiele für Klappmenü:

CSS -Teil

 <Head> <style type = text/css> li {listestyle: keine; Entfernen Sie die vorherigen Grafiken der Liste} li a {color:#123; Legen Sie die Textfarbe des Menüs der ersten Ebene ein} #Menu ul {display: None; Legen Sie das sekundäre Menü fest, das nicht standardmäßig angezeigt wird Wenn die Maus durch das Menü erster Ebene gleitet, wird das sekundäre Menü angezeigt.} </Style> </head>

Beispiel für das Akkordeon -Menü:

CSS -Teil

 <Head> <style type = text/css> li {listestyle: keine; Entfernen Sie die vorherige Abbildung der Liste} li a {color:#123; Legen Sie die Textfarbe des Menüs der ersten Ebene ein} #Menu> li,#Menü> LI> A,#Menü> LI> UL {Float: links; Menü erster Stufe, Menü auf zweiter Ebene links} #menu> li> a {display: block; Hintergrundfarbe; Rot; } #Menu> li: hover ul {display: block;}#menü> ul {display: keine; Breite: 100px; Hintergrundfarbe:#123; Padding-Top: 20px;} </style> </head>

Zusammenfassen

Das obige ist der Beispielcode für die Implementierung des vom Editors vorgelegten Menü- und Akkordeon -Menüs. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!

Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, drucken Sie ihn bitte nach. Bitte geben Sie die Quelle an, danke!