Home
CSS
PHP
HTML
JavaScript
Allgemein
Sitemap
Horizontal, und die Untermenüs dynamisch eingeblendet.VorwegDurchaus möglich, dass Sie hier den Effekt gar nicht sehen. Item 2 und 3 sollten beim Überfahren mit dem Cursor Unterpunkte ausklappen. Mit dieser Methode schliessen Sie tatsächlich viele Benutzer aus. Die Untermenüs ausblenden (display:none) können die Browser fast alle, aber die Fähigkeit, die dynamische Pseudo Klasse :hover auf andere als Links anzuwenden haben nur die modernen Browser. Berücksichtigen Sie bei der Benutzerführung, dass es Besucher gibt, die die Untermenüs nicht sehen können. Bauen Sie dafür Alternativen ein. Die Erweiterungen sollten selbsterklärend sein. Es empfiehlt sich, um das gesamte Menü einen div zu setzen, der eine ausreichende Höhe einschliesslich der Ausklappboxen reserviert. Ansonsten ist die Methode natürlich nicht nur als Menü zu verwenden, genau so gut könnten Sie kleine Hilfeboxen einblenden. Fertig und zum Ausprobierender html Code
<div id="MENUE_3">
<div><A href="#">Item 1</A></div>
<div><A href="#">Item 2</A>
<div><A href="#2a">Item 2 a</A></div>
<div><A href="#2b">Item 2 b</A></div>
</div>
<div><A href="#">Item 3</A>
<div><A href="#3a">Item 3 a</A></div>
<div><A href="#3b">Item 3 b</A></div>
</div>
<div><A href="#">Item 4</A>
</div>
</div>
und einige Zeilen css
<style type="text/css" media="screen">;
#MENUE_3 { font-family:Helvetica, sans-serif; font-size:90%;}
#MENUE_3 div {
background-color: #f16733; width: 80px;
border: 1px solid white; float:left;}
#MENUE_3 div div {
border:none; border-top:1px solid white; float:none;
display:none}
#MENUE_3 div:hover div {display:block;}
#MENUE_3 a {
font-weight:bold;color:white; white-space:nowrap; display:block;
text-decoration:none; padding: 1px 0px 1px 5px;
border:thin solid #e05020}
#MENUE_3 a.m_act {background-color:#ffb080}
#MENUE_3 a:hover { background-color: #b03010;}
</style>;
|
zum Thema display:none. Die Verwendung einer ID für Gruppierungen auf der Webseite, z.B. den gesamten Menüblock, hat einen praktischen Nebeneffekt. In einem separaten Stylesheet für media="print" lässt sich dann der Bereich | |
