[JavaScript] Pull-Down-Navigation implementieren?

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    [JavaScript] Pull-Down-Navigation implementieren?

    Hallo
    Ich habe endlich ein Pull-Down-Nav-Skript gefunden.
    Aber wie bindet man das richtig ein?
    Ich möchte es in mein 4-spaltiges zentriertes Layout

    Banner-
    Nav-
    Content
    Impressum

    interieren, also in Spalte 2.

    Aber das geht nicht. Das Skript scheint "abslout" (so herisst das glaube ich) zu sein, so dass es leider nicht wie mein Layout immer im Browser zentriert dargestellt wird. Wie erreich ich das?

    Wenn ich das Skript in die Nav-Spalte meines Layout kopiere, rutscht mein ganzes Layout "unter" die Navigation, wie kommt das? Bitte helft mir...

    Hier ist das Skript:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Menu</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    <!--
    function montre(id) {
    if (document.getElementById) {
    document.getElementById(id).style.display="block";
    } else if (document.all) {
    document.all[id].style.display="block";
    } else if (document.layers) {
    document.layers[id].display="block";
    } }

    function cache(id) {
    if (document.getElementById) {
    document.getElementById(id).style.display="none";
    } else if (document.all) {
    document.all[id].style.display="none";
    } else if (document.layers) {
    document.layers[id].display="none";
    } }

    //-->
    </script>
    <style type="text/css">
    <!--
    body {margin: 5px; padding: 0; font: 14px Verdana, sans-serif;}

    ul, li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    div.menu {
    position: absolute;
    width: 600px;
    top: 45px;
    z-index: 3;
    left: 69px;
    }
    div.menu li {
    float: left;
    width: 120px;
    }

    div.menu a {
    margin: 0 2px;
    height: 20px;
    display: block;
    text-align: center;
    font-weight: bold;
    border: 1px solid gray;
    text-decoration: none;
    color: #000;
    background: #fff;
    }

    div.menu a:hover {
    background: #ccc;
    border: 1px solid gray;
    }

    #smenu1, #smenu2, #smenu3, #smenu4 {
    display: none;
    float: left;
    width: 120px;
    font-size: 12px;
    }
    #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
    font-weight: normal;
    border-top: 0 none;
    }
    .site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    padding: 5px;
    border: 1px solid gray;
    }

    .mentions {
    position: absolute;
    top : 300px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    }
    a {text-decoration: none;
    color: #222;
    }

    -->
    </style></head>


    <body>
    <table width="80%" border="0">
    <tr>
    <td>
    <div class="menu">
    <ul><li><a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="">Menu 1</a> <ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
    <li><a href="">Subkategorie 1.1</a></li>
    <li><a href="">Subkategorie 1.2</a></li>
    <li><a href="">Subkategorie 1.3</a></li>
    </ul></li>
    <li><a onmouseover="montre('smenu2');" onmouseout="cache('smenu2');" href="">Menu 2</a><ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
    <li><a href="">Subkategorie 2.1</a></li>
    <li><a href="">Subkategorie 2.2</a></li>
    </ul></li>
    <li><a onmouseover="montre('smenu3');" onmouseout="cache('smenu3');" href="">Menu 3</a><ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
    <li><a href="">Subkategorie 3.1</a></li>
    <li><a href="">Subkategorie 3.2</a></li>
    <li><a href="">Subkategorie 3.3</a></li>
    <li><a href="">Subkategorie 3.4</a></li>
    <li><a href="">Subkategorie 3.5</a></li>
    </ul></li>
    <li><a onmouseover="montre('smenu4');" onmouseout="cache('smenu4');" href="">Menu 4</a><ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
    <li><a href="">Subkategorie 4.1</a></li>
    <li><a href="">Subkategorie 4.2</a></li>
    <li><a href="">Subkategorie 4.3</a></li>
    </ul></li>
    </ul>
    </div>
    </td>
    </tr>
    </table>

    </body>
    </html>

    Mir wäre auf jeden Fall schon sehr geholfen wenn mir jemand verraten kann, wie man das ganze ding zwntriert dar stellen kann....
    Das wäre jedenfalls ein Anfang...

    Ich danke euch schon viel mals im Voraus

    mario72
    Stichworte: -
  • #2
    Das Skript scheint "abslout"
    ...und was sagt dir das:
    Code:
    div.menu {
[b][COLOR=crimson]position: absolute;[/COLOR] [/b]
width: 600px;
top: 45px;
z-index: 3;
left: 69px;
}

    Kommentar

    Vorherige template Weiter
    Lädt...
    X