Hilfe bei JS Navigation

W

Wortspiel

Grünschnabel
Hallo

Ich möchte für meine HP eine Navigationsleiste erstellen, die eine "Baumstruktur" enthält. Also beim klicken auf einem Menuepunkt sollen beliebig viele Submenues kommen. Dazu habe ich auch eine kleine JS funktion gefunden. Das Problem ist nun, das wenn ich auf ein Submenue klicke. Der Menuebaum geschlossen wird (aber nur bei dem IE, bei Opera funktioniert es).

Ausserdem bekomme ich es nicht gebacken, die untermenues mit css zu Stylen. Wie muss ich die Klassen in meiner CSS Datei benennen, damit die Submenues ihr Style bekommen?

Hier erstmal der Coder der HTML-Datei


<link rel="stylesheet" type="text/css" href="links.css">
<style type="text/css">
/* ... hier sind dateispezifische Formate erlaubt ... */
</style>
</head>
<body>
<script language="JavaScript">
<!--
function showhide(name) {
var e = document.getElementById(name);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
//-->
</script>
<noscript>Fehler</noscript>

<body>


<ul class="coolnav">
<li onClick="showhide('haupt1');"><a href="#"><span>Hauptmenue</span></a></li>
<div style="display:none" id="haupt1" class="subMenu">
<a href="sub1.1.html" target="mitte"><span>sub1.1</span></a>
<a href="sub1.2.html" target="mitte"><span>sub1.2</span></a>
</div>

<li onClick="showhide('haupt2');"><a href="#"><span>haupt2</span></a></li>
<div style="display:none" id="haupt2" class="subMenu">
<a href="sub2.1.html" target="mitte"><span>sub2.1</span></a>
</div>
</body>
</html>


Und hier die dazugehörige CSS Datei:

.coolnav {
width: 160px;
font-family: verdana;
margin: 0px;
padding: 0px;
list-style:none;
border: 1px solid #666666;
border-bottom-width: 0px;
}
.coolnav li a {
font-size: 11px;
line-height: 23px;
height: 23px;
display:block;
color:#666666;
text-decoration: none;
font-weight: normal;
background-color: #B2CCFF;
border: 1px solid #666666;
border-left-width: 0px;
border-right-width: 0px;
border-top-color: #fff;
cursor: hand;
}
.coolnav li a span {
height: 23px;
text-indent: 4px;
display:block;
margin-left: 25px;
background-color: #e4e4e4;
}
.coolnav li a:hover {
background-image: url(grafik/bullet.gif);
background-repeat:no-repeat;
background-position:2px 1px;
background-color: #e4e4e4;
}
.coolnav li a:hover span {
color:#000000;
background-color: #B2CCFF;
}

/* Submenü */
.subMenu {
background-color: #FFFF00;
width: 160px;
font-family: verdana;
margin: 0px;
padding: 0px;
list-style:none;
border: 1px solid #666666;
border-bottom-width: 0px;
}
.subMenu a {
color: #F1FFFF;
font-size: 13px;
font-weight: bold;
text-decoration: none;
display: block;
width: 135px;
position: relative;
left: 20px;
}
.subMenu div a:hover {
color: #618E8D;
background-color: #F1FFFF;
}
.subMenu div a:active {
color: #618E8D;
background-color: #F1FFFF;
}


Vielen Dank

mfg
Ben
 
Folgende Zeile, an den Anfang der function showhide() eingefügt, verhindert dies....
Code: 
if(window.event && window.event.srcElement.parentElement.parentElement.className=='subMenu')return;
...indem sie im IE abfragt, ob die Funktion aus dem Submenu aufgerufen wurde, und in diesem Falle die Ausführung derselben abbricht.

<promotion:)>
Übrigens:
Dieses Menu hat den Effekt, dass deine Seite ohne aktiviertes JS nicht navigierbar ist.
Ein Menu, bei welchem das anders ist, findest du unter http://www.doktormolle.de/temp/menu2.htm
Das Thema dazu findest du unter http://www.tutorials.de/tutorials198729.html

Dieses Menu hat weiterhin den Vorteil, dass du keine Funktionsaufrufe und ID's per Hand notieren musst, sondern nur eine korrekt verschachtelte HTML-Liste.
Per CSS kannst du es problemlos so gestalten, dass es so aussieht, wie es in deinem Menu momentan der Fall ist.


Ein "echtes" Baummenu findest du übrigens in der Tutorials-Abteilung;)
</promotion>
 
Hallo

Vielen Dank für die Links...das ist genau das, was ich gesucht habe :)

Muss gleich mal probieren dort ein wenig mit dem css auszuprobieren.

danke

mfg

Wortspiel
 
Hallo

Also ich habe es jetzt ausprobiert. Es gefällt mir wirklich sehr gut. Allerdings habe ich noch ein-zwei Probleme.

Zu einem bekomme ich es nicht gebacken, das ganze Menu weiter rechts anzuordnen, und ich möchte gerne, die Unterpunkte auf gleicher breite wie die Hauptkategorien haben, also die sollen nicht eingerückt sein, sondern sich nur durch die Farben unterscheiden.
Desweitern fände ich es nicht schlecht, wenn ein kleine mousover effekt auch bei den Hauptkategorien währe. Dies ist aber doch nur möglich mit a:hover. und nicht mit span:hover oder? Kann man das evtl einfach hintricksen?
Also wie ihr schon merkt, ich kenne micht nicht wirklich gut mit den css Sachen aus
:rolleyes: :( ich hoffe aber, dass mir jemand helfen kann.
vielen Dank
mfg
Wortspiel
 
Hallo

Vielen dank für die Mühe.
Das funktioniert nun genau so, wie ich das haben möchte.

also nochmal danke

mfg
Wortspiel
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück