5 Replies Latest reply on Jul 23, 2008 5:58 PM by Ben M

    Adding background multiple images to spry menu bar

    timpano
      I am trying to add multiple background images to the spry menu bar I am creating. it either doesn't show up or shows up in sections I didn't select.

      What am I doing wrong or not doing?
        • 1. Re: Adding background multiple images to spry menu bar
          Ben M Adobe Community Professional
          Please provide a link to the page or the source code so that we can see what is going on please.
          • 2. Re: Adding background multiple images to spry menu bar
            timpano Level 1
            Hello,

            This is my document code. I want to add a different background image behind ever section. Is this possible?
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns=" http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Untitled Document</title>
            <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
            <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
            </head>

            <body>
            <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="#">home</a> </li>
            <li><a href="history.html" class="MenuBarItemSubmenu">product</a>
            <ul>
            <li><a href="history.html">history</a></li>
            <li><a href="performance.html">performance</a></li>
            <li><a href="results.html">results</a></li>
            <li><a href="welding_tips.html">welding tips</a></li>
            </ul>
            </li>
            <li><a href="customers.html">customers</a> </li>
            <li><a href="partner.html">partner</a></li>
            <li class="MenuBarItemSubmenuHover"><a href="news.html" class="MenuBarItemSubmenuHover">news</a></li>
            <li><a href="about_us.html">about us</a></li>
            <li><a href="contact_us.html">contact us</a></li>
            </ul>
            <script type="text/javascript">
            <!--
            var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
            //-->
            </script>
            </body>
            </html>
            • 3. Re: Adding background multiple images to spry menu bar
              Ben M Adobe Community Professional
              Now when you say "behind every section" are you saying that you want a different background image depending on the level like the final example on the following page:

              http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html

              Or are you saying that you only want a different images on a certain level?
              • 4. Re: Adding background multiple images to spry menu bar
                timpano Level 1
                Yes, I meant like the final example on the link you provided. Though i want it to be horizontal.
                • 5. Re: Adding background multiple images to spry menu bar
                  Ben M Adobe Community Professional
                  This is from the source code of that page:

                  ul#MenuBar9 li{
                  background-image: url(images/itemgradient-hover.gif);

                  }
                  ul#MenuBar9 li a{
                  color:#FFF;
                  }
                  ul#MenuBar9 li li{
                  background-image: url(images/itemgradient.gif);
                  }

                  ul#MenuBar9 li li a{
                  color:#000;
                  }
                  ul#MenuBar9 li li li{
                  background-image: url(images/itemgradient-hover.gif);
                  }
                  ul#MenuBar9 li li li a{
                  color:#FFF;
                  }
                  ul#MenuBar9 a.MenuBarItemHover, ul#MenuBar9 a.MenuBarItemSubmenuHover, ul#MenuBar9 a.MenuBarSubmenuVisible{
                  color:#33CCFF;
                  }

                  That should go into your SpryMenuBarHorizontal.css file. However, instead of ul#MenuBar9 replace that with ul.MenuBarHorizontal and you will notice some similarity to your CSS document (since some of those exist). First you will notice the ul.MenuBarHorizontal li. This will correspond to the #MenuBar9 li in the above code. So just copy what is between the brackets and put it between the brackets on your document.

                  For the ones that are unique just copy everything (even what is outside the brackets) and replace ul#MenuBar9 with ul.MenuBarHorizontal. A quick find and replace once you paste it into your source document will solve that issue in a hurry.

                  Then the last step is changing the url of the above source code to match the location of your background image. Once that is done your menu is set to go.