Messmar: CSS-Navigation mit Listen und JScript

SELF-Forum

CSS-Navigation mit Listen und JScript

Messmar
−1 Informationen zu den Bewertungsregeln

Hallo zusammen,

Ich habe eine Navigation mit Listen, CSS und JS, die ich über
SelfHtml bekam.

Das Problem ist, daß die Navigation beim ertsen Aufruf im Browser oder auch beim neu laden bzw. Refresh des Browsers, aufgeklappt und nicht zu ist.

Ich will erreichen, daß die Navi-Elemente beim ersten Aufruf zu oder anders gesagt status hidden haben.

Besten Gruß und Danke

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

}
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">Die zweite Navi</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>

Beitrag melden
−1
Informationen zu den Bewertungsregeln

  1. CSS-Navigation mit Listen und JScript

    Joe
    −1 Informationen zu den Bewertungsregeln

    hi!

    einfach in den ul-tag displkay:none; schreiben
    => <ul style="display:none;">
    dann sollte alles funktionieren

    lg
    Joe

    Beitrag melden
    −1
    Informationen zu den Bewertungsregeln

    1. CSS-Navigation mit Listen und JScript

      Messmar
      – Informationen zu den Bewertungsregeln

      Hi,

      einfach in den ul-tag displkay:none; schreiben

      Danke dir, es funktioniert

      Gruß
      Messmar

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. CSS-Navigation mit Listen und JScript

      Joe
      – Informationen zu den Bewertungsregeln

      funktionierts so?!?

      lg
      Joe

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. CSS-Navigation mit Listen und JScript

    Ingo Turski Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Ich habe eine Navigation mit Listen, CSS und JS, die ich über
    SelfHtml bekam.

    schön... Du hast also ein Beispiel genomen und das Script aus einem anderen Beispiel eingefügt und etwas verändert.

    Das Problem ist, daß die Navigation beim ertsen Aufruf im Browser oder auch beim neu laden bzw. Refresh des Browsers, aufgeklappt und nicht zu ist.

    Logisch. Du mußt entweder das Script so erweitern, daß es onload die Unternavigation ausblendet oder das CSS entsprechend ändern.

    Ich will erreichen, daß die Navi-Elemente beim ersten Aufruf zu oder anders gesagt status hidden haben.

    Du meinst display:none.

    ul#Navigation li ul {
    margin: 0 0 0 1em; padding: 0;
    }

    hier wäre z.B. eine gute Gelegenheit, die Unternavigation auszublenden.
    Bedenke aber, daß die Unternavigation dann ohne Javascript nicht mehr zur Verfügung steht und irgendwie alternativ zu erreichen sein sollte, z.B. über die Links der Hauptnavigation.

    Anders wäre es, wenn Du die Links onload über Javascript ausblendest. Dann wäre das Menü bei deaktiviertem Javascript komplett sichtbar.

    freundliche Grüße
    Ingo

    --
    [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln