8 Replies Latest reply: Jul 26, 2012 1:32 PM by gbergan52 RSS

    Spry Menu Bar 2.0 and positioning of arrows

    gbergan52 Community Member

      Hello again,

       

      I'm now trying to incorporate Spry Menu Bar 2.0 into a client site, using CS6. Two things are occurring: in Live View, for long lines of menu text, the text wraps to a second line (as I would prefer) and the arrows to submenus line up in a readable fashion. But when I view it in IE or Firefox, the text spills outside (off to the right) of the vertical menu container and the submenu arrows are hidden underneath the text. As far as width, I've tried auto and inherit.

       

      So, out of frustration I finally decided I would just shorten my menu text to solve the spilling over problem, and  a set pixel width that accommodated my longest line of text. But still, even if the text just fills the container, the arrow is hidden underneath the text. I'm pulling my hair out trying to figure out how to adjust the positioning of the arrow so that it's off to the far right, as it should be. I assume it is this set of rules that controls the arrow:

       

      }

      .MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{

          background-image:url("images/ArrowMenuRight.gif");

          background-position:right center;

          background-repeat:no-repeat;

      }

      .MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{

          background-image:url("images/ArrowMenuRight.gif");

          background-position:right center;

          background-repeat:no-repeat;

      }

      .MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{

          background-image:url("images/ArrowMenuRight.gif");

          background-position:right center;

          background-repeat:no-repeat;

      }

       

      ...but I don't know how to adjust these to bump the arrow over. Any ideas out there?

       

      Ideally, I'd like to get back to wrapping my menu text as well, and I don't understand why it appears this way in Live View but not in a browser. But I'll settle for the arrow in the correct position as second prize. Thanks for your help,

       

      Gail

        • 1. Re: Spry Menu Bar 2.0 and positioning of arrows
          Scott - Columbus, OH

          Gail,

           

          You may want to check my posting today regarding Spry Menubar 2 horizontal menus.  If you have submenus that are two levels deep, your customers are likely going to have problems with IE 8 and IE 9. 

           

          http://www.gerberanalytics.com/tennis/tennis_header_test.php

           

          As I mentioned in my posting, this is a known problem at Adobe and they do not have a solution for it (other than for us to tell our customers to switch to a different browser).

           

          Regards,

          Scott

          • 2. Re: Spry Menu Bar 2.0 and positioning of arrows
            Ben Pleysier MVP

            @Scott,

             

            When you tell a story, tell the whole story including the fact that the page that you link to is SERIOUSLY FLAWED. I have never seen so many errors on a simple page.

             

            This sends IE into Quirks Mode as in

            _Capture.jpg

             

            Now, I know that the MenuBar does work in IE when installed properly, so whatever others say, be they so-called employees or not, they are wrong.

             

            GRUMPS!!!

            • 3. Re: Spry Menu Bar 2.0 and positioning of arrows
              Ben Pleysier MVP

              @Gail,

               

              Please provide a link to the site so that I can help you.

               

              Gramps

              • 4. Re: Spry Menu Bar 2.0 and positioning of arrows
                Ben Pleysier MVP

                @Gail

                 

                Sorry, I decided to spend a bit more time on your problem and made a couple of changes as per highlighted

                #MenuBar  .MenuItem  .MenuItemLabel {

                    text-align: center;

                    line-height: 1.4em;

                    color: #333333;

                    background-color: #cccccc;

                    padding: 6px 15px 6px 39px;

                    width: 10em; /* set to suit */

                    /*width:auto;*/ /* or delete*/

                    white-space: normal; /* add this line */

                }

                You can see it working here http://pleysier.com.au/SpryMenuBar2/. Try it in IE where Scott seems to have a problem and also try it in a touch screen device.

                 

                Gramps

                • 5. Re: Spry Menu Bar 2.0 and positioning of arrows
                  gbergan52 Community Member

                  Gramps,

                   

                  Thanks for your suggestions, I'll try it tomorrow. I see that now that I'm back at my computer this evening, some of the problems with my arrows seem to have disappeared (a result of clearing browser cookies, perhaps?) on both IE and Firefox. Anyway, the page I've uploaded is http://www.gcssepm.org/index2.html, and whereas earlier today the arrows were hidden underneath the menu text, now they are visible just fine for some reason (I'm embarrassed...I don't know why browsers do this to me!). However, they still are indented quite a bit on the right and I'd like for them to be more right-justified, and I'd also like to force long lines of menu text to wrap to a second line. Is there a way to do this?

                   

                  Thanks for your help as always,

                   

                  Gail

                  • 6. Re: Spry Menu Bar 2.0 and positioning of arrows
                    Ben Pleysier MVP

                    It looks like I did not realise that you are using a vertical menu bar. I have been working on a horizontal bar, hence the example will not work for you.

                     

                    Gramps

                    • 7. Re: Spry Menu Bar 2.0 and positioning of arrows
                      gbergan52 Community Member

                      I'm homing in on a solution regarding my arrow positioning, by messing with the padding settings. Stay tuned and I'll post a link when I think I've got it.

                       

                      Gail

                      • 8. Re: Spry Menu Bar 2.0 and positioning of arrows
                        gbergan52 Community Member

                        OK, here's what I've done. By adjusting the right padding on #MenuBarVertical .MenuItem .MenuItemLabel, AND #MenuBarVertical .SubMenu .MenuItem .MenuItemLabel, I was able to position the right arrows to where I wanted them. I also removed all links from top-level menu items so that the fly-out submenus would appear on a touch screen. You can see the results on my client site: www.gcssepm.org. I must say that this solution was not intuitive; it took a lot of experimentation to figure out which rule to adjust, and menu rules vs. submenu rules seem to operate in the opposite manner as far as padding and arrows go.

                         

                        I do have a similar issue with Scott, in that it takes two or more "taps" to get the submenus to fly out, but at least the arrow is there so the user knows there is a submenu to be had. The only real issue I still have is that for sub-submenus (i.e., third-level), no amount of tapping will get those to display long enough to select them (only an issue on the iPad). I don't know a way around this for the iPad, other than to also eliminate all links from second-level menus that have a third level, and that's more reprogramming than I want to do for today.

                         

                        Final questions regarding the Spry 2.0 widget. Obviously, after I customized the widget, saved it, and imported into my site template, it took some additional tweaking before everything was working properly. Is there a way to export the settings back out to the widget, so that all the tweaking is there? Also, is there a way to save my menu text back to the widget, because it is obviously NOT Home, Entertainment, Music, etc.

                         

                        Thanks for all your help, and I hope someone else benefits from my experiences as well.

                         

                        Gail