4 Replies Latest reply: Apr 17, 2012 7:32 PM by Ben Pleysier RSS

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

    St3ph3n31 Community Member

      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>