Supportnet / Forum / Webseiten/HTML
Verstecktes Navigationsmenü
Frage
Hallo
Ich habe mal eine Frage. Ich bin dabei eine web seite zu gestalten und verzweifel gerade ein wenig an der Menü leiste. Das grundgerüst habe ich fertig aber ich möchte gerne das man die Untermenüs erst sieht wenn man auf das "Hauptmenü 1" klickt. Und wenn man dann auf ein anderes "Hauptmenü 2" klickt sollen die untermenüs vom "Hauptmenü 1" verschwinden und die Untermenüs vom "Hauptmenü 2" zu sehen sein. wie kann ich das bewerkstelligen? Kann mir da wer helfen?
Hier mal der html code den ich bereits habe:
<html>
<head>
<title>Webseitenname</title>
<base target="Hauptframe">
<style type="text/css">
body, p a {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black;
}
ul#Navigation {
width: 10em;
margin: 0; padding: 0.8em;
}
* 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: #000000;
}
* 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: #FF0000;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><a href="#">Hauptmenü 1</a>
<ul>
<li><a href="#">Untermenü 1</a>
<ul>
<li><a href="#">Untermenü 1-1</a></li>
<li><a href="#">Untermenü 1-2</a></li>
<li><a href="#">Untermenü 1-3</a></li>
</ul>
</li>
<li><a href="#">Untermenü 2</a>
<ul>
<li><a href="#">Untermenü 2-1</a></li>
<li><a href="#">Untermenü 2-2</a></li>
<li><a href="#">Untermenü 2-3</a></li>
<li><a href="#">Untermenü 2-4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Hauptmenü 2</a>
<ul>
<li><a href="#">Untermenü 1</a></li>
<li><a href="#">Untermenü 2</a></li>
<li><a href="#">Untermenü 3</a></li>
<li><a href="#">Untermenü 4</a></li>
</ul>
</li>
<li><a href="#">Hauptmenü 3</a>
<ul>
<li><a href="#">Untermenü 1</a></li>
<li><a href="#">Untermenü 2</a></li>
<li><a href="#">Untermenü 3</a></li>
<li><a href="#">Untermenü 4</a></li>
</ul>
</li>
</ul>
</body>
</html>
Danke
Antwort 1 von rfb
Zitat:
wie kann ich das bewerkstelligen?
dazu brauchst du JavaScript, per CSS allein lässt sich das nicht lösenwie kann ich das bewerkstelligen?
(Begründung hierfür in https://supportnet.de/threads/1236933, dort gibts auch ein paar Links).
Antwort 2 von Solo
Hi, hier gibt es Menüs für dich:
http://www.javarea.de/index.php3?opencat=Javascript&subcat=Navigati...
http://www.javarea.de/index.php3?opencat=Javascript&subcat=Navigati...