Mit CSS realisiert.

Vielfach wird heutzutage leider immer noch JavaScript für Menüs mit Hover / Rollover oder Popup Effekten eingesetzt. Dabei lassen sich heute mit CSS ziemlich alle gewünschten Effekte einsetzen ohne das man auf das unsichere JavaScript zurückgreifen müsste. Wie man merkt, bin ich nicht gerade ein Freund von JavaScript; im Gegenteil; ich meide es wie die Pest, da es das Haupteinfallstor für Schädlinge aller Art ist.

Hier will ich einmal zeigen, wie man eine horizontale Navigationsleiste mit PopUp Effekten realisiert, indem man CSS mal etwas ausreizt.

Als Beispiel für eine solche Navigation nehmen wir einmal die Navigation meines alten Blogs. Eigentlich eine ganz normale, mit CSS realisierte nicht mal aufwändig gestaltete Navigationsleiste. Wenn man jedoch mit der Maus über die einzelnen Navigationspunkte fährt, poppen kleine zusätzliche Fenster mit Informationen auf. Die Fenster sind zudem noch teiltransparent gestaltet und alles funktioniert auch noch, wenn kein JavaScript im Browser aktiviert ist.

Wie genau funktioniert das und was ist dabei zu beachten?

Schauen wir uns mal den Ausgangscode an, eine einfache horizontale Blocknavigation, wie man sie wohl schreiben würde:

#menu { font-family: Geneva, Verdana, Arial, Helvetica, serif; margin-top: 0.5em; margin: 0;}
#menu_top { float: left; display: inline; width: 700px; background: transparent; font-size: 85%; margin-top: 1.3em; }
#menu_top ul { float: left; display: inline; width: 100%; margin: 0;}
#menu_top ul li { float:left; display:inline; width: 25%; line-height: 1em; list-style-type: none; margin: 0; padding: 0; }
#menu_top ul li a,
#menu_top ul li strong {
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
height: 2em;
color: #000;
text-decoration: none;
font-weight: normal;
border-right: 1px #000 solid !important;
border-left: 1px #fff solid !important;
border-bottom: 1px #000 solid !important;
}
#menu_top ul li a:focus,
#menu_top ul li a:hover,
#menu_top ul li a:active  { background: #7F7F7F; color: #fff; }
#menu_top ul li#current strong,
#menu_top ul li#current a { color: #fff; background: #000; }
#menu_top ul li#current a:focus,
#menu_top ul li#current a:hover,
#menu_top ul li#current a:active { color: #fff; background: #666; }

In die Seite eingebaut sieht sie dann so aus:

navigation

Bis jetzt nicht sonderlich aufregend, hmm?

Das dazugehörige XHTML Markup sieht so aus:

<div class="menu" >
<div class="menu_top" >
  <ul>
    <li class="active"><strong>Button 1</strong></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
  </ul>
</div>
</div>

Damit beim Überfahren des Menüs mit der Maus die PopUp Fenster mit dem zusätzlichen Infotext angezeigt werden können, müssen wir den XHTML Code um Span Elemente erweitern.

<div class="menu" >
<div class="menu_top" >
  <ul>
    <li class="active"><strong>Button 1</strong><span>weiterer Text</span></li>
    <li><a href="#">Button 2<span>weiterer Text</span></a></li>
    <li><a href="#">Button 3<span>weiterer Text</span></a></li>
    <li><a href="#">Button 4<span>weiterer Text</span></a></li>
  </ul>
</div>
</div>

Nun erweitern wir das CSS für die Navigation um die Span Elemente.

#menu_top ul li a span {
font-family: Verdana, Helvetica, Arial, sans-serif;
display:block; font-size: 83.333%; padding-top:.5em; font-weight:normal; color: #888;}
#menu_top ul li a:focus span,
#menu_top ul li a:hover span,
#menu_top ul li a:active span {color: #ccc; border-color: #000;}
#menu_top ul li#current a:focus span,
#menu_top ul li#current a:hover span,
#menu_top ul li#current a:active span { background:transparent; }

Damit die jetzt geschaffenen Span Elemente nicht immer, sondern nur beim Hovern der Navigation angezeigt werden, blenden wir sie im CSS erstmal aus.

#menu_top ul li a span {
font-family: Verdana, Helvetica, Arial, sans-serif;
display:block; font-size: 83.333%; padding-top:.5em; font-weight:normal; color: #888;
display: none;   /*  schaltet Sichtbarkeit des Span Elementes ab. */

Nun kann die "Feinarbeit" an den Span Elementen beginnen, so dass wir schöne; halbtransparente PopUp Fenster erreichen. Der obere Teil bezieht sich hierbei auf die nichtaktiven Menüpunkte und der untere Teil auf den aktiven Current Punkt.

