Loading ...
Sorry, an error occurred while loading the content.

Digg style horizontal submenu.

Expand Messages
  • telerice
    Does anyone know how or whether it s possible to make the menuItems in a submenu horizontally align instead of the default (vertically align)? I ve played
    Message 1 of 3 , May 7, 2007
    • 0 Attachment
      Does anyone know how or whether it's possible to make the menuItems in
      a submenu horizontally align instead of the default (vertically align)?

      I've played around with the css and also the config properties of the
      submenu, but was unable to get the desired effect.

      My main menu is a MenuBar and I want the submenu to be horizontally
      displayed. By default the MenuBarItem's submenu is initialized to the
      Menu type, but look I want is more of a MenuBar typed submenu. Is
      there any way to achieve this effect? Thanks :)
    • alexshusta
      Hi telerice, Yes, there are a couple of ways to do this without overriding any YUI behavior. * Use a yuimenubar instead of a yuimenu for your submenus. *
      Message 2 of 3 , May 8, 2007
      • 0 Attachment
        Hi telerice,

        Yes, there are a couple of ways to do this without overriding any YUI behavior.
        • Use a "yuimenubar" instead of a "yuimenu" for your submenus.
        • Use CSS rules to create horizontal lists (see the classic A List Apart article Taming Lists ) and then swap them into and out of the page using regular DOM scripting methods or a central YUI event listener.

        Here's some example HTML implementing the first method, created by modifying the example from Yahoo at http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup.html

        <div id="productsandservices" class="yuimenubar">
            <div class="bd">
                <ul class="first-of-type">
                    <li class="yuimenubaritem first-of-type"><a href="#">Communication</a>
                        <div id="communicationsubmenubar" class="yuimenubar">
                            <div class="bd">
                                <ul class="first-of-type">
                                    <li class="yuimenubaritem first-of-type">first</li>
                                    <li class="yuimenubaritem">second</li>
                                    <li class="yuimenubaritem">third</li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="yuimenubaritem"><a href="#">Shopping</a>
                        <div id="shoppingsubmenubar" class="yuimenubar">
                            <div class="bd">
                                <ul class="first-of-type">
                                    <li class="yuimenubaritem">first</li>
                                    <li class="yuimenubaritem">second</li>
                                    <li class="yuimenubaritem">third</li>
                                </ul>
                            </div>
                        </div>                
                    </li>
                </ul>           
            </div>
        </div>


        The advantage to the first method is that it "just works" however, the submenus are dynamic and will automatically hide when the user mouses out of them.

        Hope that helps,
        ~Alexander
        --- In ydn-javascript@yahoogroups.com, "telerice" <telerice@...> wrote:
        >
        > Does anyone know how or whether it's possible to make the menuItems in
        > a submenu horizontally align instead of the default (vertically align)?
        >
        > I've played around with the css and also the config properties of the
        > submenu, but was unable to get the desired effect.
        >
        > My main menu is a MenuBar and I want the submenu to be horizontally
        > displayed. By default the MenuBarItem's submenu is initialized to the
        > Menu type, but look I want is more of a MenuBar typed submenu. Is
        > there any way to achieve this effect? Thanks :)
        >
      • telerice
        Thanks Alex ... it kind of works. Submenu items are now displayed horizontally; however, the submenu dimension seems a bit messed up. There is extra top
        Message 3 of 3 , May 8, 2007
        • 0 Attachment
          Thanks Alex ... it kind of works. Submenu items are now displayed
          horizontally; however, the submenu dimension seems a bit messed up.
          There is extra top padding on the submenu, and width is rendered
          differently between ff and ie.

          I have the example @ http://worldwidewang.net/yui/index.html.

          I notice that the yuimenu class is appended into my yuimenubar submenu
          elements. Basically the submenu div ends up having both "yuimenubar"
          and "yuimenu" in its class attribute. I'm not sure if yui is intended
          to work like this...

          I've consider using javascript to build my submenu from the MenuBar
          class, but ideally I would like the menu to be crawlable by the search
          engine. I'm not sure if search engines can read javascript/runtime
          generated doms. I've been sticking w/ menu-from-mark-up approach.

          Thanks for the help again. Don't pull your hair on this problem.
          Worse come to worse I'll just write my own menu - no big deal. :)

          --- In ydn-javascript@yahoogroups.com, "alexshusta"
          <alexander.shusta@...> wrote:
          >
          > Hi telerice,
          >
          > Yes, there are a couple of ways to do this without overriding any YUI
          > behavior.
          >
          > * Use a "yuimenubar" instead of a "yuimenu" for your submenus.
          > * Use CSS rules to create horizontal lists (see the classic A List
          > Apart article Taming Lists <http://alistapart.com/articles/taminglists/>
          > ) and then swap them into and out of the page using regular DOM
          > scripting methods or a central YUI event listener.
          >
          > Here's some example HTML implementing the first method, created by
          > modifying the example from Yahoo at
          > http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup.html
          >
          > <div id="productsandservices" class="yuimenubar">
          > <div class="bd">
          > <ul class="first-of-type">
          > <li class="yuimenubaritem first-of-type"><a
          > href="#">Communication</a>
          > <div id="communicationsubmenubar" class="yuimenubar">
          > <div class="bd">
          > <ul class="first-of-type">
          > <li class="yuimenubaritem
          > first-of-type">first</li>
          > <li class="yuimenubaritem">second</li>
          > <li class="yuimenubaritem">third</li>
          > </ul>
          > </div>
          > </div>
          > </li>
          > <li class="yuimenubaritem"><a href="#">Shopping</a>
          > <div id="shoppingsubmenubar" class="yuimenubar">
          > <div class="bd">
          > <ul class="first-of-type">
          > <li class="yuimenubaritem">first</li>
          > <li class="yuimenubaritem">second</li>
          > <li class="yuimenubaritem">third</li>
          > </ul>
          > </div>
          > </div>
          > </li>
          > </ul>
          > </div>
          > </div>
          >
          > The advantage to the first method is that it "just works" however, the
          > submenus are dynamic and will automatically hide when the user mouses
          > out of them.
          >
          > Hope that helps,
          > ~Alexander
          > --- In ydn-javascript@yahoogroups.com, "telerice" <telerice@> wrote:
          > >
          > > Does anyone know how or whether it's possible to make the menuItems in
          > > a submenu horizontally align instead of the default (vertically
          > align)?
          > >
          > > I've played around with the css and also the config properties of the
          > > submenu, but was unable to get the desired effect.
          > >
          > > My main menu is a MenuBar and I want the submenu to be horizontally
          > > displayed. By default the MenuBarItem's submenu is initialized to the
          > > Menu type, but look I want is more of a MenuBar typed submenu. Is
          > > there any way to achieve this effect? Thanks :)
          > >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.