Drop Down Menü Java Script

[Dragan]

Ich möchte mit einem JAVA Script ein Dropdown Menü erstellen hat mir jemand Tipps

Danke im Voraus

[EvilInside]

Ich vermute mal Du meinst eine Art "Pull-Down"-Menü, wie man es von Window-GUIs her kennt und nicht etwa ein Menü, daß auf einer Dropdown-Box (<select>...</select>) beruht.

Um ein solches Menü zu machen, wirst Du Layer bzw. DIVs verwenden müssen.

Es kommt sehr darauf an, wie flexibel und wie umfangreich dein Menü sein soll. Wenn sich die Menüpunkte nicht oder nur selten ändern und wenn Du keine weiteren Untermenüs brauchst, dann kannst Du die benötigten DIV-Tags einfach fest in die Seite schreiben.

Diese Layer werden absolut positioniert, damit sie den normalen Seiteninhalt auch überdecken können, also z.B. so:

<div id="menu1" style="position:absolute;visiblity:hidden;top:10px;left:150px">-Hier stehen dann die Menüeinträge-</div>

Das Grundprinzip beruht dann darauf, die verschiedenen Layer ein- bzw. auszublenden. Dies geht per JavaScript über setzen der entsprechenden Style-Eigenschaft (visibility) auf den entsprechenden Wert (achtung: dieser teil ist von browser zu browser unterschiedlich).

für Netscape 4x:

document.layers["menu1"].visibility = 'hide' bzw = 'show'


für IE 4x:

document.all["menu1"].style.visibility = 'hidden' bzw. = 'visible'


für W3C-Standard:

document.getElementById("menu1").style.visibility = 'hidden' bzw. ='visible'

Wann Du das Menü anzeigen willst, hängt natürlich auch von der Webseite ab. Du könntest z.B. im onmouseover-EventHandler eines grafischen Buttons das entsprechende Layer einblenden.

Das ganze ist in jedem Fall nicht ganz einfach - es gibt auch einige fertige Lösungen und sog. "Menü-Generatoren". Dazu empfehle ich einen Besuch bei http://www.dynamicdrive.com bzw. direkter: http://www.dynamicdrive.com/dynamicindex1/index.html

HTH,

Evil

[lapso]

@evil

du hast zuviel Zeit, oder?

[Panther]

du kannst auch mal hier schauen. Ist zumindest eine Anregung

JS - Menü

[EvilInside]

Original geschrieben von lapso

du hast zuviel Zeit, oder?

@lapso:

Ja, manchmal schon.

Ok, ich muß jetzt auch wieder was tun

so long,

Evil

[Net-srac]

Original geschrieben von Panther

du kannst auch mal hier schauen. Ist zumindest eine Anregung

JS - Menü

hmm, funtzt net im opera 6.01

Hat eigentlich mal jemand eine Menü gesehen, das in alles browsern funktioniert? ich noch nicht.

[lapso]

Original geschrieben von Net-srac

hmm, funtzt net im opera 6.01

Hat eigentlich mal jemand eine Menü gesehen, das in alles browsern funktioniert? ich noch nicht.

Dann musst du halt das ganze so schreiben, dass auch ohne menü alles erreichbar wird.

Warum es kein Script gibt, was überall funzt? Ganz einfach: HTML ist eine Seitenbeschreibungssprache und nicht für solche Spielereien gemacht... Alle Browser haben ein unterschiedliches Objektmodell, Standards kommen jetzt gerade erst (Mozilla, Netscape6, IE6, Opera6)

Grüße

Matze

[EvilInside]

Na ja, also mit dem weiter oben schon geposteten Befehlen zum Ein- und Ausblenden von Layern müßtest Du im Netscape 4x+, MSIE 4x+ und Mozilla klarkommen.

Im Opera geht das auch, solange dieser sich auch als IE ausgibt.

Aber: man wird immer einen Browser finden, in dem es nicht geht.

Man muß sich also fragen, wie groß und wie wichtig ist diese Zielgruppe ?

Ich denke, wenn man den MSIE 4x+, Netscape 4x+ und Mozilla unterstützt, dann erreicht man annäherend alle User.

Opera hat von Haus aus noch einige Probleme, die es teilweise schwer machen, DHTML auch für Opera zu portieren.

Aber recht einfach Manipulation von Layern, wie das ein- und ausschalten sollte auch dort klappen.

Um auf deine konkrete Frage einzugehen: Das verlinkte "JS Menu" ist ja kein Pulldown-Menü, wie Du suchst, sondern eine Art Treeview - und der geht bei mir auch im Opera 6 (auf der linken Seite).

Evil

[Dragan]

Hier ein Script ....

<script language="JavaScript">

<!-- Verstecken --

function surfto(form) {

var myindex=form.select1.selectedIndex

if (form.select1.options[myindex].value != "0") {

location=form.select1.options[myindex].value;}

}

// Ende Verstecken -->

</SCRIPT>

<FORM NAME="form1">

<SELECT NAME="select1" onChange="surfto(this.form)" SIZE=1>

<OPTION SELECTED VALUE="0"> ----- Wählen Sie aus: -----

<OPTION VALUE="URL#1">URL#1 Text

<OPTION VALUE="URL#2">URL#2 Text

<OPTION VALUE="URL#3">URL#3 Text

<OPTION VALUE="URL#4">URL#4 Text

</SELECT>

</FORM>

[EvilInside]

Sorry, aber wenn es das war, was Du gesucht hast, dann habe ich Dich in meinem ersten Beitrag im Thread schon falsch verstanden...

Ich dachte Du wolltest eine Art "Windows-Pull-Down"-Menü haben.

Die Sache mit der Select-Box wäre einfacher gewesen

Evil