Hoverbuttons mit CSS

Schritt für Schritt zeige ich in diesem kleinen Tuturial, wie man hovernde Buttons für Navigationsleisten erstellt.

Inhaltsverzeichnis

Einfache Hoverbuttons
DIV-Tags nebeneinander anzeigen
Ein zweistufiges Menü mit Hoverbuttons und CSS

Einfache Hoverbuttons

Dieser Abschnitt zeigt, wie man mit DIV-Tags oder Tabellen Hover-Buttons realisieren kann.

Hoverbuttons mit Tabelle

Vorteil: Der Link geht bis an den Rand der Zelle.
Achtung: Das HTML-Element cellspacing=0 lässt sich in CSS nicht vernünftig umsetzen!

Dieser Link ist ein Hoverbutton

Und hier dasselbe in Rot

Hier folgen Hover-Buttons mit DIV-Elementen

Link in Div

Und hier noch ein Hover-Buttons innerhalb <p>-Tag

Link in Absatz mit ID

HTML

<table class="btn" border="0" cellspacing="0"
  cellpadding="0">
  <tr>
    <td>
      <a href="http://www.ecotronics.ch" class="btnblue">
        Dieser Link ist ein Hoverbutton
      </a>
    </td>
  </tr>

  <tr>
    <td>
      <a href="http://www.ecotronics.ch" class="btnred">
        Und hier dasselbe in Rot</a>
    </td>
  </tr>
</table>

<div class="divlink">
  <a href="http://www.ecotronics.ch" class="btnblue">
    Link in Div
  </a>
</div>

<div class="divlink">
  <a href="http://www.ecotronics.ch" class="btnblue">
    Link in Div
  </a>
</div>

<p>
  <a href="http://www.ecotronics.ch" 
    class="btnblue" id="unique">
    Link in Absatz mit ID
  </a>
</p>

CSS

<style>
<!--
.btn {
  width: 350px;
}

.divlink {
  width: 350px;
  background-color: rgb(153, 204, 255);
} 

a  {  display: block;
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-size: 10pt;
  text-align: center;
  
  padding-top: 3pt;
  padding-bottom: 3pt;

  border-color: rgb(255,0,0);
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
   
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  
}

a:visited  {
    text-decoration: none;
}

a.btnblue {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 255);
}

a.btnblue:hover  {
    color: rgb(0, 0, 255);
    font-weight: bold;
    border-color: rgb(0, 0, 0);
    background-color: rgb(153, 204, 255);
}

a.btnred {
  color: rgb(0, 0, 0);
  font-weight: bold;
  background-color: rgb(255, 0, 0);
  border-color: rgb(0,0,0);
}

a.btnred:hover  {
  color: rgb(255, 0, 0);
  font-weight: bold;
  background-color: rgb(0, 0, 0);
  border-color: rgb(255,0,0);
}

#unique {
  width: 200px;
}

-->
</style>

DIV-Tags nebeneinander anzeigen

Das folgende Menü zeigt ein horizontales Hovermenü, das aufklappt und eine zweite Ebene anzeigt (ebenfalls als horizontales Menü). Dieses Menü verwendet neben CSS auch JQuery. Speziell ist an diesem Beispiel, dass ich das Menü nicht mit Listen-Tags, sondern mit verschachtelten DIV-Tags realisiert habe.

Menü 1

Menü 2

Menü 3

Das HTML für diese Leiste sieht folgendermassen aus:

<div class="divinline">Menü 1</div>
<div class="divinline">Menü 2</div>
<div class="divinline">Menü 3</div>
<p style="clear: left;"/>

Und hier das CSS dazu:

.divinline {
  float: left;
  border: 2px #000000 solid;
  margin-right: -2px;
  padding: 3px 15px 3px 15px;
  background-color: red;
}

Nebeneinander stehen die DIV-Tags wegen float:left, der Rest sorgt für die Ränder, Hintergrundfarbe und Abstände. Zu beachten sind v.a. zwei Dinge: Erstens muss das Tag nach dem letzten DIV-Tag das Floating mit clear:left wieder aufheben. Und zweitens dient das margin-right: -2px dazu, zu verhindern, dass die Ränder dort, wo zwei Tags aneinander stossen, doppelt so dick sind wie links und rechts.

Ein zweistufiges Menü mit Hoverbuttons und CSS

Das folgende Menü zeigt ein horizontales Hovermenü, das aufklappt und eine zweite Ebene anzeigt (ebenfalls als horizontales Menü). Dieses Beispiel verwendet die HTML- und CSS-Techniken aus den zwei vorangehenden Kapiteln, ergänzt sie aber mit JavaScript, wobei ich auf das bewährte Framework JQuery zurückgreife.
Man benötigt mindestens zwei Leisten, eine für das Hauptmenü und eine für das Untermenü. Da man ohnehin mit JQuery arbeitet, wäre es denkbar, das Untermenü je nach gewählten Obermenü mit den verschiedenen Menüpunkten zu befüllen. Hier wähle ich einen anderen Ansatz: Es gibt für jedes Untermenü eine eigene Leiste und JQuery blendet beim Hovern die gewählte Untermenü-Leiste ein- und aus. Mit diesem Ansatz lassen sich die Untermenüs flexibel erweitern, ohne dass der JQuery-Code geändert werden muss.

