könnte da mal Hilfe gebrauchen

  • ich versuche mich gerade an meiner ersten Seite und hab da am linke Rand ne Menüleiste. Wenn ich mit der Maus über einzelne Punkte der Leiste gehe sollen unter dem Punkt Unterpunkte stehen. Das funktioniert sicher mit mouseover. Hier mal ein kläglich gescheiterter Versuch:

    <html>

    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>click</title>
    </head>

    <script type="text/javascript">
    function showEvent(id) {
    var d=document.getElementById("event"+id);
    var i=document.getElementById("e"+id);

    if (d.style.display == "") {
    d.style.display = "none";
    } else {
    d.style.display = "";
    }

    if (i.isactive == false || i.isactive == undefined) {
    i.style.backgroundColor = "#000";
    i.isactive = true;
    } else {
    i.style.backgroundColor = "#ffffff";
    i.isactive = false;
    }
    }

    function highlight(obj) {
    if (obj.isactive != true) {
    obj.style.backgroundColor = "yellow";
    }
    }

    function delight(obj) {
    if (obj.isactive != true) {
    obj.style.backgroundColor = "#ffffff";
    }
    }
    </script>
    <body>
    <table cellpadding="0" cellspacing="0" border="1" width="400">
    <tr id="e20" onclick="showEvent('20')" onmouseover="highlight(this)" onmouseout="delight(this)">
    <td>click</td>
    </tr>
    <tr>
    <td><div id="event20" class="tr" style="display: none;"></div></td>
    </tr>
    <tr class="trnormal" id="e21" onclick="showEvent('21')"
    onmouseover="<tr>
    <td>click2<td>
    </tr>"
    onmouseout="delight(this)">
    <td>click</td>
    </tr>

    <tr>
    <td><div id="event21" class="tr" style="display: none;"></div><td>
    </tr>
    </table>


    </html>

    Ich hab da schon einen ähnlichen Code gefunden, so in der Art werde ich den auch versuchen zu verwenden. Ich hoffe das das Prinzip das dahinter steht durchkommt. Wäre über Hilfe sehr erfreut.

    MfG

    Stefan

  • Ich hab da mal noch was gefunden. Sieht vom Prinzip her sehr gut aus. Aber folgt unter dem Quelltext.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynamisch Navigationsleisten auch im IE einblenden</title>
    <style type="text/css">
    body, p a {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
    }

    div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
    }
    * html div#Rahmen { /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
    }
    div#Rahmen div {
    clear: left;
    }
    ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
    }

    ul#Navigation li {
    list-style: none;
    float: left; /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
    }
    * html ul#Navigation li { /* Korrektur fuer den IE */
    margin-bottom: -0.4em;
    }

    ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none; /* Unternavigation ausblenden */
    }
    * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
    }
    ul#Navigation li:hover ul {
    display: block; /* Unternavigation in modernen Browsern einblenden */
    }
    ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
    }

    ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    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, * html ul#Navigation span {
    width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
    }
    ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
    }
    li a#aktuell { /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
    }
    ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
    }

    </style>

    <script type="text/javascript">
    if(window.navigator.systemLanguage && !window.navigator.language) {
    function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
    if (sucheUL(LI.firstChild)) {
    LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
    }
    LI = LI.nextSibling;
    }
    while(LI);
    }

    function sucheUL(UL) {
    do {
    if(UL) UL = UL.nextSibling;
    if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
    }

    function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
    }
    function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
    }

    window.onload=hoverIE;
    }
    </script>

    </head>
    <body>
    <h1 id="Beispiel">Dynamisch Navigationsleisten auch im IE einblenden</h1>

    <div id="Rahmen"><ul id="Navigation">
    [*]Seite 1

    [*]Seite 2
    <ul>
    [*]Seite 2a
    [*]Seite 2b
    [/list]

    [*]Seite 3

    [*]Seite 4
    <ul>
    [*]Seite 4a
    [*]<span>aktuelle Seite</span>
    [*]Seite 4c
    [/list]

    [*]Seite 5
    [/list]<div></div></div>


    zurück</p>
    </body>
    </html>


    Aber: wie bekomme ich das hin, dass die Leiste nich oben horizontal verläuft, sondern links am Rand vertikal ?

  • nach 5h Recherche / Suche und Herumwerkeln bin ich nun soweit:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynamisch Navigationsleisten auch im IE einblenden</title>
    <script type="text/javascript">
    if(window.navigator.systemLanguage && !window.navigator.language) {
    function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
    if (sucheUL(LI.firstChild)) {
    LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
    }
    LI = LI.nextSibling;
    }
    while(LI);
    }

    function sucheUL(UL) {
    do {
    if(UL) UL = UL.nextSibling;
    if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
    }

    function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
    }
    function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
    }

    window.onload=hoverIE;
    }
    </script>

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

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

    ul#Navigation a, ul#Navigation span, ul#Navigation h2
    {
    display:block;
    padding: 0em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: black; background-color: white;
    }
    * html ul#Navigation a, ul#Navigation span, ul#Navigation h2
    {
    width: 100%; /* Breitenangabe fuer IE 5.x */
    w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
    }
    ul#Navigation a:hover, ul#Navigation span
    {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: #000080;
    }
    ul#Navigation h2
    {
    font-size: 1em;
    margin: 1.1em 0 0;
    border-color: gray;
    color: white; background-color: #000080;
    }

    </style>

    </head>
    <body style="background-color: #FFFFFF">
    <h1 id="Beispiel">Dynamisch Navigationsleisten auch im IE einblenden</h1>

    <div id="Rahmen" style="width: 170; height: 724"><ul id="Navigation">
    [*]<font color="#000000">Seite1</font>

    [*]<font color="#000000">Seite2</font>
    <ul>
    [*]<font color="#000000">Seite 2a</font>
    [*]<font color="#000000">Seite 2b</font>
    [/list]

    [*]<font color="#000000">Seite 3</font>

    [*]<font color="#000000">Seite 4</font>
    <ul>
    [*]<font color="#000000">Seite 4a</font>
    [*]<span><font color="#000000">aktuelle Seite</font></span>
    [*]<font color="#000000">Seite 4c</font>
    [/list]

    [*]<font color="#000000">Seite 5</font>
    [/list]<div></div></div>


    zurück</p>
    </body>
    </html>

    kann man bestimmt noch kürzern, aber darum gehts nicht.
    folgendes Problem:
    Mouseover funzt, man sieht die untermenüs, dummerweise kann ich die nicht anwählen, denn sobald ich da rauf gehe, verschwinden die, weil ja das mouseover weg ist :?
    Kann man das irgendwie später ausblenden lassen? mit ner sekunde verzögerung oder sowas.

    Danke schon mal

    Stefan

  • Gast,

    1. tu Dir ein Gefallen und melde Dich im Forum an
    2. mach es Dir nicht so schwer - hier hat Raphael Götter schon vorgearbeitet:
    http://tutorials.alsacreations.com/modelesmenus/vd2.htm

    Allerdings ist es eigentlich nicht ratsam die Navigation mit JS zu machen, da viele aus Sicherheitsgründen JS abschalten und dann geht nicht mehr viel.
    Du kannst das ganz auch mit CSS lösen. siehe http://www.staettner.de/ und dann auf Planung, dann siehst Du den Unterschied.

    Gruß yeti66 :wink: