6 Replies Latest reply on Jul 9, 2012 1:49 PM by graph22

    Spry Menu Bar Customization

    graph22 Level 1

      Hi,

       

      Hope you're well.

       

      As you'll see in the attached screenshot that includes both code and design, I

      customized a spry menu bar so it:

       

      -has a gradient background that I created of a particular size

      -each menu item is a customized height of 62 pixels

       

      However, I wanted the background for each individual menu item (the rectangles

      behind the type "Item 1", "Item 2", etc.) to be the gradient. However, they do not

      appear to be the gradient, but rather a solid grey.

       

      I followed the instructions in an article in Dreamweaver Help called

      "Dreamweaver Help /Working with the Spry Menu Barwidget" to customize

      it to where it is so far. However, I'm not clear on how to make it so each of

      the rectangles behind the menu items are transparent so you see the gradient.

      How do I that?

       

      Also, what is that rectangle in the upper left of the entire spry menu bar?

      How do I remove it? It's not part of my design.

       

      Thanks very much for your help!

       

      Screen Shot 2012-07-06 at 7.11.13 PM.png

        • 1. Re: Spry Menu Bar Customization
          David_Powers Adobe Community Professional (Moderator)

          Styling a Spry menu bar widget requires a strong understanding of CSS. Adding background images in a completely cross-browser way involves creating three background images: one for ordinary menu items, another for items with submenus in their normal state, and the third one for items with submenus when being hovered over.

           

          The basic image goes in this style rule:

           

          ul.MenuBarVertical a

          {

              display: block;

              cursor: pointer;

              background-color: #EEE;

              padding: 0.5em 0.75em;

              color: #333;

              text-decoration: none;

             background-image: url(../images/basic_background.jpg);

              background-repeat: no-repeat;

          }

           

          Items with submenus already have a background image for the arrow pointing to the submenu. Modern browsers allow you to add multiple background images to an element. But multiple images are not supported by IE 8 and earlier, so it's necessary to replace the existing background image with one that incorporates your gradient and the arrow.

           

          Change this:

           

          ul.MenuBarVertical a.MenuBarItemSubmenu

          {

              background-image: url(SpryMenuBarRight.gif);

              background-repeat: no-repeat;

              background-position: 95% 50%;

          }

           

          like this:

           

          ul.MenuBarVertical a.MenuBarItemSubmenu

          {

              background-image: url(../images/gradient_right.jpg);

              background-repeat: no-repeat;

              background-position: 0 0;

          }

           

          Similarly, change this:

           

          ul.MenuBarVertical a.MenuBarItemSubmenuHover

          {

              background-image: url(SpryMenuBarRightHover.gif);

              background-repeat: no-repeat;

              background-position: 95% 50%;

          }

           

          like this:

           

          ul.MenuBarVertical a.MenuBarItemSubmenuHover

          {

              background-image: url(../images/gradient_hover.jpg);

              background-repeat: no-repeat;

              background-position: 0 0;

          }

           

          The turquoise rectangle at the top left of the Spry menu bar is simply a Dreamweaver visual aid indicating that it's a Spry widget. It's not displayed when the menu is view in a browser or in Dreamweaver's Live view.

          • 2. Re: Spry Menu Bar Customization
            graph22 Level 1

            Screen Shot 2012-07-07 at 3.04.42 PM.png

             

            Screen Shot 2012-07-07 at 3.47.28 PM.png

             

            Hi David,

             

            Thanks very much for your response.

             

            Very helpful.

             

            A few things have happened and have

            some follow-up questions since I made
            your changes:

             

            -As you'll see in the 1st attached screenshot, it got it

            very close. However, the rectangles behind the

            items come out farther on the right than the

            rest of the menu bar. How can this be fixed?

             

            -In the process of trying to change the names of

            the items to their real life titles ie Home, About, etc,

            the rectangles below each item name changed to

            white. I've attached a 2nd screenshot so you can see.

            How can I change it back to the gradient?

             

            - Just to clarify, In your changes the background images

            have different file names than the one for my gradient  (ie

            url(../images/gradient_hover.jpg)." I just put my gradient

            file in each time with the same name. Is that ok?

             

            Thanks again!

             

             

            Thanks!

            • 3. Re: Spry Menu Bar Customization
              David_Powers Adobe Community Professional (Moderator)

              Looking at screenshots is no use. Even though you're showing Code view, the HTML is illegible, and there's no way to see the CSS.

               

              Upload your test menu to a website, and provide the URL. It's only by seeing the code in action that anyone can troubleshoot display problems.

              • 5. Re: Spry Menu Bar Customization
                David_Powers Adobe Community Professional (Moderator)

                The width in the following style rule controls the overall width of the menu:

                 

                ul.MenuBarVertical

                {

                margin: 0;

                padding: 0;

                list-style-type: none;

                font-size: 100%;

                cursor: default;

                width: 8em;

                }

                 

                Change the width or delete it.

                 

                The white spaces under the menu items are caused by the height in the following style rule:

                 

                ul.MenuBarVertical li

                {

                margin: 0;

                padding: 0;

                list-style-type: none;

                font-size: 100%;

                position: relative;

                text-align: left;

                cursor: pointer;

                width: 190px;

                white-space: nowrap;

                height: 63px;

                background-color: transparent;

                }

                 

                Remove the height.

                • 6. Re: Spry Menu Bar Customization
                  graph22 Level 1

                  Hi David,

                   

                  Thanks, but those changes aren't doing anything except the deleting of the height

                  for ul.MenuBarVertical li. And the problem with that is that it also deletes the space

                  that white spaces were taking-up so it's not as tall as the 500 px I'd like it to be.

                   

                  Here is the address again so you can see: http://www.misteratm.com

                   

                  To clarify, I don't want to delete the white spaces, just change them to the color with the gradient.

                   

                  And what about the enormous gray box that still surrounds the spry menu bar. All I want there to

                  be is the spry menu bar at a size of 190px x 500px, a left margin of 120 px, top margin of 250 px,

                  and the gradient as the background color.

                   

                  How can I accomplish this? Thanks very much for your help!