6 Replies Latest reply: Apr 27, 2012 12:55 PM by dawnnolan54 RSS

    is it possible to have 2 different vertical spry menus on the same page

    dawnnolan54 Community Member

      is it possible to have 2 different vertical spry menus on the same page?

        • 1. Re: is it possible to have 2 different vertical spry menus on the same page
          sudarshan.t MVP

          Definitely Yes. Just make sure that you assign unique IDs to the menus when you insert them. Something like this:

           

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

          <ul id="MenuBar2" class="MenuBarVertical">

           

          You could use the default styles in your CSS i.e. ul.MenuBarVertical for the properties that will be shared by both the menus.

          For creating unique and custom styles for both menus, you could includ the ID along with the styleselector tag in your CSS - something like this:

           

          ul#MenuBar1.MenuBarVertical

          ul#MenuBar2.MenuBarVertical

           

           

          The CSS rules containing an ID in the style selector name will override ALL other styles because they are more specific as they apply to a more targeted set of HTML tags.

           

          Trust this helps.

          • 2. Re: is it possible to have 2 different vertical spry menus on the same page
            dawnnolan54 Community Member

            Ok, I'm still a little confused.  I am fairly new to dreamweaver.  Even though I assign a unique id to the menu bar, I am still only getting the one in my css styles.  So would I have to manually add a whole new set of vertical menu bar styles to my css, so that there would be 2 different ones?

            • 3. Re: is it possible to have 2 different vertical spry menus on the same page
              sudarshan.t MVP

              Post your current HTML & CSS code and I'd be glad to help you figure out

              • 4. Re: is it possible to have 2 different vertical spry menus on the same page
                dawnnolan54 Community Member

                This is the html and css code for my first vetical menu bar.  I want to add a second, but won't the 2nd, one even if I give it a unique name, take on the css properties of the first vertical menu bar.  that is the only one that appears in the css styles panel that I can edit. 

                 

                 

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

                                                                    <li><a class="MenuBarItemSubmenu" href="#">Membership Info</a>

                                                                      <ul>

                                                                        <li><a href="../ipdcmembership.html">IPDC Membership</a></li>

                                                                        <li><a href="../websitesubscripton.html">Subscribe to Website</a></li>

                                                                        <li><a href="../Lexissubscription.html">Subscribe to Lexis</a></li>

                                                          </ul>

                                                        </li>

                                <li><a class="MenuBarItemSubmenu" href="../contact.html">Contact Us</a>

                                  <ul>

                                    <li><a href="../contact.html">Email Us</a></li>

                                    <li><a href="../board_of_directors.html">Board of Directors</a></li>

                                    <li><a href="../staffipdc.html">IPDC Staff</a></li>

                                  </ul>

                                </li>

                                <li><a href="../dplinks.html">Death Penalty INfo</a></li>

                                <li><a href="#" class="MenuBarItemSubmenu">Other Links</a>

                                  <ul>

                                    <li><a href="../legalresources.html">Legal Links</a></li>

                                    <li><a href="#">Government</a></li>

                                    <li><a href="#">Organizations</a></li>

                                  </ul>

                                </li>

                                <li><a href="../boardmeetings.pdf" target="_blank">Board Meetings</a></li>

                              </ul>

                1. ul.MenuBarVertical

                {

                                list-style-type: none;

                                cursor: default;

                                margin-top: 0;

                                margin-right: 0;

                                margin-bottom: 0;

                                margin-left: 0;

                                padding-top: 0;

                                padding-right: 0;

                                padding-bottom: 0;

                                padding-left: 0;

                }

                /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

                1. ul.MenuBarActive

                {

                                z-index: 1000;

                }

                /* Menu item containers, position children relative to this container and are same fixed width as parent */

                1. ul.MenuBarVertical li

                {

                                list-style-type: none;

                                position: relative;

                                text-align: left;

                                cursor: pointer;

                                width: 200px;

                                margin-top: 0;

                                margin-right: 0;

                                margin-bottom: 0;

                                background-color: #4762b9;

                                padding: 0;

                }

                /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

                1. ul.MenuBarVertical ul

                {

                                padding: 0;

                                list-style-type: none;

                                position: absolute;

                                z-index: 1020;

                                cursor: default;

                                left: -1000em;

                                top: 0;

                                margin-right: 0;

                                margin-bottom: 0;

                }

                /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

                1. ul.MenuBarVertical ul.MenuBarSubmenuVisible

                {

                                left: 0;

                }

                /* Menu item containers are same fixed width as parent */

                1. ul.MenuBarVertical ul li

                {

                                width: 186px;

                                margin-left: 201px;

                                border-bottom-width: 1px;

                                border-bottom-style: solid;

                                border-bottom-color: #FFF;

                                background-color: #4762b9;

                                border-top-width: 1px;

                                border-top-style: solid;

                                border-top-color: #FFF;

                                font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

                                font-size: 13px;

                }

                /* Menu items are a light gray block with padding and no text decoration */

                1. ul.MenuBarVertical a

                {

                                display: block;

                                cursor: pointer;

                                background-color: #4762b9;

                                color: #FFF;

                                text-decoration: none;

                                font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

                                font-size: 15px;

                                text-transform: uppercase;

                                padding-top: 20px;

                                padding-right: 10px;

                                padding-bottom: 18px;

                                padding-left: 8px;

                                margin-top: 0px;

                }

                /* Menu items that have mouse over or focus have a blue background and white text */

                1. ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus

                {

                                background-color: #33C;

                                color: #FFF;

                }

                /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */

                1. ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible

                {

                                background-color: #33C;

                                color: #FFF;

                }

                 

                /*******************************************************************************

                 

                SUBMENU INDICATION: styles if there is a submenu under a given menu item

                 

                *******************************************************************************/

                 

                /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */

                1. ul.MenuBarVertical a.MenuBarItemSubmenu

                {

                                background-image: url(SpryMenuBarRight.gif);

                                background-repeat: no-repeat;

                                background-position: 95% 50%;

                }

                 

                /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */

                1. ul.MenuBarVertical a.MenuBarItemSubmenuHover

                {

                                background-image: url(SpryMenuBarRightHover.gif);

                                background-repeat: no-repeat;

                                background-position: 95% 50%;

                }

                 

                /*******************************************************************************

                 

                BROWSER HACKS: the hacks below should not be changed unless you are an expert

                 

                *******************************************************************************/

                 

                /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

                1. ul.MenuBarVertical iframe

                {

                                position: absolute;

                                z-index: 1010;

                                filter:alpha(opacity:0.1);

                }

                /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

                @media screen, projection

                {

                                ul.MenuBarVertical li.MenuBarItemIE

                                {

                                                display: inline;

                                                f\loat: left;

                                                background: #FFF;

                                }

                • 5. Re: is it possible to have 2 different vertical spry menus on the same page
                  sudarshan.t MVP

                  Styling different menus is easy.

                   

                  You could actually insert both the Spry Dropdown menus directly from DW.

                   

                  You could see this link and see its source on how to style them differently. This link has MULTIPLE menus on the same page: http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html

                   

                  Cheers,

                  ST