Beispielcode für ein großes Dropdown-Menü, implementiert in reinem CSS

Dies ist ein großes Dropdown-Menü, das rein in CSS implementiert ist. Dieses große Menü besteht aus HTML und reinem CSS-Code, ohne JS-Code und ist nicht auf Plug-Ins von Drittanbietern angewiesen. Es eignet sich für große Websites mit vielen Spaltenkategorien.

Sehen Sie sich die Demo-Adresse an: css_menu

Quellcode herunterladen: css_menu_jb51.rar

HTML-Struktur

Die HTML-Struktur dieses Megamenüs ist wie folgt:

<Navigation>
  <ul Klasse="Container ul-reset">
    <li><a href='#'>Startseite</a></li>
    <li Klasse='ablesbar'>
      <a href='#'>Kategorie Eins</a>
      <div Klasse = "Mega-Menü">
        <div Klasse="Container cf">
          <ul Klasse="ul-reset">
            <h3>Überschrift 1</h3>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
          </ul><!-- .ul-reset -->
          <ul Klasse="ul-reset">
            <h3>Überschrift 2</h3>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
          </ul><!-- .ul-reset -->
          <ul Klasse="ul-reset">
            <h3>Überschrift 3</h3>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
            <li><a href='#'>Unterlink der Kategorie Eins</a></li>
          </ul><!-- .ul-reset -->
          <ul Klasse="ul-reset">
            <h3>Überschrift 4</h3>
            <li><img src="http://placehold.it/205x172"></li>
          </ul>
        </div><!-- .container -->
      </div><!-- .mega-Menü -->
    </li><!-- .droppable -->
    <li Klasse='ablesbar'>
      <a href='#'>Kategorie Zwei</a>
      <div Klasse = "Mega-Menü">
        <div Klasse="Container cf">
          <ul Klasse="ul-reset">
            <h3>Überschrift 1</h3>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
          </ul><!-- .ul-reset -->
          <ul Klasse="ul-reset">
            <h3>Überschrift 2</h3>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
          </ul><!-- .ul-reset -->
          <ul Klasse="ul-reset">
            <h3>Überschrift 3</h3>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
          </ul><!-- .ul-reset -->
          <ul Klasse="ul-reset">
            <h3>Überschrift 4</h3>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
            <li><a href='#'>Unterlink der Kategorie Zwei</a></li>
          </ul><!-- .ul-reset -->
        </div><!-- .container -->
      </div><!-- .mega-menu-->
    </li><!-- .droppable -->
    <li><a href='#'>Kategorie Drei</a></li>
    <li><a href='#'>Kategorie Vier</a></li>
    <li><a href='#'>Kategorie Fünf</a></li>
    <li><a href='#'>Kategorie Sechs</a></li>
  </ul><!-- .container .ul-reset -->
</nav>

CSS

Fügen Sie die folgenden CSS-Stile für das Megamenü hinzu:

/* #Zurücksetzen
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html {Boxgröße: Rahmenbox;}
*, *:vorher, *:nachher {box-sizing: inherit; }
/* #Universelle und Standardstile
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
Körper {
    Hintergrund: url(../img/black-wood-small.jpg);
    Farbe: #ddd;
    Schriftfamilie: „Open Sans“, serifenlos;
    Schriftgröße: 14px;
  Zeilenhöhe: 1;
  Rand: 0;
  Polsterung: 0;
  Textausrichtung: zentriert;
}
eine {Textdekoration: keine;}
h1 {
  Schriftgröße: 40px;
    Schriftstärke: 700;
  Rand unten: 20px;
    Rand oben: 20px;
}
h2 {
  Schriftgröße: 15px;
    Schriftstärke: 600;
  Rand unten: 30px;
    Rand oben: 10px;
}
.container {
  Rand: automatisch;
  Breite: 940px;
}
.ul-reset {
  Polsterung links: 0;
   Rand oben: 0;
   Rand unten: 0;
  Listenstil: keiner;
}
/* #Navigationsstile
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
Navigation {
  Hintergrund: #424242;
  Schriftgröße: 0;
  Position: relativ;
}
nav > ul > li {
  Anzeige: Inline-Block;
    Schriftgröße: 14px;
    Polsterung: 0 15px;
    Position: relativ;
}
nav > ul > li:erstes-Kind {padding-left: 0;}
nav > ul > li:letztes Kind {padding-right: 0;}
nav > ul > li > a {
  Farbe: #fff;
    Anzeige: Block;
    Position: relativ;
    Polsterung: 20px 0;
    Rahmen unten: 3px durchgehend transparent;
}
nav > ul > li:hover > a {
  Farbe: #69aae0; 
    Rahmen unten: 3px durchgezogen #69aae0;
}
/* #Mega-Menüstile
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mega-Menü {
  Hintergrund: #f0f0f0;
    Anzeige: keine;
    links: 0;
    Position: absolut;
    Textausrichtung: links;
    Breite: 100 %;
}
.mega-Menü h3 {Farbe: #444;}
.mega-Menü ul {
  schweben: links;
    Rand unten: 20px;
    Rand rechts: 40px;
    Breite: 205px;
}
.mega-Menü ul: letztes Kind {Margin-Right: 0;}
.mega-Menü ein {
  Rahmen unten: 1px durchgezogen #ddd;
    Farbe: #4ea3d8;
    Anzeige: Block;
    Polsterung: 10px 0;
}
.mega-Menü a:hover {Farbe: #2d6a91;}
/* #Droppbare Klassenstile
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.droppable {position: statisch;}
.droppable > a:nach {
  Inhalt: "\f107";
    Schriftfamilie: FontAwesome;
    Schriftgröße: 12px;
    Polsterung links: 6px;
    Position: relativ;
    oben: -1px;
}
.droppable:hover .mega-menu {Anzeige: Block;}
/* #Browser Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:vorher,
.cf:nach {
  Inhalt: " "; /* 1 */
   Anzeige: Tabelle; /* 2 */
}
.cf:nach {klar: beide;}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Detaillierte Erklärung, wo das von Docker abgerufene Image gespeichert ist

>>: mysql8.0.23 Linux (Centos7) Installation vollständiges und ausführliches Tutorial