Skip navigation
St3ph3n31
Currently Being Moderated

how do I get spry menu tab  highlighted when on page ???

Apr 15, 2012 8:26 PM

Tags: #cs5 #html #dreamweaver #javascript

Hey guys I'm stuck

 

I'm  trying to get  the tab in the spry menubar to be highlighted  when each relevant page  .. but something isn't right it's not working what am I missing here ???

now when I hover the btn disappears  and when on the  page the tab isn't highlighted ? Please help ! many thanks in advance for taking the time to look

 

 

 

I have placed  this code at the  bottom of   sprymenuhorizontal.css to over ride above styles !

 

 

ul.MenuBarHorizontal a span {

    visibility: hidden; 

}

ul.MenuBarHorizontal  {

    background: url(images/btn.png) no-repeat;

    height: 35px;

}

ul.MenuBarHorizontal :hover, ul.MenuBarHorizontal :focus,

ul.MenuBarHorizontal .MenuBarItemHover, ul.MenuBarHorizontal .MenuBarItemSubmenuHover, ul.MenuBarHorizontal .MenuBarSubmenuVisible {

    background: url(images/btnhover.png) no-repeat;

}

ul.MenuBarHorizontal li.activeMenuItem  {

    background: url(images/btnonpage.png) no-repeat !important;

}

 

 

 

 

 

 


then I put in this code  at the top of the page   to link to sprydomutils which is in my spryassest folder!

 

 

 

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

 

 

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

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">

<style>

ul.MenuBarHorizontal a span {

    visibility: hidden;  

}

ul.MenuBarHorizontal  {

    background: url(images/btn.png) no-repeat;

    height: 35px;

}

ul.MenuBarHorizontal :hover, ul.MenuBarHorizontal :focus,

ul.MenuBarHorizontal .MenuBarItemHover, ul.MenuBarHorizontal .MenuBarItemSubmenuHover, ul.MenuBarHorizontal .MenuBarSubmenuVisible {

    background: url(images/btnhover.png) no-repeat;

}

ul.MenuBarHorizontal li.activeMenuItem  {

    background: url(images/btnonpage.png) no-repeat !important;

}

</style>

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 15, 2012 10:16 PM   in reply to St3ph3n31

    *BUMP*.

     

    Visit this thread: http://forums.adobe.com/thread/604922 - Your question has been answered here - somewhere towards the middle of the page.

     

    You could also visit this beautiful website to see it in action: http://www.ritafischer.com.br/ - Another article written by Freddy explains how this can be accomplished - http://cookbooks.adobe.com/post_Highlighting_an_active_menu_item_using _the_Spry_me-16769.html

     

    Message was edited by: Sudarshan Thiagarajan to add example

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 16, 2012 9:10 AM   in reply to St3ph3n31

    Could you please supply a link to your site so that we can have a look at the coding.

     

    Also, do you use a template system like DWT or SSI?

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 7:32 PM   in reply to St3ph3n31

    The reason I asked if you used templates or not is that in this case we would have a centralised script to detect the active menu item.

     

    If you have a menu on each page (without the template) then it is easy to mark the menu item as being the current one by simply adding a class as follows

    <li class="activeMenuItem"><a href="index.php">Home</a></li>

    Now we merely add a few rules to style the active menu item as in

    .activeMenuItem a {

        background: #a59a84 url(nav_background.png) !important;

        color: #ffffff !important;

    }

    The !important is necessary otherwise the JS will override these values.

     

    Add the style rules to the bottom of SpryMenuBarHorizontal.css and add the class to each relevant menu item in each document.

     

    Which brings me to the fact that you have used a horizontal menu bar for vertical positioning. Why? I must admit, the effect is not bad and that is more important.

     

    Gramps

     
    |
    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