Javascript menus

[sunnny]

Hi,

I have a menu in Javascript made out of lists and css. Basically the menu is hidden using css and then javascript is used to show the menus, I am also changing the background-color of the links in the lists when I hover over a link using css a:hover{background-color:00FF00}. What I want to do is,that, when a link is clicked the menu drops down(I got this far) and the background color of the link remains changed to the hover color. Also is there a way to keep the link that color and the submenu open when the user returns to this page, for example if someone goes to another page and returns to the page with the submenu, the submenu should stay open. Maybe I can do this using cookies or something like this. I really need help on this feature on my menu. Any help will be highly appreciated.

Thanks,
Sunny

[JAB Creations]

Hey Sunny, you can do drop down menus without JavaScript.

Regardless when you set CSS for hyperlinks you should have four attributes and in this exact order...

<style type="text/css">
a:link {
background-color: #abc;
color: #cba;
}
a:visited {
background-color: #abc;
color: #cba;
}
a:hover {
background-color: #abc;
color: #cba;
}
a:active {
background-color: #abc;
color: #cba;
}</style>

Furthormore you can use CSS selectors to specify specific parts of your HTML to have differing CSS. For example...

<style type="text/css">
div.toast div {
background-color: #f0f;
}
</style>
<div class="toast">
<p>hello</p>
<div><p>hello again!</p></div>

First you specify the first class, such as toast. Then you can specify for example that all divs (inside of the div.toast) can have these attributes. You can still set the attributes for all divs (besides those inside of div.toast still without effecting the divs inside div.toast.

Some random examples of selectors

<style type="text/css">
div.toast a{}
div.menu ol li {}
table div{}
li:hover a.blank {}
</style>

[Bernard Marx]

CSS menus are very nice, but they don't stay open after the mouse has left, so I don't think they're going to meet his requirements.

[JAB Creations]

Keeping a submenu item open cross page? That will probally take a cookie or maybe a session? Yeah didn't catch that part. You could just highlight the main and submenus to mark where the person is.

[sunnny]

Hi JabCreations,

Thanks for you reply, I have the following code, could you please look through it and tell me how can I have the menu link change color when it is clicked and stay that color even when you mouse out, the menu stays open and the link stays that color until you click on another menu. The javascript is used to show and hide the menu, also I want some menthod of having the menu stay open if a sublink is clicked or the user returns to this page using the browsers back button

Code---------------------------------------

<script type="text/javascript" language="javascript">
function togSub(link) { 
var smenus = document.getElementsByTagName("ul"); 
for (i=0; i<smenus.length; i++){
if(smenus[i].className == 'Item'){
if (smenus[i].style.display == 'block'){
smenus[i].style.display='none';
} 
}
}
 
var subList = link.parentNode.getElementsByTagName('ul')[0].style; 
link.style.backgroundColor = '#E8E8E8';
link.style.color = '#003366';
subList.display = (!subList.display )? 'block' : ''; 
}
</script>
<style type="text/css">
.nscript{}
.pversion{font-size:80%;}
#lnav{font-size:100%;}
#leftmenu{
width:132px;
margin:0;
background-image: url(/images/sdc-dsc/intracom/left_menu2.gif);
border-right: 2.0px outset #A7BFD7;
border-bottom: 2.0px outset #A7BFD7;
border-left: 1.0px outset #A7BFD7;
border-top: 1.0px outset #A7BFD7;
background-repeat:repeat-y;
background-color:#ADC4DB;
}
li.Main ul { 
display: none;
 }
li.Main{
list-style-type:none;
list-style-image:none;
 }
ul.Item{
list-style-type:none;
border-style:groove;
border-width:1px;
border-right:none;
border-left:none;
border-color:#330066;
background-color:#FAFAFA;
margin-left:0;
 }
a.mlinks:link,a.mlinks:visited{
 font-size :80%; 
 font-family:Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color: #FFFFFF; 
 text-decoration:none; 
 width:100%;height:100%; 
 cursor:pointer;
 display:block;
 padding-left:.5em;
 padding-top:.2em;
 padding-bottom:.2em;
 border-style:solid;
 border-width:1px;
 border-right:none;
 border-bottom:none;
 border-left:none;
 border-color:#FFFFFF;
}
a.slinks:link,a.slinks:visited{
 font-weight:lighter;
 font-family:Arial, Helvetica, sans-serif; 
 font-size:75%;
 color:#333399;
 width:100%;height:100%; 
 cursor:pointer; 
 text-decoration:none;
 display:block;
 padding-top:.2em;
 padding-bottom:.2em;
 padding-left:1.0em;
}
/*a{display:block;width:100%;text-decoration:none;line-height:1.5em;}*/
.Menu{margin-left:0;padding:0;} 
.Menu a{text-decoration:none;}
.Main a:hover{
 color:#003366;
 width:100%;
 height:100%;
 background-color:#E8E8E8; 
}
.rule{
 margin-left:3.5px;
 width:110px; 
 }
</style>
<!-- ***************************** -->
<div id="leftmenu">
<ul class="Menu"> 
<li class="Main" ><a style="border-top:none;" href="#" class="mlinks">Main Item One</a></li>
<li class="Main"><a href="#" onclick="togSub(this); return false;" class="mlinks">Main Item Two</a> 
<ul class="Item"> 
<li><a href="#" class="slinks">Sub Item One</a></li> 
<li><a href="#" class="slinks">Sub Item Two</a></li> 
<li><a href="#" class="slinks">Sub Item Three</a></li> 
</ul> 
</li> 
<li class="Main"><a href="#" class="mlinks">Item Three</a></li>
<li class="Main"><a href="#" onclick="togSub(this); return false;" class="mlinks">Item Four</a>
<ul class="Item"> 
<li><a href="#" class="slinks">Item One </a></li>
<li><a href="#" class="slinks">Item Two</a></li>
</ul>
</li>
<li class="Main"><a href="#" onclick="togSub(this); return false;" class="mlinks">Item Four</a>
<ul class="Item"> 
<li><a href="#" class="slinks">Item One</a></li> 
<li><a href="#" class="slinks">Item Two</a></li> 
<li><a href="#" class="slinks">Item Three</a></li>
</ul> 
</li> 
</ul>
</div>

I am sorry if the code is too long but you can cut and paste this in a file and the menu should work.

Thanks!
Sunny