Jump to content

Collapse Menu


hoachen
 Share

Recommended Posts

I am trying to make the menu highlighted. The menu have is main_menu and submenu, when the user click on the main_menu it highlight or change color light hover that will change the color, then the user click on submenu it will open a new self page and the submenu just click will highlight as well. When the user click on other main_menu and submenu the previous menu will back to normal. I don't know how to implement on the below code. Will anyone can show me how to accomplish this? A bunch of thanks in advance!if (document.getElementById) { document.writeln('<style type="text/css"><!--') document.writeln('.main {text-decoration:none; color:black; cursor:hand; cursor:pointer; padding-top:5px;}') document.writeln('span:hover.mainLink {text-decoration:none; color:red}') document.writeln('.links {display:none; padding-left:18px; font-size:13px; font-family: Arial, Helvetica, sans-serif;}') document.writeln('.link {text-decoration:none; color:black;font-size:13px;font-family: Arial, Helvetica, sans-serif;}') document.writeln('a:hover.link {text-decoration: underline; color: red}') document.writeln('//--></style>') }function openClose(theID) { if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none"; document.getElementById("tick_"+theID).innerHTML = "+"; } else { document.getElementById(theID).style.display = "block"; document.getElementById("tick_"+theID).innerHTML = "-"; } }// --></script>HTML HERE <div onClick="openClose('a2')" class="main"><span id="tick_a2">+</span> <span class="mainLink"> Employees</span></div> <div id="a2" class="links"> <a href="http://www.sivamdesign.com/scripts/" class="link">Jobs Available</a><br /> <a href="http://javascript.internet.com/" class="link">How to Apply for Temp Jobs</a><br /> </div>

Link to comment
Share on other sites

Hi, in your function you could just add the lines for the backgrounds as you already use it for change some style propertiesfunction openClose(theID){if (document.getElementById(theID).style.display == "block") {document.getElementById(theID).style.display = "none";document.getElementById("tick_"+theID).innerHTML = "+";document.getElementById(theID).className = "bgred"; }else {document.getElementById(theID).style.display = "block";document.getElementById("tick_"+theID).innerHTML = "-"; document.getElementById(theID).className = "bggreen";}}and in your css put.bgred{background-color: #FF0000;}.bggreen{background-color: #00FF00;}this is a pointer, i really, really believe this doesn't work as it is, but i hope this helps

Edited by alexnofue
Link to comment
Share on other sites

thank you very much for taking time to look at my problem. I tried the script but it highlight the entire submenu instead of after clicking on the submenu link. Also, after click on the submenu link the submenu collapse. Is there a way to keep it open until the user click off the current main or submenu?Thanks again Cheer!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...