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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dynamic menu help...

    Hi,

    I have a dynamic menu that is from a HALO menu in Dreamweaver MX.

    see: http://www.adobe.com/devnet/dreamwea...ting_halo.html

    It works fine. but I need to make it so the glink (Global Link) link stays in the HOVER state until the function closesubnav is called. I am stumped. Any ideas? Right now when one rolls over a globalLink it opens a subglobalLink div when one rolls over the subglobalLink links the globalLink changes back to the A color. I need to keep the globalLink on the HOVER state.

    thanks,

    Paul

    Here is the code:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Dynamic Menu </title>

    <style type="text/css">
    body {
    font: 10pt Verdana, sans-serif;
    background-color: #8181C3;
    background-repeat: repeat-x;
    margin: 0px;
    padding: 0px;
    color: #333333;
    }

    /************* globalNav styles ****************/


    #globalLink1{
    position: absolute;
    top: 50px;
    left: 240px;
    height: 50px;
    width: 150px;
    background-image: url(images/navbar_bkg.jpg);
    padding: 0px;
    margin: 0px;
    }

    #globalLink1:hover{
    background-image:url(images/nav_services-o.jpg);
    color:#660000;
    }

    #globalLink2{
    position: absolute;
    top: 50px;
    left: 390px;
    height: 50px;
    width: 150px;
    background-image: url(images/nav_portfolio.jpg);
    padding: 0px;
    margin: 0px;
    }

    #globalLink2:hover{
    background-image: url(images/nav_portfolio-o.jpg);
    }

    #globalLink3{
    position: absolute;
    top: 50px;
    left: 540px;
    height: 50px;
    width: 150px;
    background-image: url(images/nav_clients.jpg);
    padding: 0px;
    margin: 0px;
    }

    #globalLink3:hover{
    background-image: url(images/nav_clients-o.jpg);
    }

    #globalLink4{
    position: absolute;
    top: 50px;
    left: 690px;
    height: 50px;
    width: 150px;
    background-image: url(images/nav_about.jpg);
    padding: 0px;
    margin: 0px;
    }

    #globalLink4:hover{
    background-image: url(images/nav_about-o.jpg);
    }

    #globalLink5{
    position: absolute;
    top: 50px;
    left: 840px;
    height: 50px;
    width: 150px;
    background-image: url(images/nav_contact.jpg);
    padding: 0px;
    margin: 0px;
    }

    #globalLink5:hover{
    background-image: url(images/nav_contact-o.jpg);
    }


    a.glink, a.glink:visited{
    font-size: 11px;
    color:#FFFFFF;
    position: absolute;
    top: 0px;
    width: 135px;
    height: 50px;
    text-align: right;
    text-decoration: none;
    margin: 0px;
    line-height: 85px;
    }

    a.glink:hover{
    text-decoration: none;
    color:#660000;
    }

    .skipLinks {display: none;}

    /************ subglobalNav styles **************/

    .subglobalNav{
    position: absolute;
    top: 100px;
    left: 275px;
    width: 700px;
    height: 20px;
    padding: 0px;
    color:#660000;
    visibility: hidden;
    }

    .subglobalNav a:link, .subglobalNav a:visited {
    font-size: 80%;
    color:#660000;
    text-aline:center;
    }

    .subglobalNav a:hover{
    color:#333333;
    background-image:url(images/images/sublogo.gif)}
    .skipLinks {display: none;}

    #subglobal4{
    margin-left: 175px;
    }


    </style>
    <!--[if lt IE 7]><![endif]-->
    <script type="text/javascript">
    <!--
    var time = 3000;
    var numofitems = 5;

    //menu constructor
    function menu(allitems,thisitem,startstate){
    callname= "gl"+thisitem;
    divname="subglobal"+thisitem;
    this.numberofmenuitems = allitems;
    this.caller = document.getElementById(callname);
    this.thediv = document.getElementById(divname);
    this.thediv.style.visibility = startstate;
    }

    //menu methods
    function ehandler(event,theobj){
    for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
    }
    theobj.thediv.style.visibility="visible";
    }

    function closesubnav(event){
    if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
    var shutdiv =eval('menuitem'+i+'.thediv');
    shutdiv.style.visibility='hidden';
    }
    }
    }
    // -->
    </script>

    </head>

    <body>
    <div id= "container">
    <div id="globalLink1">
    <a href="services.html" id="gl1" class="glink" onMouseOver="ehandler(event,menuitem1);">SERVICES</a>
    </div>
    <div id="globalLink2">
    <a href="portfolio.html" id="gl2" class="glink" onMouseOver="ehandler(event,menuitem2);">PORTFOLIO</a>
    </div>
    <div id="globalLink3">
    <a href="clients.html" id="gl3" class="glink" onMouseOver="ehandler(event,menuitem3);">CLIENTS</a>
    </div>
    <div id="globalLink4">
    <a href="about.html" id="gl4" class="glink" onMouseOver="ehandler(event,menuitem4);">ABOUT </a> </div>
    <div id="globalLink5">
    <a href="contact.html" id="gl5" class="glink" onMouseOver="ehandler(event,menuitem5);">CONTACT</a> </div>
    <!--end globalLinks-->

    <div id="subglobal1" class="subglobalNav">
    <a href="cabinetry.html">Cabinetry</a> | <a href="construction.html">Construction</a><a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div>
    <div id="subglobal2" class="subglobalNav">
    <a href="featured.html">Featured Project</a> | <a href="kitchens.html">Kitchens</a> | <a href="baths.html">Baths</a> | <a href="livingareas.html">Living Areas</a> | <a href="commercial.html">Commercial Spaces</a><a href="#"></a><a href="#"></a><a href="#"></a> </div>
    <div id="subglobal3" class="subglobalNav">
    <div align="center"><a href="#"></a> <a href="#"></a> <a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a> </div>
    </div>
    <div id="subglobal4" class="subglobalNav">
    <div align="center"><a href="history.html">History</a> | <a href="people.html">People</a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a> </div>
    </div>
    <div id="subglobal5" class="subglobalNav">
    <div align="right"><a href="inquiry.html">inquiry</a> | <a href="dirctions.html">directions</a><a href="#"></a><a href="#"></a><a href="#"></a> <a href="#"></a><a href="#"></a> </div>
    </div>
    <div id="subglobal6" class="subglobalNav">
    <a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a> </div>
    <div id="subglobal7" class="subglobalNav">
    <a href="#"></a><a href="#"></a><a href="#"></a> <a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a> </div>

    </div>

    <script type="text/javascript">
    <!--
    var menuitem1 = new menu(7,1,"hidden");
    var menuitem2 = new menu(7,2,"hidden");
    var menuitem3 = new menu(7,3,"hidden");
    var menuitem4 = new menu(7,4,"hidden");
    var menuitem5 = new menu(7,5,"hidden");
    var menuitem6 = new menu(7,6,"hidden");
    var menuitem7 = new menu(7,7,"hidden");
    // -->
    </script>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi pelicanPaul,

    Try this:
    Code:
    //menu constructor
    function menu(allitems,thisitem,startstate)
    {
      callname= "gl"+thisitem;
      divname="subglobal"+thisitem;
      this.numberofmenuitems = allitems;
      this.caller = document.getElementById(callname);
      this.thediv = document.getElementById(divname);
      this.thediv.style.visibility = startstate;
      this.item = thisitem;
    }
    
    //menu methods
    function ehandler(event,theobj)
    {
      var e;
      for (var i=1; i<= theobj.numberofmenuitems; i++) {
        var shutdiv = window["menuitem" + i].thediv; //eval( "menuitem"+i+".thediv");
        shutdiv.style.visibility="hidden";
        e = document.getElementById('gl' + i);
        if (e) e.className = 'glink'; // default glink class
      }
      theobj.thediv.style.visibility="visible";
      e = document.getElementById('gl' + theobj.item);
      if (e) e.className = 'glinkActive'; // active glink class
    }
    For a quick test I also added this:
    Code:
    a.glinkActive:hover{
    text-decoration: none;
    color:#660000;
    }
    
    a.glinkActive, a.glinkActive:visited{
    font-size: 11px;
    color:#FFFFFF;
    position: absolute;
    top: 0px;
    width: 135px;
    height: 50px;
    text-align: right;
    text-decoration: none;
    margin: 0px;
    line-height: 85px;
    background: blue;
    }

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    it is just the HOVER

    thanks... but what is wanted is when the person rolls over the gllink it changes color into the Hover state until one rolls to a new glink... not sur if this is possible... a HOVER state is a HOVER state. It needs to be tricked into thinking it is still in the HOVER state... thanks..

    a.glink, a.glink:visited{
    font-size: 11px;
    color:#FFFFFF;
    position: absolute;
    top: 0px;
    width: 135px;
    height: 50px;
    text-align: right;
    text-decoration: none;
    margin: 0px;
    line-height: 85px;
    }

    a.glink:hover{
    text-decoration: none;
    color:#660000;
    }

  • #4
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    as in the A style...

    <a href="services.html" id="gl1" class="glink" onMouseOver="ehandler(event,menuitem1);this.style.color='#660000'">SERVICES</a>

    outside the function but then it has no way of knoing when to go back to the regular A #FFF color..

    Paul

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You said:
    I need to keep the globalLink on the HOVER state.
    and that's what I showed you how to do. I may not have provided the exact css for glinkActive that you need - but you can do that

  • #6
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks...

    got it...


  •  

    Posting Permissions

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