Dropdown-Menü implementiert durch HTML+CSS3+JS

Dropdown-Menü implementiert durch HTML+CSS3+JS

Ergebnisse erzielen

html

<div Klasse="Container">
  <h1 class="title">Dropdown-Menü</h1>
  <ul>
    <li Klasse="Dropdown">
      <a href="#" data-toggle="dropdown">Erstes Menü <i class="icon-arrow"></i></a>
      <ul Klasse="Dropdown-Menü">
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Dienstleistungen</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </li>
    <li Klasse="Dropdown">
      <a href="#" data-toggle="dropdown">Zweites Menü <i class="icon-arrow"></i></a>
      <ul Klasse="Dropdown-Menü">
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Dienstleistungen</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </li>
    <li Klasse="Dropdown">
      <a href="#" data-toggle="dropdown">Drittes Menü <i class="icon-arrow"></i></a>
      <ul Klasse="Dropdown-Menü">
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Dienstleistungen</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </li>
  </ul>
  <p Klasse="text-center">
    Sehen Sie dasselbe Menü nur mit CSS3: <a href="https://codepen.io/pedronauck/pen/jaluz" target="_blank">https://codepen.io/pedronauck/pen/jaluz</a>
  </p>
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import-URL (https://fonts.googleapis.com/css?family=Pacifico);
Körper {
  Schriftfamilie: „Lato“, Helvetica, Arial;
  Schriftgröße: 16px;
}

.text-center {
  Textausrichtung: zentriert;
}

*, *:vor, *:nach {
  -webkit-border-sizing: Rahmenbox;
  -moz-border-sizing: Rahmenbox;
  Rahmengröße: Rahmenbox;
}

.container {
  Breite: 350px;
  Rand: 50px automatisch;
}
.container > ul {
  Listenstil: keiner;
  Polsterung: 0;
  Rand: 0 0 20px 0;
}

.Titel {
  Schriftfamilie: „Pacifico“;
  Schriftstärke: Norma;
  Schriftgröße: 40px;
  Textausrichtung: zentriert;
  Zeilenhöhe: 1,4;
  Farbe: #2980B9;
}

.dropdown ein {
  Textdekoration: keine;
}
.dropdown [data-toggle="dropdown"] {
  Position: relativ;
  Anzeige: Block;
  Farbe: weiß;
  Hintergrund: #2980B9;
  -moz-box-shadow: 0 1px 0 #409ad5 Einschub, 0 -1px 0 #20638f Einschub;
  -webkit-box-shadow: 0 1px 0 #409ad5 Einschub, 0 -1px 0 #20638f Einschub;
  Box-Shadow: 0 1px 0 #409ad5 Einschub, 0 -1px 0 #20638f Einschub;
  Textschatten: 0 -1px 0 rgba(0, 0, 0, 0,3);
  Polsterung: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
  Hintergrund: #2c89c6;
}
.Dropdown .Symbolpfeil {
  Position: absolut;
  Anzeige: Block;
  Schriftgröße: 0,7em;
  Farbe: #fff;
  oben: 14px;
  rechts: 10px;
}
.dropdown .icon-arrow.öffnen {
  -moz-transform:drehen(-180 Grad);
  -ms-transform:drehen(-180Grad);
  -webkit-transform: drehen(-180 Grad);
  transformieren: drehen (-180 Grad);
  -moz-Übergang: -moz-Transform 0,6 s;
  -o-Übergang: -o-Transformation 0,6 s;
  -webkit-Übergang: -webkit-Transform 0,6 s;
  Übergang: Transformation 0,6 s;
}
.dropdown .icon-arrow.schließen {
  -moz-transform:drehen(0Grad);
  -ms-transform:drehen(0Grad);
  -webkit-transform: drehen(0 Grad);
  transformieren: drehen (0 Grad);
  -moz-Übergang: -moz-Transform 0,6 s;
  -o-Übergang: -o-Transformation 0,6 s;
  -webkit-Übergang: -webkit-Transform 0,6 s;
  Übergang: Transformation 0,6 s;
}
.dropdown .icon-arrow:vor {
  Inhalt: „\25BC“;
}
.dropdown .dropdown-menü {
  maximale Höhe: 0;
  Überlauf: versteckt;
  Listenstil: keiner;
  Polsterung: 0;
  Rand: 0;
}
.dropdown .dropdown-menü li {
  Polsterung: 0;
}
.dropdown .dropdown-menü li a {
  Anzeige: Block;
  Farbe: #6f6f6f;
  Hintergrund: #EEE;
  -moz-box-shadow: 0 1px 0 weißer Einschub, 0 -1px 0 #d5d5d5 Einschub;
  -webkit-box-shadow: 0 1px 0 weißer Einschub, 0 -1px 0 #d5d5d5 Einschub;
  Box-Shadow: 0 1px 0 weißer Einschub, 0 -1px 0 #d5d5d5 Einschub;
  Textschatten: 0 -1px 0 rgba(255, 255, 255, 0,3);
  Polsterung: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
  Hintergrund: #f6f6f6;
}
.dropdown .anzeigen, .dropdown .ausblenden {
  -moz-transform-origin: 50 % 0 %;
  -ms-transform-origin: 50 % 0 %;
  -webkit-transform-origin: 50 % 0 %;
  Transform-Ursprung: 50 % 0 %;
}
.dropdown .anzeigen {
  Anzeige: Block;
  maximale Höhe: 9999px;
  -moz-transform: SkalaY(1);
  -ms-transform: SkalaY(1);
  -webkit-transform: MaßstabY(1);
  transformieren: scaleY(1);
  Animation: Animation anzeigen, 0,5 s, Ein- und Ausblenden;
  -moz-animation: ShowAnimation 0,5 s, Easy-In-Out;
  -webkit-animation: showAnimation 0,5 s, Ein- und Ausschalten;
  -moz-transition: max. Höhe 1 s, leichtes Ein- und Aussteigen;
  -o-Übergang: max. Höhe 1 s, leichtes Ein- und Aussteigen;
  -webkit-transition: max. Höhe 1 Sek., Ein-/Ausstieg erleichtert;
  Übergang: max. Höhe 1 s, leichtes Ein- und Aussteigen;
}
.dropdown .ausblenden {
  maximale Höhe: 0;
  -moz-transform: SkalaY(0);
  -ms-transform: SkalaY(0);
  -webkit-transform: MaßstabY(0);
  transformieren: scaleY(0);
  Animation: HideAnimation 0,4 s Ausblendung;
  -moz-animation: hideAnimation 0,4 s Ausstieg;
  -webkit-animation: hideAnimation 0,4 s Ausstieg;
  -moz-transition: maximale Höhe, 0,6 s Ausstieg;
  -o-Übergang: maximale Höhe, 0,6 s, Ausstieg;
  -webkit-transition: maximale Höhe, 0,6 s Auslaufzeit;
  Übergang: max. Höhe 0,6 s, Auslaufen;
}

@keyframes showAnimation {
  0% {
    -moz-transform: MaßstabY(0,1);
    -ms-transform: MaßstabY(0,1);
    -webkit-transform: MaßstabY(0,1);
    transformieren: scaleY(0,1);
  }
  40 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  100 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: MaßstabY(0,1);
    -ms-transform: MaßstabY(0,1);
    -webkit-transform: MaßstabY(0,1);
    transformieren: scaleY(0,1);
  }
  40 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  100 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: MaßstabY(0,1);
    -ms-transform: MaßstabY(0,1);
    -webkit-transform: MaßstabY(0,1);
    transformieren: scaleY(0,1);
  }
  40 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,04);
    -ms-transform: MaßstabY(1,04);
    -webkit-transform: MaßstabY(1,04);
    transformieren: scaleY(1,04);
  }
  100 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(0);
    -ms-transform: SkalaY(0);
    -webkit-transform: MaßstabY(0);
    transformieren: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(0);
    -ms-transform: SkalaY(0);
    -webkit-transform: MaßstabY(0);
    transformieren: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: SkalaY(1);
    -ms-transform: SkalaY(1);
    -webkit-transform: MaßstabY(1);
    transformieren: scaleY(1);
  }
  60 % {
    -moz-transform: MaßstabY(0,98);
    -ms-transform: MaßstabY(0,98);
    -webkit-transform: MaßstabY(0,98);
    transformieren: scaleY(0,98);
  }
  80 % {
    -moz-transform: MaßstabY(1,02);
    -ms-transform: MaßstabY(1,02);
    -webkit-transform: MaßstabY(1,02);
    transformieren: scaleY(1,02);
  }
  100 % {
    -moz-transform: SkalaY(0);
    -ms-transform: SkalaY(0);
    -webkit-transform: MaßstabY(0);
    transformieren: scaleY(0);
  }
}

