3 einfache und schöne CSS3 Menüs mit coolen Mouse-Over-Effekten

Wie Sie ganz einfach 3 tolle und interessante CSS3-Menüs erstellen

3-css3-menüs-hover-effekte

In meinem heutigen kurzen Blogartikel möchte ich Ihnen zeigen, wie Sie 3 ganz einfache und elegante CSS3-Menüs erstellen können. Die Original-Menüs stammen von Callum Williams und wurden von diesem ursprünglich am 21. September 2013 auf Codepen.io veröffentlicht.

Den Original-Code zu den 3 Beispielen können Sie im Originalartikel (unter dem Share-Button) oder aber hier herunterladen: CSS3-Menüs: 3 coole Hover-Effekte

Fertige CSS3-Menüs im Demo ansehen:

3-css3-menüs-hover-effekte

HTML-Grundstruktur






CSS-Anweisungen für Menü 1, Menü 2 und Menü 3

Der CSS-Code stellt zuerst für jedes einzelne Menü eine eigene Hintergrund-Farbe zur Verfügung. Danach werden mit der CSS3-Anweisung »Transitions« (Übergänge) die einzelnen Effekte angesprochen und ausgeführt.

#nav-1 {
  background: #3fa46a;
}
#nav-2 {
  background: #5175C0;
}
#nav-3 {
  background: #EEA200;
}

.link-1 {
  transition: 0.3s ease;
  background: #3fa46a;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #3fa46a;
  border-bottom: 4px solid #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
.link-1:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}

.link-2 {
  transition: 0.6s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-right: 2px dotted transparent;
  padding: 30px 8px 0 10px;
  margin: 0 10px;
}
.link-2:hover {
  border-right: 2px dotted #ffffff;
  padding-bottom: 24px;
}
.link-3 {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.link-3:hover {
  background-color: #ffffff;
  color: #EEA200;
  padding: 24px 10px;
}

Achtung!
Ich möchte Sie darauf aufmerksam machen, dass diese 3 Beispiele nur in den neuesten und aktuellsten Browsern funktionieren. In den Mobilversionen (Smartphone, Tablet) werden die Übergänge und Animationen möglicherweise fehlerhaft bis gar nicht dargestellt!

Tweet about this on TwitterShare on Google+1Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *