Hoverbuttons mit CSS

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

Inhaltsverzeichnis

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

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:

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:

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:

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:

 


Diese Webseite wurde am 03.05.18 um 22:34 von rothen ecotronics erstellt oder überarbeitet.

Impressum

Zurück zu rothen ecotronics

Printed on 100% recycled electrons!