js

// Dropdown-Menü
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(Funktion(el){
	var button = el.querySelector('a[data-toggle="dropdown"]'),
			Menü = el.querySelector('.dropdown-menu'),
			Pfeil = Schaltfläche.Abfrageselektor('i.icon-arrow');

	button.onclick = Funktion(Ereignis) {
		wenn(!menu.hasClass('anzeigen')) {
			menu.classList.add('anzeigen');
			menu.classList.remove('ausblenden');
			arrow.classList.add('öffnen');
			arrow.classList.remove('schließen');
			event.preventDefault();
		}
		anders {
			menu.classList.remove('anzeigen');
			menu.classList.add('ausblenden');
			arrow.classList.remove('öffnen');
			Pfeil.classList.add('schließen');
			event.preventDefault();
		}
	};
})

Element.prototype.hasClass = Funktion(Klassenname) {
    returniere dies.className && neuer RegExp("(^|\\s)" + className + "(\\s|$)").test(dieses.className);
};

Oben ist der detaillierte Inhalt des Dropdown-Menüs, das mit HTML+CSS3+JS implementiert wurde. Weitere Informationen zum Dropdown-Menü mit HTML+CSS3+JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<:  Detaillierte Erklärung der HTML-Download-Funktion

>>:  CSS-Stil zurücksetzen und löschen (damit verschiedene Browser den gleichen Effekt anzeigen)

