Results 1 to 2 of 2

Thread: how to create a curent behavior for a menu?

  1. #1
    Join Date
    Dec 2006
    Thanked 0 Times in 0 Posts

    Default how to create a curent behavior for a menu?


    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:

    <title>Switch Menu</title>
    <style type="text/css">
    .menuOut {cursorointer; margin:7px; background-color:#0099cc; color:#000000; width:140px; border:1px solid #000000; padding:2px; text-align:center; font-weight:bold;}
    .menuOver {cursorointer; 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-styleblique; font-weight:bold;}

    <script type="text/javascript">
    Script made by Martial Boissonneault 2001-2003
    This script may be used and changed freely as long as this msg is intact
    Visit for more free scripts and tutorials.
    function SwitchMenu(obj){
    var el = document.getElementById(obj);
    var ar = document.getElementById("cont").getElementsByTagName("DIV");
    if( == "none"){
    for (var i=0; i<ar.length; i++){
    ar[i].style.display = "none";
    } = "block";
    }else{ = "none";
    function ChangeClass(menu, newClass) {
    if (document.getElementById) {
    document.getElementById(menu).className = newClass;
    document.onselectstart = new Function("return false");
    <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>

    <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>

    <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>

    <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>

    <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>


  2. #2
    Join Date
    Nov 2006
    Thanked 0 Times in 0 Posts


    Hi Did you ever get this working?.. I'm looking to create this kind of current behaviour myself..




Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts