5 Replies Latest reply on Apr 3, 2010 6:49 PM by Zabeth69

    spry menu - horizontal - submenu default open

    jsteinmann Level 1

      i want to have a submenu of one tab open by default on one page rather then when you hover over it.  how can i do that?  in the css?

        • 1. Re: spry menu - horizontal - submenu default open
          Zabeth69 Level 5

          Interesting idea...the submenus normally gain and lose class assignments (!) through javascript.


          Take a look through the CSS file associated with the menubar and manually assign the 'open' and 'hover' classes (those aren't the class names...you can figure out what they are) to the ul and li in question. You can identify which ones to apply by looking at your file in action in Live View, and turning Code View on. Then click on a menu so the submenu drops down, and take note of where the classes are applied to make them do that.


          If you manually apply them, the menus should present themselves as if they had been adjusted through the javascript.


          I have not tried this myself; let me know how it works out. It should not actually break anything.



          • 2. Re: spry menu - horizontal - submenu default open
            jsteinmann Level 1

            if someone can actually confirm how to do that in css, that would be appreciated. 

            • 3. Re: spry menu - horizontal - submenu default open
              Zabeth69 Level 5

              Sure, here goes:




              ul.MenuBarHorizontal ul.MenuBarSubmenuVisible


                   left: auto;




              Per this style, add the class of MenuBarSubmenuVisible to the ul tag of the submenu you want to be showing by default.


              One of the best things you can do for yourself, regarding Spry menubars, is to learn to read the style sheet and get familiar with the parts of the menubar, which is, as you see, simply a styled list. The Spry action comes in when the javascript applies and dis-applies various classes to your structure.


              This should be all you need to do. If you are working with sub-submenus, add this class to the sub-sub ul tag:




              ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible


                   left: auto;

                   top: 0;



              It should look familiar; it is the same class you applied earlier!




              • 4. Re: spry menu - horizontal - submenu default open
                jsteinmann Level 1

                i guess i'm just not getting it, and I could get that to work.


                So you have a main tab with a sub menu like this:


                <ul id="MenuBar1" class="MenuBarHorizontal">

                    <li><a class="MenuBarItemSubmenu" href="#" id="nav1">nav1</a>


                        <li><a href="#" id="sub-nav1">sub-nav1</a></li>




                and you want that drop down to stay open without hovering over the main tab, i guess i can't wrap my mind around it.  i have an id on the tab and sub menu list item, so i can identify exactly the submenu i want to have open, and i want to have it meet this condition on only one page, so i will need to add this css to the 1 page within the header so it applies.  i'm hoping i can trick the javascript with just css, but is that hoping for too much? 

                • 5. Re: spry menu - horizontal - submenu default open
                  Zabeth69 Level 5

                  All right. Add a class to the ul you want to be open, as


                  <ul class="open">



                  Then add a style to your stylesheet:



                  ul.MenuBarHorizontal ul.open

                        {left: 0;

                         top: 95%;




                  You should not need to add id's to actual list items (unless you want to specifically change their colors...)


                  By giving the submenu (the ul inside the ul.MenuBarHorizontal) a left:0;, you are pulling it in from left-field, where it had been at -1000em and also dropping it to nearly below (95%) the top menu.


                  You're not tricking the javascript. The javascript will still be working. But the visible submenus will just already be visible instead of hiding and being brought onstage by the javascript. If it's any consolation, the javascript could care less...


                  If you are working with templates, you can give each submenu ul an id, give the body an editable attribute (so you can change the body id for each page) and set up something in the CSS that controls, for instance:


                  <body id="contactuspage">


                  <ul class="MenuBarHorizontal>


                            <ul id="contactus">


                  and in the CSS:


                  #contactuspage ul.MenuBarHorizontal ul#contactus,

                  #aboutuspage ul.MenuBarHorizontal ul#aboutus

                       {left: 0;

                         top: 95%;



                  So all you have to do is make sure you have set the body id (it could be the id of the container for the menubar...not the menubar itself, though) for each page, and the "show submenus" will automatically apply to the  submenus that correspond to the page.




                  I'm not sure that this works in all browsers. I'm getting patchy results...It appears that you will have to play with the "top:95%;" call...Internet Explorer drops the top of the submenu to 95% down the WINDOW/viewport, and not just to the bottom of the top menu item. If you have a set height on the top menu item, give that as the value for top.


                  OK. It looks pretty solid, if you take my comment in the previous paragraph to heart.


                  Have fun with it!