Hi there,
heres an expanding menu for you to build upon. Its easily understood when you look at the code and alot easier to edit it.
My advice to you would to first copy and paste this code in an html page of its own and then edit it from there. I know it looks daunting but once you preview it in a browser, all is clear.
hope this helps.
expanding menu code below
- Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 1px;
background-color:none;
color:#666666;
width:140px;
padding:1px;
text-align:left;
font-weight:bold;
/*/*/border:1px solid #A6C8E4;/* */
}
.submenu{
margin-bottom: 0.5em;
}
</style>
<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="text_vis.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style2 {
margin-bottom: 1px;
background-color: none;
color: #FFFFFF;
width: 140px;
padding: 1px;
text-align: left;
border: 1px solid #A6C8E4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
cursor: pointer;
font-weight: bold;
}
.style3 {
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
-->
</style>
</head>
<body bgcolor="#79B6EA">
<table width="17%" border=0 cellpadding=0 cellspacing=0 bgcolor="#79B6EA">
<tbody>
<tr>
<td width="195" height="28" background="images/spacer_4_prod.jpg"><strong></strong></td>
<td height=29 bordercolor="#79B6EA"> </td>
</tr>
<tr>
<td width="195" height="312" align="left" valign="top" bgcolor="A6C8E4"><!-- Keep all menus within masterdiv--><span class="submenu" id="sub1"><br>
</span>
<div id="masterdiv">
<div class="menutitle style3" onClick="SwitchMenu('sub2')"> menu1 </div>
<span class="submenu" id="sub2"> <a href="Standard_Product_list.htm" target="main" class="cusStan" style="text-decoration:none"></a><a href="test.html" target="main" class="prodSide" style="text-decoration:none">-
link</a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">-
link</a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">-
link</a><br>
<br>
</span>
<div class="menutitle style3" onClick="SwitchMenu('sub3')"> menu2</div>
<span class="submenu" id="sub3"> <a href="Standard_Product_list.htm" target="main" class="cusStan" style="text-decoration:none"></a><a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link</a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<br>
</span>
<div class="menutitle style3" onClick="SwitchMenu('sub4')">menu3</div>
<span class="submenu" id="sub4"> <a href="Standard_Product_list.htm" target="main" class="cusStan" style="text-decoration:none"></a><a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">-
link</a><br>
<br>
</span>
<div class="style2" onClick="SwitchMenu('sub5')"> menu4 </div>
<span class="submenu" id="sub5"> <a href="Standard_Product_list.htm" target="main" class="cusStan" style="text-decoration:none"></a><a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link</a><br>
<br>
</span></div></td>
</tr>
</tbody>
</table>
</body>
</html>
Enjoy!
