1 Reply Latest reply: Sep 13, 2010 8:15 AM by Ben Pleysier RSS

    Change background image or color for specific page

    thersher Community Member

      I want my Spry menu to display a specific color for an item, when

      the visitor is on that page only. For example, when a visitor clicks on a menu item to go to another page, while they are on that specific page, the background color of the menu item for that page would be a different color than the background colors of the other menu items. Can this be done and if so, how? I just can't seem to figure this out. Thank you!

        • 1. Re: Change background image or color for specific page
          Ben Pleysier CommunityMVP

          Have a look and play with the following markup

          <!DOCTYPE html>
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Untitled Document</title>
          <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" />
          <script src="SpryAssets/SpryMenuBar.js"></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>
           
          <style>
          .activeMenuItem {
              font-weight: bold;
          }
          </style>
          </head>
          <body>
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="products.html">Our Products</a></li>
            <li><a href="contact.html">Contact Us</a></li>
          </ul>
          <script>
          var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
          </script>
          </body>
          </html>