Skip navigation
St3ph3n31
St3ph3n31 Calculating status...
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>

770 Views   4 Replies   Latest reply: Ben Pleysier, Apr 17, 2012 7:32 PM
 
Replies
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    1. Sudarshan Thiagarajan,
    Apr 15, 2012 10:16 PM   in reply to St3ph3n31
    Report

    *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:
  • Ben Pleysier
    Currently Being Moderated
    2. Ben Pleysier,
    Apr 16, 2012 9:10 AM   in reply to St3ph3n31
    Report

    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:
  • St3ph3n31
    Currently Being Moderated
    3. St3ph3n31,
    Apr 17, 2012 7:05 PM   in reply to Ben Pleysier
    Report

    Thank you here is the link

     

    http://www.get-wet-dry.co.uk/

     

    Site not complete as you'll see ! I would like to have the tab highlighted with  lighter button png . I tried the js in the top of the header but it surrounds the whole button with a square box that is too big and I couldn't  resize it ! I tried replacing the color with the img but nothing happened ! I

     

    I don't use any templates .. Bad practise I guess !

     

    many thanks

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    4. Ben Pleysier,
    Apr 17, 2012 7:32 PM   in reply to St3ph3n31
    Report

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

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