Skip navigation
Currently Being Moderated

Changing active state of spry menu

Apr 7, 2012 2:17 PM

So, I'm a newbie in the world of development (I'm a designer, not a coder) and a student who has a web project due in 2 days. I can't figure out how to get the active page's menu button to be a different color than the rest of the menu bar. I've successfully changed the rollover states and background colors, but the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus doesn't change the active state like I thought I would. Please help!

 
Replies
  • Currently Being Moderated
    Apr 7, 2012 2:23 PM   in reply to engravedbeauty2578

    Persistent Page Indicator on Menus

    http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

     

     

     

    ()__()

    (='.'=)

    (")_(")

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 7, 2012 7:44 PM   in reply to engravedbeauty2578

    Nancy'e solution is a really good and solid way to show the current menu item and if I did not have another way of doing the same, I would most certainly use Nancy's solution.

     

    So, here is the solution that I use.

    the JS

    <script src="SpryAssets/SpryDOMUtils.js"></script>

    <script>

    function InitPage(){

    Spry.$$('#MenuBar1 li').forEach(function(node){

        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]

        if(a.href == window.location){

            Spry.Utils.addClassName(node,"activeMenuItem");

        }

    });

    }

    Spry.Utils.addLoadListener(InitPage);

    </script>

    and the CSS

    <style>

    .activeMenuItem a {

        background: yellow !important;

        color: red !important;

        text-decoration: underline;

    }

    </style>

    The difference between the two solutions is in the way the the current menu item is identified. In Nancy's solution each body and each menu item tag needs to have a class attached to it. In my solution the identification is made by comparing the URL of the page with the menu item link, thus no extra markup is needed.

     

    Both of the above solutions assume that you are using a template system such as DWT or SSI.

     

    If you are not using a template system and are repeating the menu structure on each page, you are better off ignoring both of the above and merely adding the activeMenuItem class to the corresponding menu item as in

    <li class="activeMenuItem"><a href="about.html">ABOUT US</a></li>

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 7:59 AM   in reply to engravedbeauty2578

    I have just come upon the SAME ISSUE; also a designer and not a coder. did you ever solve this one? I was doing the exact same thing as you were, per instructions on the help.adobe.com site ...  Does not work.(!)

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 8:54 AM   in reply to PKTstudio

    What doesn't work?  What have you tried?  Please post a link to your problem page and explain what you expect to happen that isn't.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 11:17 AM   in reply to Nancy O.

    I was referring to the original post; sorry i'm kind of a novice at this forum.  I have my spry menu on the template, from which i've created all the other pages on the website.

    Per the original post, engravedbeauty2578 posted:

     

    "..I can't figure out how to get the active page's menu button to be a different color than the rest of the menu bar. I've successfully changed the rollover states and background colors, but the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus doesn't change the active state like I thought I would...."

     

    I also have blue type in the menu bar when the pages first load. I have successfully changed the "hover" color to red, but once the new page becomes active, its tab color reverts back to blue. So i specified the "a:focus" color to red but nothing happened.  I was assuming that "focus" referred to the active page's tab.  I probably assumed wrong, right?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 2:03 PM   in reply to PKTstudio

    a:hover = on mouse over.

    a:active = on click.

    a:focus = when tab key is on the menu item.

     

    To create a "you are here" state on your site-wide menus, see persistent menu highlighting:

    http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 5:10 PM   in reply to Nancy O.

    Nancy, thanks for the link re: persistent-page-indicator; i've read it and headed over to the Dreamweaver help PDF on "editable tag attributes in a template".  It will take me some time but I think i should be able to solve it. Appreciate your help!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points