ButtermilkJack
New Member
I've downloaded the code for a javascript/css menu and placed it into a new site I'm developing. However, I need it to function differently to how it does 'out of the box'.
At the moment when you click on any link, the submenu appears below it. And when you click it again, it disappears. However, if you don't 'close' the submenu it will remain open when you click on another link. So the menu will grow very large if the user doesn't close submenus before going to another.
Does anyone know if the code can be modified to make all other submenus close if a new one is clicked open.
The code is below...
Javascript:
CSS:
HTML:
Any help much appreciated
At the moment when you click on any link, the submenu appears below it. And when you click it again, it disappears. However, if you don't 'close' the submenu it will remain open when you click on another link. So the menu will grow very large if the user doesn't close submenus before going to another.
Does anyone know if the code can be modified to make all other submenus close if a new one is clicked open.
The code is below...
Javascript:
Code:
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';
}
}
}
Code:
.menu1 {
display: block;
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-variant: small-caps;
color: #000000;
}
a.menu1 {
background-color: #fe9d20;
height: 18px;
margin: 0;
padding: 2px 10px;
text-decoration: none;
border-bottom: 1px solid #ffffff;
cursor: pointer;
cursor: hand;
}
a:hover.menu1 {
background-color: #dddddd;
}
.submenu {
display: block;
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-variant: small-caps;
color: #000000;
}
a.submenu {
background-color: #ffb874;
height: 18px;
margin: 0;
padding: 2px 15px;
text-decoration: none;
border-bottom: 1px solid #ffffff;
cursor: pointer;
cursor: hand;
}
a:hover.submenu {
background-color: #dddddd;
}
.hide {
display: none;
}
.show {
display: block;
}
Code:
<a class="menu1" onclick="showHide('menu1')">home</a>
<div id="menu1" class="hide">
<a href="#" class="submenu">link one here</a>
</div>
<a class="menu1" onclick="showHide('menu2')">expertise</a>
<div id="menu2" class="hide">
<a href="#" class="submenu">staff one</a>
<a href="#" class="submenu">staff two</a>
<a href="#" class="submenu">staff three</a>
</div>
<a class="menu1" onclick="showHide('menu3')">services</a>
<div id="menu3" class="hide">
<a href="#" class="submenu">services one</a>
<a href="#" class="submenu">services two</a>
<a href="#" class="submenu">services three</a>
<a href="#" class="submenu">services four</a>
</div>
<a class="menu1" onclick="showHide('menu4')">projects</a>
<div id="menu4" class="hide">
<a href="#" class="submenu">project one</a>
<a href="#" class="submenu">project two</a>
<a href="#" class="submenu">project three</a>
<a href="#" class="submenu">project four</a>
<a href="#" class="submenu">project five</a>
</div>
<a class="menu1" onclick="showHide('menu5')">contact</a>
<div id="menu5" class="hide">
<a href="#" class="submenu">Link One here</a>
</div>Any help much appreciated