So sieht das Menü beispielsweise aus:

Hauptmenü 1 Hauptmenü 2

Untermenü 1a Untermenü 1b Untermenü 1c

Untermenü 2a

Dieser Text darf nicht springen

HTML

<div class="navmain">
  <a class="item" id="menu1" href="#">
    Hauptmen&uuml; 1
  </a>
  <a class="item last" id="menu2" href="#">
    Hauptmen&uuml; 2
  </a>
</div>

<div id="navdetailleer">&nbsp;</div>

<div class="navdetail" id="navdetail1">
  <a class="item" href="#">
    Untermen&uuml; 1a
  </a>
  <a class="item" href="#">
    Untermen&uuml; 1b
  </a>
  <a class="item last" href="#">
    Untermen&uuml; 1c
  </a>
</div>

<div class="navdetail" id="navdetail2">
  <a class="item last" href="#">
    Untermen&uuml; 2a
  </a> 
</div>
<p class="left">Dieser Text darf nicht springen<br />

Folgende Punkte gilt es beim HTML zu beachten:

Für den IE ist das Attribut href zwingend, sonst ist die Style-Definition ..:hover wirkungslos!
Damit der Inhalt unterhalb der Menüleiste nicht springt, benötigt man ein leeres DIV-Element in der gleichen Höhe wie das versteckte Untermenü als Platzhalter.

CSS

/*Styles fuer zweistufige Menueleiste */
.navmain {
  height: 25px;
  width: 100%;
  background-color: #CC0000;
  color: white;
  font-weight: bold;
  padding-left: 40px;

}
.navdetail {
  clear: left;
  height: 25px;
  width: 100%;
  background-color: #AA0000;
  color: white;
  font-weight: bold;
  padding-left: 40px;
}

.item {
  border-left: 1px white solid;
  margin: 0px -1px 0px 0px;
  display: block;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  height: 25px;
  line-height:25px;  /* Text vertikal zentriert */
  text-decoration: none;
  color: #ffffff;
}

/* rechter Rand für letztes Menü */
.last {
  border-right: 1px white solid;
}

.navdetail a.item:hover {
  background-color: #FF0000;
  height: 25px;
}

#navdetailleer {
  height: 25px;
}

.left {
  clear: left;
}

Folgende Punkte gilt es beim CSS zu beachten:

Damit die weissen Ränder in der Mitte nicht doppelt so dick sind wie links und rechts, wird der rechte Rand nur beim letzten Element einer Reihe gezeichnet. Dieses Element enthält zwei Style-Klassen.
Die vertikale Zentrierung wird erreicht, indem height und line-height auf die gleiche Höhe gesetzt werden.

JavaScript mit JQuery

<script language="JavaScript" src="../js/jquery-1.4.2.min.js"></script>
<script LANGUAGE="JavaScript">
<!--
  $(document).ready(function(){
    colormain = $('.navmain .item').css('background-color');
    //Achtung: Muss konsistent sein mit CSS
    colorhover = '#FF0000';

    $('.navdetail').css('display', 'none');

    $('#menu1').hover(
      function() { 
        $('.navmain .item').css('background-color', colormain);
        /*Hoverfarbe wird nicht via CSS zugeteilt, weil sonst
          die Farbe beim Verlassen des Elementes nicht bleibt */
        $(this).css('background-color', colorhover);
        $('.navdetail').css('display', 'none'); 
        $('#navdetailleer').css('display', 'none'); 
        $('#navdetail1').css('display', 'block'); 
      }
    );


    $('#menu2').hover(
      function() { 
        $('.navmain .item').css('background-color', colormain);
        $(this).css('background-color', colorhover);
        $('.navdetail').css('display', 'none'); 
        $('#navdetailleer').css('display', 'none'); 
        $('#navdetail2').css('display', 'block'); 
      }
    );

    $('.navdetail').hover(
      function() {},
      function() {
        $('.navmain .item').css('background-color', colormain);
        $('.navdetail').css('display', 'none'); 
        $('#navdetailleer').css('display', 'block'); 
      }
    );
  });
//-->
</script>

Achtung:

Das Ein- und Ausblenden der Untermenüs beim Hovern erfolgt mit JQuery. Die JQuery-Methode hover hat zwei Funktionen: die erste bestimmt, was passiert, wenn das Element den Fokus erhält, die zweite, was passiert, wenn das Element wieder verlassen wird. Die erste Methode kann leer bleiben, die zweite kann ganz weggelassen werden.
Wenn man viele Hauptmenüs hat, kann man den Code dazu in eine weitere parametrisierbare Methode auslagern, um Wiederholungen zu vermeiden.
Damit sich der Aufwand für die Einbindung neuer Menüs in Grenzen hält, werden zuerst immer alle Untermenüs via Klasse zurückgesetzt und dann wird über die Id das gewählte Untermenü wieder eingeblendet.

Diese Webseite wurde am 21.05.18 um 17:10 von rothen ecotronics erstellt oder überarbeitet.

Impressum

Zurück zu rothen ecotronics

Printed on 100% recycled electrons!