Horizontales Menü

JimiJones · 26 Februar 2010

Hallo zusammen,

ich hab mir grad eben ein horizontales Menü zusammengebastelt,
aber eine entscheidende Funktion kann es noch nicht.
Wenn ich das Browserfenster verkleinere, werden die Menüoberpunkte automatisch in die nächste Reihe geschoben.
Das ist auch gewollt. Nur will ich dies auch mit den Untermenüs der einzelnen Obermenüs erreichen, die erst beim aanklicken der Obermenüs erscheinen.
Ich hoffe ich habs deutlich machen können.

Hier mal der Code:

HTML:

<html>
<head>
<link href="table.css" type="text/css" rel="stylesheet" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for(var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i))
{document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

</head>

<body>

<div id="menu">
<dl>
<dt onmousedown="montre('smenu1');"><a href="#">Eins</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Eins a</a></li>
<li><a href="#">Eins b</a></li>
<li><a href="#">Eins c</a></li>
<li><a href="#">Eins d</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmousedown="montre('smenu2');"><a href="#">Zwei</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Zwei a</a></li>
<li><a href="#">Zwei b</a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmousedown="montre('smenu3');"><a href="#">Drei</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Drei a</a></li>
<li><a href="#">Drei b</a></li>
<li><a href="#">Drei c</a></li>
<li><a href="#">Drei d</a></li>
<li><a href="#">Drei f</a></li>
<li><a href="#">Drei g</a></li>
<li><a href="#">Drei h</a></li>
<li><a href="#">Drei i</a></li>
<li><a href="#">Drei j</a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmousedown="montre('smenu4');"><a href="#">Vier</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Vier a</a></li>
<li><a href="#">Vier b</a></li>
<li><a href="#">Vier c</a></li>
<li><a href="#">Vier d</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmousedown="montre('smenu5');"><a href="#">Fuenf</a></dt>
<dd id="smenu5">
<ul>
<li><a href="#">Fuenf a</a></li>
<li><a href="#">Fuenf b</a></li>
<li><a href="#">Fuenf c</a></li>
<li><a href="#">Fuenf d</a></li>
<li><a href="#">Fuenf f</a></li>
<li><a href="#">Fuenf g</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmousedown="montre('smenu6');"><a href="#">Sechs</a></dt>
<dd id="smenu6">
<ul>
<li><a href="#">Sechs a</a></li>
<li><a href="#">Sechs b</a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmousedown="montre('smenu7');"><a href="#">Sieben</a></dt>
<dd id="smenu7">
<ul>
<li><a href="#">Sieben a</a></li>
<li><a href="#">Sieben b</a></li>
<li><a href="#">Sieben c</a></li>
<li><a href="#">Sieben d</a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmousedown="montre('smenu8');"><a href="#">Acht</a></dt>
<dd id="smenu8">
<ul>
<li><a href="#">Acht a</a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmousedown="montre('smenu9');"><a href="#">Neun</a></dt>
<dd id="smenu9">
<ul>
</ul>
</dd>
</dl>

<dl>
<dt onmousedown="montre('smenu10');"><a href="#">Zehn</a></dt>
<dd id="smenu10">
<ul>
<li><a href="#">Zehn a</a></li>
<li><a href="#">Zehn b</a></li>
</ul>
</dd>
</dl>


</div>

</body>
</html>

Und hier der CSS:

Code:

body {
        margin: 10px; padding: 0; font: 16px Verdana, Arial, Helvetica, sans-serif;
}

a { text-decoration: none; }

dt,dl,dd,ul,li {
        list-style-type: none; margin: 0 10px 0 0; padding: 0;
}

dd { margin-top: 4px; }

#menu {
        position: absolute; left: 50px; top: 20px; height: 40px; width: 90%; border-bottom: 1px solid #
}




#menu a {
        background: #fff; color: #000; text-decoration: none;
}

#menu a:active { color: #ff0000; }

#menu dl { float: left; }

#menu li { display: inline; }

#menu li a { color: #ff0000; }

#menu li a:active { background-color: #f5f5f5; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, #smenu9, #smenu10 {
        position: absolute; left: 0; font-size: 11px; width: 500px;
}

Ich hoffe ihr könnt mir helfen!!

Horizontales Menü

JimiJones

Neues Mitglied

Neueste Beiträge