Dropdown menu in eigener .js-Datei

C

Chaosfredy

Grünschnabel
Hi Leute habe ein Problem und bin doch Stundenlangem durchstöbern nicht fündig geworden.

Will eine dropdown Navigation in einem eigenen Javascript machen, welches ich von mehreren Seiten aufrufe. Soll ähnlich funktionieren wie hier .

Habe es auch schon mit onmouseover versucht, funktionierte jedoch auch nichtt. Die Navigation soll 4 Hirarchistufen beinhalten.
Bin wirklich am Ende meines Lateins, welches bei Javascripts eh nicht weit reicht:(

Besten Dank
 
Hier dein Beispiel etwas verändert!

Hallo!

Ich habe mal das kleine Beispiel von dir etwas verändert. Ich habe die Funktion "show" einfach in eine Datei Namens Menue.js ausgelagert, diese habe ich dann in die HTML-Datei eingebunden. Danach kannst du die Funktion wie vorher ja auch schon einfach ansprechen.

Ich hoffe ich habe dich richtig verstanden und konnte Dir weiterhelfen!

Fiendius

Hier der Inhalt der HTML-Datei:

Code: 
<html>
<head>
<title></title>
<meta name="author" content="stefanie.radtke">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<script type="text/javascript" src="Menue.js" >
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<a href="#" onclick="show('cat1')">Category 1</a><br>
<div id="cat1" style="display:none">
<a href="#" class="sub">Sub 1</a><br>
<a href="#" class="sub">Sub 2</a><br>
<a href="#" class="sub">Sub 3</a><br>
</div><br>
<a href="#" onclick="show('cat2')">Category 2</a><br>
<div id="cat2" style="display:none">
<a href="#" class="sub">Sub 1</a><br>
<a href="#" class="sub">Sub 2</a><br>
<a href="#" class="sub">Sub 3</a><br>
</div><br>
</body>
</head>
</html>
</body>
</html>

Hier die ausgelagerte Datei Menue.js:

Code: 
function show(divid) {
document.getElementById("cat1").style.display="none";
document.getElementById("cat2").style.display="none";

document.getElementById(divid).style.display="inline";

}
 
Dropdown

Hallo Fiendius

Erstmalls Danke für deine Antwort. Wollte ursprünglich ein Dropdownmenu mit allen Links in einer seperaten Datei machen, damit ich es auf jeder Seite einbinden kann.
Habe mich mitlerweile dazu entschieden ein Frameset zu benützen und so das Menu einzubinden. Habe jeweils onclick genützt.

Für alle die sowas suchen ist hier der Link zur gestalteten HP Kabeltechnik

CU
 
Weitere Frage.....

Habe mir mal den code ein bischen umgebaut wie folgt:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta name="author" content="stefanie.radtke">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<script type="text/javascript" src="Menue.js" >
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<a href="#" onclick="show('cat1')"><img src="butKontakt.jpg" width="93" height="16" /></a><br>
<div id="cat1" style="display:none">
<a href="#" class="sub">Sub 1</a><br>
<a href="#" class="sub">Sub 2</a><br>
<a href="#" class="sub">Sub 3</a><br>
</div>
<a href="#" onclick="show('cat2')"><img src="Image1_f2.jpg" width="48" height="16" /></a><br>
<div id="cat2" style="display:none">
<a href="#" class="sub">Sub 1</a><br>
<a href="#" class="sub">Sub 2</a><br>
<a href="#" class="Sub" onClick="show('cat3')">Sub3</a><br>

</div><br>
<br>
<br>
<br>


<div id="cat3" style="display:none">
<a href="#" class="sub">Sub 1</a><br>
<a href="#" class="sub">Sub 2</a><br>
<a href="#" class="Sub">Sub3</a><br>

</div>
</body>
</head>
</html>
</body>
</html>

und die Menue.js :

Code: 
function show(divid) {
document.getElementById("cat1").style.display="none";
document.getElementById("cat2").style.display="none";
document.getElementById("cat3").style.display="none";

document.getElementById(divid).style.display="inline";

}

Was muss ich machen damit das erste submenü nicht verschwindet wenn man auf sub 3 klickt?

Hier mal der link damit man eine vorstellung bekommt:

http://www.compucard.de/menue/test/Untitled-1.htm

Hoffentlich kennt diesmal jemand die lösung :-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück