Menu
I have been working on a menu that I like
I got it from [url]http://www.interspire.com/content/articles/10/1
Its an excellent tutorial showing how to create an expanding menu using js and dhtml and css
Here is the original code:
in the head
<script language=”JavaScript” type=”text/JavaScript”>
<!–
menu_status = new Array();
function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);
if(menu_status[theid] != ‘show’) {
switch_id.className = ‘show’;
menu_status[theid] = ‘show’;
}else{
switch_id.className = ‘hide’;
menu_status[theid] = ‘hide’;
}
}
}
//–>
</script>
in the body
<a class=”menu1″ onclick=”showHide(‘mymenu1’)”>Menu 1</a>
<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’)”>Menu 2 </a>
<div id=”mymenu2″ 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(‘mymenu3’)”>Menu 3 </a>
<div id=”mymenu3″ 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(‘mymenu4’)”>Menu 4 </a>
<div id=”mymenu4″ 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(‘mymenu5’)”>Menu 5 </a>
<div id=”mymenu5″ 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>
and in the style sheet
.menu1{
background-image:url(images/menudiv1bg.gif);
margin-left:25px;
padding-left:20px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}
.submenu{
background-image: url(images/submenu.gif);
display: block;
height: 19px;
margin-left: 38px;
padding-top: 2px;
padding-left: 7px;
color: #333333;
}
.hide{
display: none;
}
.show{
display: block;
}
this works fine but I want to be able to change the image on the main button to one that could have an arrow pointing right for closed then pointing down when that sub menu is open. the other thing I want it to do is to only have one submenu open at a time so when you click on a main menu button any other open sub menus should close
this is what I have done
some of its abit messy I’m afraid
in the head
menu_status = new Array();
menuButtons = new Array();
menuButtons[0] = document.getElementById(menuButton1);
/*menuButtons[1] = document.getElementById(menuButton2);
menuButtons[2] = document.getElementById(menuButton3);
menuButtons[3] = document.getElementById(menuButton4);
menuButtons[4] = document.getElementById(menuButton5);
function showHide(theid, theButtonid){
for (i=0;i<menuButtons.length;i++)
{
menuButtons[i].className = ‘show’?
}
if (document.getElementById) {
var switch_id = document.getElementById(theid);
if(menu_status[theid] != ‘show’) {
switch_id.className = ‘show’;
menu_status[theid] = ‘show’;
}else{
switch_id.className = ‘hide’;
menu_status[theid] = ‘hide’;
}
}
/*if (document.getElementById) {
var switch_id2 = document.getElementById(theButtonid);
if(menu_status[theButtonid] != ‘menu1on’) {
switch_id2.className = ‘menu1on’;
menu_status[theid] = ‘menu1on’;
}else{
switch_id2.className = ‘menu1off’;
menu_status[theid] = ‘menu1off’;
}
}
}
in the body
<div id=”navigationPanel”>
<a href=”javascript:?” class=”menu1off” id=”menuButton1″ onclick=”showHide(‘mymenu1,menuButton1’)”>Menu 1</a>
<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 href=”javascript:?” class=”menu1″ onclick=”showHide(‘mymenu2’)”>Menu 2 </a>
<div id=”mymenu2″ class=”hide”>
<a href=”#” class=”submenu”><img src=”subMenuItemLightGif.gif” /></a>
<a href=”#” class=”submenu”><img src=”subMenuItemLightGif.gif” /></a>
<a href=”#” class=”submenu”><img src=”subMenuItemLightGif.gif” /></a>
<a href=”#” class=”submenu”><img src=”subMenuItemLightGif.gif” /></a>
</div>
and in the style sheet
.menu1{
background-image:url(homeClosedGif.gif);
margin-left:0px;
padding-left:2px;
padding-top:0px;
padding-bottom:0px;
display:block;
text-decoration: none;
color: #000000;
height: 40px;
}
.menu1off{
background-image:url(homeClosedGif.gif);
margin-left:0px;
padding-left:2px;
padding-top:0px;
padding-bottom: 0px;
display:block;
text-decoration: none;
color: #000000;
height: 40px;
border-collapse:collapse;
}
.menu1on{
background-image:url(homeOpenGif.gif);
margin-left:2px;
padding-left:2px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 40px;
}
.submenu{
background-image:url(subMenuItemLightGif.gif);
display: block;
height: 40px;
margin-left: 0px;
padding-top: 0px;
padding-left: 3px;
color: #333333;
text-decoration:none;
border-bottom-width:0px;
}
.hide{
display: none;
}
.show{
display: block;
}
I undestand most of whats happenning. I assume that menu_status is part of the api.
Its been a while since I’ve been coding and when I was I was using java and VB.net so I’m not too sure about syntax or what should go in the head and what can go in the body.
Any help would be greatfuly appreciatted, also I think that much cool stuff can be done with javascript and css and dhtml together. If anyone has any good tutorials or resources on that tip I’d be thankful
Also if any knows of any good ‘expandable menu tutorials’, that have the functionality that I’m after, that would be ideal.