#menu_top ul li a:focus span,
#menu_top ul li a:hover span,
#menu_top ul li a:active span {color: #ccc; border-color: #000;
         font-size: 1em;
         line-height: 1.5em;
         font-weight: bold;
         text-align: center;
         color: #fff;
         background-color: #666; opacity: 0.7; filter: alpha(Opacity=70);
         padding: 0.5em;
         border: 2px solid #fff;     /*  Eingeblendete Informationselemente. */
         border-style: groove;
         margin: 10px 0 0 100px;
         height: 3em;
         width: 300px;
         display: block;
         position: absolute;
         top: 100px;
         left: 0px;
}
#menu_top ul li#current a:focus span,
#menu_top ul li#current a:hover span,
#menu_top ul li#current a:active span { background:transparent;
         font-size: 1em;
         line-height: 1.5em;
         text-align: center;
         font-weight: bold;
         color: #fff;
         background-color: #000; opacity: 0.7; filter: alpha(Opacity=70);
         padding: 0.5em;            /*  Eingeblendete Informationselemente. */
         border: 2px solid #fff;
         border-style: groove;
         margin: 10px 0 0 100px;
         height: 3em;
         width: 250px;
         display: block;
         top: 100px;
         left: 0px;
}

Die Transparenz der eingeblendeten Menüfenster erreichen wir hier mit folgenden beiden Werten, der erste bezieht sich auf standardkonforme Browser (z.B. Firefox): opacity: 0.7;

Der zweite ist sehr wichtig für den Internet Explorer, er zeigt sonst keine Transparenz an: filter: alpha(Opacity=70);

Kurze Anmerkung: Die Transparenz von Opacity und Filter: alpha lässt sich in 10 Stufen einstellen. Bei Opacity von 0.1 (absolute Transparenz) bis 1 (keine Transparenz). Der Filter: alpha Wert ebenso, nur dass die Werte hier in Zehnerstufen von 10 bis 100 einzustellen sind.

Ein sehr wichtiger Punkt bei der Arbeit mit solchen Menüs ist, dass sie absolut positioniert werden sollten.

#menu {
font-family: Geneva, Verdana, Arial, Helvetica, serif;
margin-top: 0.5em; margin: 0; position: absolute;
}

Nur dann ist gewährleistet, dass die eingeblendeten Fenster auch exakt dort stehenbleiben, wo man sie positioniert hat, wenn die Auflösung mit der man die Webseite betrachtet sich ändert.

Tut man es nicht, laufen die Fenster rechts oder links aus der Seite raus.

navigation

Zum Abschluss noch mal das komplette Navigations CSS:

#menu {
font-family: Geneva, Verdana, Arial, Helvetica, serif;
margin-top: 0.5em; margin: 0; position: absolute;
}
#menu_top { float: left; display: inline; width: 700px; background: transparent; font-size: 85%; margin-top: 1.3em; }
#menu_top ul { float: left; display: inline; width: 100%; margin: 0;}
#menu_top ul li { float:left; display:inline; width: 25%; line-height: 1em; list-style-type: none; margin: 0; padding: 0; }
#menu_top ul li a span {
font-family: Verdana, Helvetica, Arial, sans-serif;
display:block; font-size: 83.333%; padding-top:.5em; font-weight:normal; color: #888;
display: none; /* schaltet Sichtbarkeit des Span Elementes ab. */
}
#menu_top ul li a,
#menu_top ul li strong {
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
height: 2em;
color: #000;
text-decoration: none;
font-weight: normal;
border-right: 1px #000 solid !important;
border-left: 1px #fff solid !important;
border-bottom: 1px #000 solid !important;
}
#menu_top ul li a:focus,
#menu_top ul li a:hover,
#menu_top ul li a:active  { background: #7F7F7F; color: #fff; }
#menu_top ul li a:focus span,
#menu_top ul li a:hover span,
#menu_top ul li a:active span {color: #ccc; border-color: #000;
         font-size: 1em;
         line-height: 1.5em;
         font-weight: bold;
         text-align: center;
         color: #fff;
         background-color: #666; opacity: 0.7; filter: alpha(Opacity=70);
         padding: 0.5em;
         border: 2px solid #fff;     /* Eingeblendete Informationselemente. */
         border-style: groove;
         margin: 10px 0 0 100px;
         height: 3em;
         width: 300px;
         display: block;
         position: absolute;
         top: 100px;
         left: 0px;
}
#menu_top ul li#current strong,
#menu_top ul li#current a { color: #fff; background: #000; }
#menu_top ul li#current a:focus,
#menu_top ul li#current a:hover,
#menu_top ul li#current a:active { color: #fff; background: #666; }
#menu_top ul li#current a:focus span,
#menu_top ul li#current a:hover span,
#menu_top ul li#current a:active span { background:transparent;
         font-size: 1em;
         line-height: 1.5em;
         text-align: center;
         font-weight: bold;
         color: #fff;
         background-color: #000; opacity: 0.7; filter: alpha(Opacity=70);
         padding: 0.5em;            /* Eingeblendete Informationselemente. */
         border: 2px solid #fff;
         border-style: groove;
         margin: 10px 0 0 100px;
         height: 3em;
         width: 250px;
         display: block;
         top: 100px;
         left: 0px;
}

Übrigens: das Menü in seiner Grundform ohne die Extras basiert zum Teil auf YAML

Eine wichtige Anmerkung:

Dieses Menü ist übrigens nicht valide nach dem CSS Validator des W3C. Da erscheint dann folgende Fehlermeldung: Die Eigenschaft opacity existiert nicht in CSS level 2.1, aber in [css3] : 0.7

Einer der Gründe, warum ich den CSS Validator nicht mag...

Und nun viel Spass beim Rumexperimentieren mit solchen Menüs!

Du magst diesen Post?

Dann würde ich mich sehr über Deine Hilfe freuen!

  • Delicious Bookmark this on Delicious