Skjul alle submenuer.
Jeg har brugt denne tutorial til at opbygge min menu.http://www.interspire.com/content/articles/10/1/Building-An-Expanding-DHTML-Menu-With-CSS-and-JavaScript
Nu skal jeg have ændret scriptet så det lukker alle submenuer og ikke kun den sidste der er åbnet.
Jeg har selv udbygget scriptet så det holder det valgte menu punkt åben når man hopper videre til valgt side.
Hvis i følger dette link kan i se problemet.
http://www.elverbo.dk/version2/bestyrelsesmedlemmer.shtml?mymenu2
Hvordan løser jeg det?
Her er css delen af menuen.
.submenu{
display: block;
height: 19px;
margin-left:10px;
padding-top: 2px;
padding-left: 7px;
color: #333333;
}
.hide{
display: none;
}
.show{
display: block;
}
Her er javascriptet.
<script language="JavaScript" type="text/JavaScript">
<!--
var last_expanded = '';
function showHide(id){
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}
/*
Her er den del jeg selv har lagt på, til at holde valgt menu punkt åben.
*/
function pageload(){
if (window.location.search.substring(1) > " ") {
var id = window.location.search.substring(1)
var obj = document.getElementById(id);
obj.className = 'show';
}
}
//-->
</script>
Og her er menuen.
<a class="menu1" onclick="showHide('mymenu1')">Info / seneste nyt</a><br/>
<div id="mymenu1" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
<a class="menu1" onclick="showHide('mymenu2')">Bestyrelsen</a><br/>
<div id="mymenu2" class="hide">
<a href="bestyrelsesmedlemmer.shtml?mymenu2" class="submenu">Bestyrelses medlemmer</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>