Hallo alle zusammen,
ich möchte folgenden Script für meine Navigation verwenden:
http://www.guenther-th.de/test.html
die Funktion ist soweit i.O., was ich aber gerne ändern möchte ist, das bein öffnen einer neuen Option die vorhergende wieder geschlossen wird.
kurz gesagt:
- click auf Option 1 - öffnen Option 1
- click auf Option 2 - öffnen Option 2 und schliessen Option 1
Vielen Dank schon mal im Voraus
Gruß feuerwand
hier noch mal der Quellstext mit script:
<html><head>
<meta http-equiv="content-type" content="text/html; CHARSET=iso-8859-1"><title>Javascript & CSS Seitenmenu</title>
<link rel="stylesheet" title="Screen" href="jssidemenu4_files/jssidemenu4.css" type="text/css" media="screen">
<style type="text/css">
<!--
#main {
margin-left: 9em;
}
#menu {
position: absolute;
left: 0;
margin: 0;
padding: 1ex;
}
#menu a {
display: block;
padding-left: 1em;
}
#menu ul{
margin-left: 0;
padding-left: 1em;
}
#menu li ul {
padding: 0;
margin: 0;
}
#menu li {
cursor: pointer;
list-style-type: none;
padding: 0;
text-decoration: underline;
display: block;
border: solid 1px white;
}
//-->
</style>
<script type="text/javascript">
<!--
function hideSub( ) {
if (!document.getElementsByTagName)
return;
var mnu = document.getElementById("menu");
var toplis = mnu.getElementsByTagName("li");
for (it = 0; it < toplis.length; it++) { /* each top li */
var sublis = toplis[it].getElementsByTagName("li");
for (is = 0; is < sublis.length; is++) { /* each sub li */
if (sublis[is].style)
if (toplis[it].className == 'show')
sublis[is].style.display = 'block';
else
sublis[is].style.display = 'none';
}
}
}
function mShow(Me)
{
if (!Me.getElementsByTagName)
return;
var mylis = Me.getElementsByTagName("li");
if (!mylis)
return;
for (j = 0; j < mylis.length; j++) {
if (mylis[j].style.display == 'block')
mylis[j].style.display = 'none';
else
mylis[j].style.display = 'block';
}
}
//-->
</script>
<body onload="hideSub();">
<h1>Javascript und css Seitenmenu</h1>
<ul id="menu">
<li onclick="mShow(this);">Options 1
<ul>
<li style="display: none;"><a href="#">Item 1</a></li>
<li style="display: none;"><a href="#">Item 1</a></li>
<li style="display: none;"><a href="#">Item 1</a></li>
<li style="display: none;"><a href="#">Item 1</a></li>
</ul>
</li>
<li onclick="mShow(this);">Options 2
<ul>
<li style="display: none;"><a href="#">Item 2</a></li>
<li style="display: none;"><a href="#">Item 2</a></li>
<li style="display: none;"><a href="#">Item 2</a></li>
<li style="display: none;"><a href="#">Item 2</a></li>
</ul>
</li>
<li onclick="mShow(this);">Options 3
<ul>
<li style="display: none;"><a href="#">Item 3</a></li>
<li style="display: none;"><a href="#">Item 3</a></li>
<li style="display: none;"><a href="#">Item 3</a></li>
</ul>
</li>
<li onclick="mShow(this);">Options 4
<ul>
<li style="display: none;"><a href="#">Item 4</a></li>
<li style="display: none;"><a href="#">Item 4</a></li>
<li style="display: none;"><a href="#">Item 4</a></li>
<li style="display: none;"><a href="#">Item 4</a></li>
<li style="display: none;"><a href="#">Item 4</a></li>
</ul>
</li>
<li onclick="mShow(this);">Options 5
<ul>
<li style="display: none;"><a href="http://google.com/">Item 5</a></li>
<li style="display: none;"><a href="#&4">Item 5</a></li>
<li style="display: none;"><a href="#&4">Item 5</a></li>
<li style="display: none;"><a href="#&4">Item 5</a></li>
</ul>
</li>
</ul>
</body>
</html>
|