HTML6 implementiert Beispielcode für Faltmenüs und Akkordeonmenüs

Der Hauptteil der Seite:

<body> <ul id="Menü">
          <li>   
                 <a href="#">Menü der ersten Ebene 1</a>
                 <ul>
                        <li>Sekundäres Menü 1-1</li>
                        <li>Sekundäres Menü 1-2</li>
                        <li>Sekundäres Menü 1-3</li>
                 </ul>       
          </li>
          <li>    
                  <a href="#">Menü der ersten Ebene 2</a>
                  <ul>
                        <li>Sekundäres Menü 2-1</li>
                        <li>Sekundäres Menü 2-2</li>
                        <li>Sekundäres Menü 2-3</li>
                  </ul>   
          </li>
          <li>
                  <a href="#">Menü der ersten Ebene 3</a>
                  <ul>
                        <li>Sekundäres Menü 3-1</li>
                        <li>Sekundäres Menü 3-2</li>
                        <li>Sekundäres Menü 3-3</li>
                  </ul> 
          </li>
          <li>
                  <a href="#">Menü der ersten Ebene 4</a>
                  <ul>
                        <li>Sekundäres Menü 4-1</li>
                        <li>Sekundäres Menü 4-2</li>
                        <li>Sekundäres Menü 4-3</li>
                  </ul> 
          </li>
  <ul>
</body>

Beispiel für ein Faltmenü:

CSS-Teil

<Kopf>
<style type="text/css">
li{
    list-style:none; entferne die Grafiken vor der Liste}
li a{
    color:#123; Legt die Textfarbe des Menüs der ersten Ebene fest}
#Menü ul{
    display:none; Legt fest, dass das sekundäre Menü standardmäßig nicht angezeigt wird}
#menu>li:hover ul{
    display:block; Wenn die Maus über das Menü der ersten Ebene bewegt wird, wird das Menü der zweiten Ebene angezeigt}
</Stil>
</Kopf>

Beispiel für ein Akkordeonmenü:

CSS-Teil

<Kopf>
<style type="text/css">
li{
    list-style:none; entferne die Grafiken vor der Liste}
li a{
    color:#123; Legt die Textfarbe des Menüs der ersten Ebene fest}
#menu>li,#menu>li>a,#menu>li>ul{
    float:left; Menü der ersten Ebene, Menü der zweiten Ebene bewegt sich nach links}
#menu>li>a{
    Anzeige:Block;
    Hintergrundfarbe;rot;    
}
#menu>li:hover ul{
    Anzeige:Block;
}
#menu>ul{
     Anzeige: keine;
     Breite: 100px;
     Hintergrundfarbe: #123;
     Polsterung oben: 20px;
}
</Stil>
</Kopf>

Zusammenfassen

Oben sehen Sie den Beispielcode für die Implementierung des vom Editor eingeführten Faltmenüs und Akkordeonmenüs in HTML6. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<: Verwenden von CSS3 zum Erstellen von Header-Animationseffekten

>>: Vorschläge zur Optimierung der Webseiten-Kopfzeile