Posted By

raondo on 07/20/06

Tagged

Versions (?)

Last Edited at 07/20/06 02:15pm

Statistics

Viewed 344 times

Favorited by 1 user(s)

Related snippets

toggle menu persist

/ Published in: JavaScript

sitewide toggle submenus display/hide

Highlighted TextExpand

With a little formatting this will do the trick.

**** There are no usage restrictions on this script.****

Firstly, the JS, to be inserted in the head of your HTML document.

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

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>

then the HTML

NOTE: Your "SwitchMenu" identifier's must be numerically ascending, so when you add additional menus you will need sub3, sub4, sub5, on all your Menus (not subMenus).

then the styles classes, which are formatted for a current project of mine (which is in a presently distressed design state), so they WILL need some editing- this goes in your external CSS file.

.menutitle
{
border: 1px 0px 1px 0px;
border-style: solid;
border-color: #9DA5A0;
color: #CDDEFC;
font-family: Verdana, Geneva, Arial, sans-serif;
font-variant: caps;
letter-spacing: 2px;
font-size: 11px;
padding: 3px 10px 3px 20px;
margin: 2px 0px 0px 0px;
cursor: hand;
}
      
.menutitle:hover
{
background-color: #7A7C7B;
cursor: hand;
}
         
.menutitle2
{
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 11px;
text-decoration: none;
border-width: 0px;
color: #CDDEFC;
}

.menutitle2:hover
{
color: #666;
}

.submenu2
{
background-color: #F8F8F8;
border-width: 0px;
letter-spacing: 1px;
}

.submenu2:hover
{
color: #CDDEFC;
background-color: #E1F7BF;
}

Hope this helps!

URL: http://forum.stylegala.com/viewtopic.php?t=1977&sid=8420ae59d6eed1897b580076a2376f55

Report this snippet Tweet