caltuna
Grünschnabel
Hi Ihr,
ich habe ein kleines Problem mit meinem Aufklappmenue.
Wie kann ich es einrichten, dass es auf der angeklickten Seite geöffnet ist und so lange bleibt bis ein anderer Link geklickt wird?
Ich habe ein Template erstellt - jede einzelne Seite öffnet sich neu.
Bin mir gar nicht mehr so sicher ob diese Form des Menüs da die Ideallösung ist.
Und hier die HTML
ich habe ein kleines Problem mit meinem Aufklappmenue.
Wie kann ich es einrichten, dass es auf der angeklickten Seite geöffnet ist und so lange bleibt bis ein anderer Link geklickt wird?
Ich habe ein Template erstellt - jede einzelne Seite öffnet sich neu.
Bin mir gar nicht mehr so sicher ob diese Form des Menüs da die Ideallösung ist.
Code:
#nav {
font-family: Lucida Sans Unicode, verdana, sans-serif;
font-size: 13px;
width: 196px;
min-height: 450px;
margin: 0px;
padding-top: 5px;
position: relative;
z-index: 667;
background: url(../design/navi_top_new.jpg) no-repeat;
float:left;
}
ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
ul#menue {
width: 120px;
margin: 3em 0 0 0;
padding-left: 50px;
padding-top: 20px;
}
ul#menue li a {
margin: 0px;
height: 20px;
line-height: 25px;
text-align: left;
display: block;
color: #3A546B;
text-decoration: none;
}
ul#menue li a + ul.submenue
{
display: none;
padding-left: 20px;
}
ul#menue li a:focus + ul.submenue
{
display: block;
color: #34537c;
}
ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a, ul#submenue5 li a, ul#submenue6 li a, ul#submenue7 li a
{
background: none; /* IE */
}
.sep {
margin-top: 15px;
padding-right: 0;
background: transparent!important;
}Und hier die HTML
HTML:
<script type="text/javascript">
<!--
window.onload=zeigen;
function zeigen(id) {
for (var i = 1; i<=5; i++) {
if (document.getElementById("submenue"+i)) {document.getElementById("submenue"+i).style.display="none";}
}
if (document.getElementById(id)) {document.getElementById(id).style.display="block";}
}
//-->
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
<ul id="menue">
<li><a href="../index.html">Aktuelles</a></li>
<li><a href="../familie.html">Über uns </a></li>
<li class="sep"><a href="#" onclick="javascript:zeigen('submenue1')">Golden Retriever </a>
<ul id="submenue1" class="submenue">
<li><a href="../golden/huendinnen/baby.html">Baby</a></li>
<li><a href="../golden/huendinnen/lina.html">Lina</a></li>
<li><a href="../golden/huendinnen/daena.html" target="_blank">Daena</a></li>
<li><a href="../golden/huendinnen/lilly.html">Lilly</a></li>
</ul>
</li>
<li><a href="#" onclick="javascript:zeigen('submenue2')">Rüden</a>
<ul id="submenue2" class="submenue">
<li><a href="../golden/rueden/don.html">Don</a></li>
<li><a href="../golden/rueden/eli.html">Eli</a></li>
</ul>
</li>
<li><a href="#" onclick="javascript:zeigen('submenue3')">Welpen</a>
<ul id="submenue3" class="submenue">
<li><a href="../golden/welpen/aktuell.html">Aktuell</a></li>
<li><a href="../golden/welpen/bisher.html">Bisher</a></li>
<li><a href="../golden/welpen/plan.html">Wurfplan</a></li>
</ul>
</li>
<li class="sep"><a href="#" onclick="javascript:zeigen('submenue4')">Labrador Retriever</a>
<ul id="submenue4" class="submenue">
<li><a href="../labrador/huendinnen/talea.html">Talea</a></li>
<li><a href="../labrador/huendinnen/smilla.html">Smilla</a></li>
<li><a href="../labrador/huendinnen/pepper.html">Pepper</a></li>
</ul>
</li>
<li><a href="#" onclick="javascript:zeigen('submenue5')">Welpen</a>
<ul id="submenue5" class="submenue">
<li><a href="../labrador/welpen/aktuell.html">Aktuell</a></li>
<li><a href="../labrador/welpen/bisher.html">Bisher</a></li>
<li><a href="../labrador/welpen/plan.html">Wurfplan</a></li>
</ul>
</li>
<li class="sep"><a href="#" onclick="javascript:zeigen('submenue6')">Galerie</a>
<ul id="submenue6" class="submenue">
<li><a href="#">Unsere Hunde</a></li>
<li><a href="#">Gemischt</a></li>
</ul>
</li>
<li><a href="#" onclick="javascript:zeigen('submenue7')">Memorian</a>
<ul id="submenue7" class="submenue">
<li><a href="../memory/lisa.html">Lisa</a></li>
</ul>
</li>
<li class="sep"><a href="#">Links</a></li>
<li><a href="#">Gästebuch</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
