Navigation mit Listen und Jscript und CSS

messmar · 1. Juli 2005

Hallo zusammen,

ich habe die folgende Navigation im Netz über Selfhtml gefunden und ich finde sie sehr praktisch und einfach.

Ich will sie allerdings anpassen so, daß die Memüs bzw. Untermenüs mit der Funktion
OnClick aufklappen und wieder zuklappen und nicht bei OnmouseOver / OnmouseOut (wie
sie aufgebaut ist). Ich bekoemm es aber nicht hin.

Kann jemand bitte helfen.

Vielen dank und Gruß

Messmar

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste mit mehreren Ebenen</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.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
}
}
LI = LI.nextSibling;
}
while(LI);
}
function einblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "block";
this.firstChild.nextSibling.nextSibling.style.backgroundColor = "silver";
}
function ausblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "none";
}
window.onload=hoverIE;
</script>

<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}

ul#Navigation {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}

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

ul#Navigation a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
* html ul#Navigation li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 7.8em; /* Breitenangabe fuer IE 6 */
}
ul#Navigation a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}

</style>
</head>
<body>
<h1 id="Beispiel">Mehrere Navigationsebenen</h1>

<ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<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">Seite 4</a></li>
</ul>

</body>
</html>

hpvw · 1. Juli 2005

Ich würde es wie folgt versuchen:
Du suchst Dir das entsprechende Event für den Mausklick (hab ich nicht im Kopf, bin kein JavaScript-Experte) und legst es auf eine Funktion, die ich jetzt switchItem nenne. Die soll dann, nach meiner Idee, wie folgt aussehen:

Code:

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 = "silver";
    }
}

Die Funktionen ausblenden und einblenden, sowie die Event-Zuweisung für onmouseover und onmouseout entfernst Du.

Gruß hpvw

Navigation mit Listen und Jscript und CSS

messmar

Erfahrenes Mitglied

hpvw

Erfahrenes Mitglied

Neue Beiträge