Ausklappbares Menü das sich bei Klick auf Oberpunkt öffnet mit javascript

Sabi_Bony

Hallo Leute
Ich komme mit meinem aufklappbaren vertikalen Menü nicht weiter..
Ich habe in CSS mit :active schon geschafft, dass es angezeigt wird, sobald ich mit der Maus auf den Überpunkt klicke, es dann aber wieder verschwindet sobald ich die Maus loslasse. Ich möchte aber, dass das Untermenü auch nach dem Klicken so lange geöffnet bleibt, bis ich einen anderen Oberpunkt auswähle. Wenn ich das richtig verstanden habe benötige ich dafür javascript.

mein bisheriger html code:

HTML

...
<body>
<div id="menu">
      <nav>
            <a href="home.htm" target="Hauptframe">Home</a>
            <div id="unter-menue">
                  <a href="wanderwege.htm" onClick="javascript:menueinblendung("Wanderwege") "target="Hauptframe">Wanderwege</a>
                       <ul>
                            <li><a href="wanderweg1.htm" target="Hauptframe">Wanderweg 1</a></li>
                            <li><a href="wanderweg2.htm" target="Hauptframe">Wanderweg 2</a></li>
                            <li><a href="wanderweg3.htm" target="Hauptframe">Wanderweg 3</a></li>
                       </ul>
              </div>
              <a href="wir_ueber_uns.htm" target="Hauptframe">Wir über uns</a>
        </nav>
  </div>
</body>
...

Alles anzeigen

in css hab ich außer den anderen Formatierungen diesbezüglich nur das stehen um das Untermenü erstmal standardmäßig zu verstecken:

Code

#unter-menue ul{
display:none;
}

dazu hab ich mir aus dem Forum folgendes abgeschaut: (im head)

Code

<script type="text/javascript">
function menueinblendung(Name)
{
var i = document.getElementById? 1:0;
if(i)
{document.getElementById(Name).style.display="block"
}
}


</script>

Alles anzeigen

ich kann leider kein javascript aber andere Versuche von mir waren auch:

Code

<script type="text/javascript">
function menueinblendung(Name)
{
#unter-menue ul{
display:block;
}
}
</script>

oder ähnliches.
Leider funktioniert das so nicht.

Kann mir jemand eine ganz einfache Lösung für mein Problem sagen?

Danke schonmal

djheke

Wenn Du kein weiteres JS benötigst, kannst Du auch den Input-Hack nehmen.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}
nav , nav ul {
 background:#000;
 float:left;
 width:100%;
}


nav li {
 position:relative;
}


nav li ul {
 position:absolute;
 top:-99999em;
 left:-9999em;
 background:#444;
}


nav li {
 float:left;
}


nav li li {
 float:none;
}


nav a {
 padding:10px;
 display:inline-block;
 color:#fff;
 text-decoration:none;
}


nav li:hover  {
 background:red;
}


nav input {
 display:none;
}


nav label span {
 display:none;
}


nav label {
 display:inline-block;
 padding:10px;
 background:#0f0;
 text-align:center;
 cursor:pointer;
}


nav label:before {
 content:"+";
 color:#000;
 display:inline-block;
 width:1em;
 font-weight:bold;
}


nav input:checked + label:before {
 content:"-";
}


nav input:checked ~ ul {
 top:auto;
 left:0;
}
</style>
</head>


<body>
<nav>
<ul>
  <li><a href="index.html">Home</a>
  <li><a href="index.htm">Wanderwege</a><input type="checkbox" id="sub"><label for="sub"><span>+</span></label>
    <ul>
      <li><a href="wanderweg1.html">Wanderweg 1</a></li>
      <li><a href="wanderweg1.html">Wanderweg 2</a></li>
      <li><a href="wanderweg1.html">Wanderweg 3</a></li>
    </ul>
  </li>
  <li><a href="about.html">Über uns</a></li>
</ul> 
</nav>
</body>
</html>

Alles anzeigen

Tags