Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Two level menu

  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two level menu

    Hi,

    I've created a two level menu for my webpage as per the code below, and it's not quite working as I had hoped.

    I would like the second level of buttons (submenu) to disappear once the cursor is no longer hovering over them - rather than appearing until another button in the top level is hovered over. Can someone please help me modify the javascript below to do that?

    Thanks in advance.


    Code:
    <HTML>
    
    <HEAD>
    
    <script type="text/javascript">
    var mastertabvar=new Object()
    mastertabvar.baseopacity=0
    mastertabvar.browserdetect=""
    function showsubmenu(masterid, id){
    if (typeof highlighting!="undefined")
    clearInterval(highlighting)
    submenuobject=document.getElementById(id)
    mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
    hidesubmenus(mastertabvar[masterid])
    submenuobject.style.display="block"
    instantset(mastertabvar.baseopacity)
    highlighting=setInterval("gradualfade(submenuobject)",50)
    }
    function hidesubmenus(submenuarray){
    for (var i=0; i<submenuarray.length; i++)
    document.getElementById(submenuarray[i]).style.display="none"
    }
    function hidesubmenu(id){
      document.getElementById(id).style.display="none"
    }
    function instantset(degree){
    if (mastertabvar.browserdetect=="mozilla")
    submenuobject.style.MozOpacity=degree/100
    else if (mastertabvar.browserdetect=="ie")
    submenuobject.filters.alpha.opacity=degree
    }
    function gradualfade(cur2){
    if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
    cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
    else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (typeof highlighting!="undefined") //fading animation over
    clearInterval(highlighting)
    }
    function initalizetab(tabid) {
      mastertabvar[tabid]=new Array()
      var menuitems=document.getElementById(tabid).getElementsByTagName("li")
      for (var i=0; i<menuitems.length; i++){
        if (menuitems[i].getAttribute("rel")){
          menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
          mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
          if (menuitems[i].className=="selected")
            showsubmenu(tabid, menuitems[i].getAttribute("rel"))
            menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
            showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
          }
        }
      }
    }
    </script>
    <style type="text/css">
    .basictab{
    padding: 3px 0;
    margin-left: 0;
    font: bold 12px Arial;
    border-bottom: 0px solid #99CC00;
    list-style-type: none;
    margin-bottom: 1px;
    text-align: right; /*set to left, center, or right to align the menu as desired*/
    }
    .basictab li{
    display: inline;
    margin: 0;
    }
    .basictab li a{
    text-decoration: none;
    padding: 3px 7px;
    margin-right: 0px;
    border: 1px solid gray;
    background-color: #99CC00;
    color: #000000;
    }
    .basictab li a:visited{
    color: #grey;  /*main heading text colour*/
    }
    .basictab li a:hover{
    text-decoration: none;
    background-color: #800000;
    color: white;
    }
    /*
    .basictab li a:active{
    color: #800000;
    }
    .basictab li a.selected { 
    position: relative;
    top: 1px;
    padding-top: 4px;
    background-color: #99CC00;
    color: #800000;
    }
    */
    .submenustyle{
    padding: 3px 0;
    font: 12px Arial;
    border-top-width: 0;
    width: auto;
    text-align: right;
    display: none;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    }
    * html .submenustyle{ /*IE only width definition*/
    width: 100%;
    }
    .submenustyle a{
    border-right: 1px dashed grey;
    padding: 1px 5px;
    text-decoration: none;
    color: #800000;
    }
    .submenustyle a:hover{
    background-color: beige;
    }
    </style>
    
    </HEAD>
    
    <BODY onresize="window.location.href = window.location.href">
    
    <TABLE cellSpacing=1 cellPadding=1 width=960 border=0>
      <TR>
    <TD vAlign=top> 
    <ul id="maintab" class="basictab">
    <li rel="heading_cost"><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A>
    <li rel="heading_time"><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A>
    <li rel="heading_quality"><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quality&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A>
    <li rel="heading_integration"><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;Integration&nbsp;&nbsp;&nbsp;&nbsp;</A></li>
    </ul>
    <div id="heading_cost" class="submenustyle" onmouseout="hidesubmenu(this.id);">
    <a 
    href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_900_DASH"
    >FY Summary</a>
    <a 
    href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_901_DASH"
    >FY Variances</a>
    <a 
    href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_910_DASH"
    >Project Financials</a>
    <a 
    href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_902_DASH"
    >Project Variances</a>
    <a 
    href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_902_DASH"
    >EV Report</a>
    <a 
    href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_902_DASH"
    >Business Plan</a>
    <a 
    href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_902_DASH"
    >Compare Business Plans</a>
    </div>
    <div id="heading_time" class="submenustyle">
    <a 
    href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_907_DASH"
    >Project Milestones</a>
    <a 
    href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_871_DASH"
    >Project Gate Reviews</a>
    </div>
    <div id="heading_quality" class="submenustyle">
    <A href="#">Reporting Quality</A>
    <A href="#">Forecast Quality</A>
    </div>
    <div id="heading_integration" class="submenustyle">
    <a 
    href="http://enapsom1.transdom.electranet.private:50200/logon/logonServlet?redirectURL=%2F%2Fen-adlpap-02.transdom.electranet.private:8000%2Fsap%2Fbw%2FBEx%3Fsap-language=EN%26bsplanguage=EN%26CMD=LDOC%26TEMPLATE_ID=PS_P_C05_950_DASH"
    >Project Snapshot</a>
    </div>
    <script type="text/javascript">
    //initialize tab menu, by passing in ID of UL
    initalizetab("maintab")
    </script>
    
    </TD>
    
    </TR>
    
    </TABLE>
    Last edited by petho; 06-25-2009 at 12:27 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Relying completely on javascript is not a good idea, since it may cause accessibility issues for those who have no javascript support. I'd recommed a CSS based one instead. Take a look at http://htmldog.com/articles/suckerfish/dropdowns/

    PS: please edit your above post and add [CODE][/CODE] tags around your code.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I agree - some users have accessibility issues. However, I'm not really sure how to use the CSS method. Are you able to assist? Or otherwise, since the javascript option is sooo close to working, is it just best that I try and fix that?

    Cheers.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    However, I'm not really sure how to use the CSS method. Are you able to assist?
    Have you checked that link and examples there?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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