Navigation mit Listen UL, CSS

messmar · 6. Juli 2005

Hallo,

ich spreche hier wieder das Thema von gestern und zwar : Navigation mit Listen UL, CSS und JScript.

Dabei wird ein Untermenu bzw. Liste:
<lu>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
</lu>

sichtbar und das ist gut so.

Aber wenn ich den zweiten Link anklicke, muss die augeklapte <ul></ul> unsitbar werden, was eigentlich nicht passiert, sonst das selbt geöffnete Menü wird geschloßen.

Wie kann ich es erreichen, daß das andere geöffnete Menü geschloßen wir und nicht das von dem ich die aktion führe.

Danke und Gruß

Messmar

Der Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Unbenannt</title>
<script type="text/javascript">
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;

do {
if(LI.firstChild) { // A (SPAN)
if(LI.firstChild.nextSibling) { // #text
if(LI.firstChild.nextSibling.nextSibling) { // UL ?
LI.onclick = switchItem; //LI.onmouseout = ausblenden;
}
}
}
LI = LI.nextSibling;

}
while(LI);
}

function switchItem() {
if (this.firstChild.nextSibling.nextSibling.style.display == "block") {
this.firstChild.nextSibling.nextSibling.style.display = "none";
} else {
this.firstChild.nextSibling.nextSibling.style.display = "block";
this.firstChild.nextSibling.nextSibling.style.backgroundColor = "#C6EFFF";
}

}
window.onload=hoverIE;
</script>
<style>
ul#Navigation {
width: 160px;
margin: 40px 0 0 5px;
padding: 0em;
background-color: #C6EFFF;
float: left;
}

* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 8em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0em;
float: left;
}

ul#Navigation li {/* This one here*/
list-style: none;
margin: 0em;
padding: 0;
}

ul#Navigation li ul {
margin: 0 0 0 0em;
padding: 0 0 0 0em;
}
ul#Navigation li ul li {
margin: 0.1em 0;
width: 6em;
}
* html ul#Navigation li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}

* html ul#Navigation a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 6em; /* Breitenangabe fuer IE 6 */
text-decoration: none;
color: #0050AA;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}
* html ul#Navigation li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 6em; /* Breitenangabe fuer IE 6 */
background-color: #C6EFFF;
margin: 0 0 0 28px;
}

ul#Navigation normal a {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
display:block;
padding: 0em;
text-decoration: none;
color: #0050AA;
background-color: #C6EFFF;
}
ul#Navigation highlight a:hover {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0055AA;
background-color: #C6EFFF;
}
ul#Navigation a:active {
color: blue;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-color: #C6EFFF;
text-decoration: none;
}

</style>
</head>

<body>
<ul id="Navigation">
<li><a href="#" target="_blank">Seite 1</a></li>
<li><a href="#">Seite 2</a>
<ul style="display:none;background-color: #C6EFFF;">
<li><a href="#Beispiel">> Seite 2a</a></li>
<li><a href="#Beispiel">   Seite 2b</a></li>
<li><a href="#Beispiel">   Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Die zweite Navi</a>
<ul style="display:none;">
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
<li><a href="#Beispiel">Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Die vierte Navi</a>
<ul style="display:none;">
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
<li><a href="#Beispiel">Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>

</body>
</html>

Sven Mintel · 8. Juli 2005

Du könntest eine Variable verwenden, in der du bei jedem Öffnen eines Menupunktes die geöffnet <ul> als Objekt speicherst.
So kannst du immer ermitteln, was grad offen ist, und es bequem Schliessen(sofern es nicht der angeklickte menupunkt ist)

Oder du gehst prinzipiell alle Menupunkte durch und schliesst sie(ausgenommen das Angeklickte, das öffnest du)

messmar · 8. Juli 2005

Hallo,

Danke erstmal.

Ich es so gemacht mit ID und es funktioniert zu Teil. Bloß der Letzte schritt fhelt mir noch.

Das dritte Menü schließt die anderen zwei, aber öffnet sich nicht.
Ein logischer Fehler glaube ich, aber ich komme nicht darauf.
Danke man.
Hier der code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script>

</script>
</head>

<body>
<ul id="Navigation">
<li id="li_white"><a href="#">Business Context</a></li>
<li id="li_01"><a href="#">Aenean condimentum</a>
<ul style="display:none;background-color: #C6EFFF;">
<li><a href="#Beispiel" id="L_02"><img src="img/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Dummy Link A</a></li>
<li><a href="#Beispiel" id="L_02"><img src="img/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Dummy Link B</a></li>
<li><a href="#Beispiel" id="L_02"><img src="img/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Dummy Link C</a></li>
</ul>
</li>
<li id="li_02"><a href="#Beispiel">Maecenas id enim et</a>
<ul style="display:none;">
<li><a href="#Beispiel"><img src="img/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Aliquam dolor sed</a></li>
<li><a href="#Beispiel"><img src="img/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Curabitur cursus</a></li>
<li><a href="#Beispiel"><img src="img/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Aliquam nec dolor</a></li>
</ul>
</li>
<li><a href="#Beispiel">Nullam tristique augue</a></li>
<li id="li_03"><a href="#Beispiel">Maecenas iaculis</a>
<ul style="display:none;">
<li><a href="#Beispiel"><img src="img/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Dummy Link A</a></li>
<li><a href="#Beispiel"><img src="img/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Dummy Link B</a></li>
<li><a href="#Beispiel"><img src="img/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Dummy Link C</a></li>
</ul>
</li>
<li><a href="#Beispiel" id="L_06">Nunc consectetuer</a></li>
</ul>

</body>
</html>

Sven Mintel · 8. Juli 2005

Das Thema dazu finde ich grad nicht, aber hier ist ein solches Menu:
http://www.doktormolle.de/temp/menu2.htm

messmar · 8. Juli 2005

Hallo Sven,

Das wird ich mir anschauen und evtl. mich danach richten.
Du hast mir sehr oft geholfen. Danke man.

Besten Gruß

Messmar

Navigation mit Listen UL, CSS

messmar

Erfahrenes Mitglied

Sven Mintel

Mitglied

messmar

Erfahrenes Mitglied

Sven Mintel

Mitglied

messmar

Erfahrenes Mitglied

Neue Beiträge