Artikel empfehlen

mysql-8.0.15-winx64 verwendet das Zip-Paket zur Installation und der Dienst wird sofort nach dem Start heruntergefahren

Die in diesem Beispiel verwendete MySQL-Version i...

Umfassende Analyse von optimistischer Sperre, pessimistischer Sperre und MVCC in MySQL

Vorwort Bei der tatsächlichen Verwendung der Date...

Detailliertes Beispiel für JavaScript-Array-Methoden

Inhaltsverzeichnis Einführung Erstellen eines Arr...

Zusammenfassung der drei Möglichkeiten zum Erstellen neuer Elemente

Erstens: über Text/HTML var txt1="<h1>...

CSS3-Mobil-Vw+Rem-Methode zum Erreichen eines reaktionsfähigen Layouts ohne Abhängigkeit von JS

1. Einleitung (1) Einführung in vw/vh Bevor wir s...

Drei Beispiele für Unschärfe-Hintergrundeffekte mit CSS3

Beginnen wir nicht mit der Einleitung, sondern ko...

Lösen Sie das Problem der Containerverwaltung mit Docker Compose

Im Docker-Design führt ein Container nur eine Anw...

So implementieren Sie eine geplante automatische Sicherung von MySQL unter CentOS7

Das Schönste, was in einer Produktionsumgebung pa...

Detaillierte Anwendungsfälle von MySql Escape

MySQL-Escape Escape bedeutet die ursprüngliche Se...

Verwenden Sie eine DIV-Maske, um das Problem zu lösen, dass das direkte Aktivieren des Kontrollkästchens mit der Maus ungültig ist

Während des Front-End-Entwicklungsprozesses trat e...

JavaScript implementiert schnell Kalendereffekte

In diesem Artikelbeispiel wird der spezifische Ja...

Dünne Linientabelle zum Drucken von Webseiten + ultimative Strategie zum Drucken von Seiten

Als ich kürzlich für einen Kunden druckte, bat er ...

So erstellen Sie eine Ansicht für mehrere Tabellen in MySQL

Erstellen Sie in MySQL eine Ansicht für zwei oder...

Containerisierungstransformation für Docker-Großprojekte

Virtualisierung und Containerisierung sind zwei u...

Verwendung des HTML-H-Titel-Tags

Die Verwendung von H-Tags, insbesondere h1, war sc...