# Drop Down Menü



## Viperextrem (24. April 2005)

Hallo...ich möchte gerne in meine Website ein DropDown Menü einbauen, welches beim raufklicken mit der Mouse sich öffnet und dann weitere Untermenüs anzeigt....gibt es sowas...wenn ja wo steht eine Anleitung oder weitere Hilfen?! 

Danke mit freundlichen Grüssen!
Andreas


----------



## Gumbo (24. April 2005)

Die Beschreibung ist zwar sehr vage, da es wirklich sehr viele „DropDown Menüs“ gibt.
A List Apart: Suckerfish Dropdowns
HTML Dog: Son of Suckerfish Dropdowns
Eric A. Meyer: pure CSS menus
Stu Nicholls: A drop down menu


----------



## Viperextrem (25. April 2005)

Hallo @Gumbo!

 Ich meine solch ein Drop Down Menü wie unter dieser Seite:

http://www.stunicholls.myby.co.uk/mozilla/dropdown.html

 Wo aber mehrere nebeneinander(horizontal) stehen können und welche ich auch selbst beschriften kann!

 MFG
 Danke für Antworten!
 Andreas


----------



## Patematthes (25. April 2005)

ich würde es in java lösen mit "onmouseover" und "onmouseout", das geht meines erachtens auch nicht in reinem html.

greetz


----------



## Gumbo (25. April 2005)

Dann solltest du das Son of Suckerfish Dropdowns, das funktioniert sogar im Internet Explorer.




> ich würde es in java lösen mit "onmouseover" und "onmouseout", das geht meines erachtens auch nicht in reinem html.


Es war auch nie die Rede davon, dass es mit „reinem HTML“ funktionieren soll.
Achja, falls du meinst es besser zu wissen: Zeig doch bitte mal ein mit mouseover und onmouseout gelöstes Menü – aber bitte in _Java_.


----------



## losti3556 (25. April 2005)

Man kann es mit CSS und HTML realisieren!


In den Kopf kommt erstmal etwas *CSS* :

<style type="text/css">

#holder {position:absolute; top:40px; width:100px; line-height:18px; height:20px; border:1px solid #f96; overflow:hidden; text-align:center; background: eee;}
#holder:hover {height:110px; cursor: pointer;}
#holder a:visited, #holder a {display:block; width:100%; line-height:18px; color:#000; text-decoration:none;}

</style>


Dann an die Stelle wo es hin soll mit *Divs*:

<div id="holder">
MAIN MENU<br>
<a href="#">Item one</a>
<a href="#">Item two</a>
<a href="#">Item three</a>
<a href="#">Item four</a>
<a href="#">Item five</a>
</div>


Für weitere Fragen zum Quelltext bin ich bereit. Dürfte aber eigentlich verständlich genug sein...

Mit freundlichen Grüßen
  losti


----------



## Sven Mintel (25. April 2005)

Dass der IE den Pseudoselektor :hover nur in Links interpretiert, hast du dabei aber unterschlagen, oder


----------



## losti3556 (25. April 2005)

Könnte man so sagen   , aber wozu sollte man so ein Menü noch verwenden, außer für Links?


----------



## Sven Mintel (25. April 2005)

Ne...ich meinte einfach, dass dein Vorschlag im IE nicht funktioniert:

```
#holder:hover{......}
```
#holder ist ein <div> und kein Link.... seine Grösse wird beim hovern nicht verändert... somit kommt der geneigte IE-User nicht an den Honig....äähm an die Links


----------



## losti3556 (25. April 2005)

Hmmm, jetzt hab ich es kapiert.
Hast Recht.

Sorry...


----------



## teddymc18 (10. August 2005)

hier hast du eine Vorlage

<script>
var vers = navigator.appVersion;
var name = navigator.appName;
vers_ie = vers.substring(22,23);
vers_nc = vers.substring(0,1);
if ((name == "Microsoft Internet Explorer" && vers_ie == 5) || (name == "Netscape" && vers_nc == 5)){
function auswahl(link) {
 if(link == "leer") {
   document.forms[0].reset();
  document.forms[0].elements[0].blur();
   return;
 }else {
   location.href = link;
   document.forms[0].reset();
   document.forms[0].elements[0].blur();
  }
 }
}
</script>
<form action="">
<select size=1 name="Auswahl" onChange="auswahl(this.form.Auswahl.options[this.form.Auswahl.options.selectedIndex].value)" style="width:91px; background-color:#FF0000; font-size:10; font-weight:bold; font-family:Tahoma; Color:#FFFFFF;" width="150">
<option value="leer"> [ text ]</option>
<option value="leer">text1</option>
<option value="leer">text2</option>
<option value="leer">text3</option>
<option value="leer">text4</option>
</select></form></div>

da wo "leer" steht die link-seite eintragen
mfg 
teddymc


----------

