NicoKlausmann: Dropdown-Menü erweitern

Beitrag lesen

SELF-Forum

Dropdown-Menü erweitern

NicoKlausmann
– Informationen zu den Bewertungsregeln

Hallo,

ich benutze nachfolgenden Code für ein CSS-JS-Dropdown-Menü.

Wenn man über einen Button fährt, klappen nach unten die Links aus.

Funktioniert soweit auch super - ich suche KEINE Alternative dazu.

Was ich jetzt aber daran gern ändern würde:

Aktuell ist der Button sowie die Menüpunkte in einem Bereich zusammengefasst und die Buttonbreite ist auch gleichzeitig die Breite der Menüpunkte. Wenn man diese breiter macht, verschiebt sich logischerweise beim Rollover dann auch alles andere neben dem Button nach rechts.

Wie kann ich also im vorhandenen Code Button und Menü "trennen", damit beide unterschiedliche Breiten haben können?

Es sollte aber natürlich nach wie vor noch gewährleistet sein, dass das Menü dann nicht beim Verlassen des Button verschwindet ;)

Grüße,
Nico Klausmann

  
<html>  
<head>  
  
<style type="text/css">  
  
.bereich{display: block;color: black;background-color: #efefef;}  
a{color:#6f6f6f}  
a.link{display: block;color: #000000;font-family: Verdana, Arial;font-size: 11px;text-decoration: None;border-bottom: solid 1px #FFFFFF;padding:8px;padding-left:10px;}  
a.link.bereich{display: block;background-color: #cfcfcf;width: 135px;height: 32px;}  
a.link:hover{display: block;color: #000000;background-color: #cfcfcf;}  
  
</style>  
  
<script type='text/javascript'>  
  
 function anzeigen(das){  
 if(document.getElementById(das).style.display=='none')  
 document.getElementById(das).style.display='block';  
 else document.getElementById(das).style.display='none';}  
  
</script>  
  
</head>  
<body>  
  
<table border="0" cellspacing="0" cellpadding="0">  
			  
<tr>  
<td valign="top">  
<div class="bereich" onMouseover="anzeigen('menue#1')" onMouseout="anzeigen('menue#1')">  
<img src="navi1.png" width=135 height=32>  
  
<span id="menue#1" style="display: none;">  
<a href="mitglieder.htm" class="link">Mitglieder</a>  
<a href="klassen.htm" class="link">Klassen</a>  
</span>  
  
</div>  
</td>  
			  
<td valign="top">  
<div class="bereich" onMouseover="anzeigen('menue#2')" onMouseout="anzeigen('menue#2')">  
<img src="navi2.png" width=135 height=32>  
  
<span id="menue#2" style="display: none;">  
<a href="kontakt.htm" class="link">Kontakt</a>  
<a href="impressum.htm" class="link">Impressum</a>  
</span>  
  
</div>  
</td>  
			  
</tr>  
</table>  
			  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln