PDA

View Full Version : how to create a curent behavior for a menu?



cleo
12-22-2006, 05:25 AM
Hi,

I use this menu (you can see the code below) and I want to create a menuSelected behavior(a specific color for a menu item when visitor read the page linked with that item). Could you help me?
Please see the code:

<html>
<head>
<title>Switch Menu</title>
<style type="text/css">
.menuOut {cursor:pointer; margin:7px; background-color:#0099cc; color:#000000; width:140px; border:1px solid #000000; padding:2px; text-align:center; font-weight:bold;}
.menuOver {cursor:pointer; margin:7px; background-color:#000000; color:#0099cc; width:140px; border:1px solid #0099cc; padding:2px; text-align:center; font-weight:bold;}
.submenu {width:170px; font-family:Verdana; font-size:12px; padding-left:25px;}
.submenu a {color:#336699; text-decoration:none; font-weight:bold;}
.submenu a:hover {color:#ff0000; text-decoration:none; font-style:oblique; font-weight:bold;}

</style>
<script type="text/javascript">
/*
Script made by Martial Boissonneault 2001-2003 http://getElementById.com/
This script may be used and changed freely as long as this msg is intact
Visit http://getElementById.com/ for more free scripts and tutorials.
*/
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("cont").getElementsByTagName("DIV");
if(el.style.display == "none"){
for (var i=0; i<ar.length; i++){
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function ChangeClass(menu, newClass) {
if (document.getElementById) {
document.getElementById(menu).className = newClass;
}
}
document.onselectstart = new Function("return false");
</script>
</head>
<body>
<div id="cont">
<p id="menu1" class="menuOut" onClick="SwitchMenu('sub1')" onMouseOver="ChangeClass('menu1','menuOver')" onMouseOut="ChangeClass('menu1','menuOut')">Codes Samples</p>
<div class="submenu" id="sub1" style="display:none;">
• <a href="index1.html" title="Scrolling Text" target="_parent">Scrolling Text</a><br/>
• <a href="#" title="Static Ticker">Static Ticker</a><br/>
• <a href="#" title="Zoom Intro">Zoom Intro</a>
</div>

<p id="menu2" class="menuOut" onClick="SwitchMenu('sub2')" onMouseOver="ChangeClass('menu2','menuOver')" onMouseOut="ChangeClass('menu2','menuOut')">Tutorials</p>
<div class="submenu" id="sub2" style="display:none;">
• <a href="#" title="InnerHTML">InnerHTML</a><br/>
• <a href="#" title="Document Size">Document Size</a>
</div>

<p id="menu3" class="menuOut" onClick="SwitchMenu('sub3')" onMouseOver="ChangeClass('menu3','menuOver')" onMouseOut="ChangeClass('menu3','menuOut')">Help Forum</p>
<div class="submenu" id="sub3" style="display:none;">
• <a href="#" title="Javascript">Javascript</a><br/>
• <a href="#" title="DHTML">DHTML</a><br/>
• <a href="#" title="Off-topic">Off-topic</a>
</div>

<p id="menu4" class="menuOut" onClick="SwitchMenu('sub4')" onMouseOver="ChangeClass('menu4','menuOver')" onMouseOut="ChangeClass('menu4','menuOut')">Cool Links</p>
<div class="submenu" id="sub4" style="display:none;">
• <a href="#" title="Google">Google</a><br/>
• <a href="#" title="Altavista">Altavista</a><br/>
• <a href="#" title="Yahoo">Yahoo</a><br/>
• <a href="#" title="Lycos">Lycos</a>
</div>

<p id="menu5" class="menuOut" onClick="SwitchMenu('sub5')" onMouseOver="ChangeClass('menu5','menuOver')" onMouseOut="ChangeClass('menu5','menuOut')">Contact Us</p>
<div class="submenu" id="sub5" style="display:none;">
• <a href="#" title="Email">Email</a><br/>
• <a href="#" title="Location">Location</a>
</div>
</div>

</body>
</html>

jolly_jonesy
05-18-2007, 11:59 AM
Hi Did you ever get this working?.. I'm looking to create this kind of current behaviour myself..

Cheers

steve