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

Re: [ydn-javascript] Menu Drop Down when right aligned

Expand Messages
  • Todd Kloots
    James - So, you are trying to create a right nav, correct? There are a couple of problems with the example code that you sent. You were using the MenuBar
    Message 1 of 2 , Dec 10, 2006
    • 0 Attachment
      James -

      So, you are trying to create a right nav, correct?
      There are a couple of problems with the example code
      that you sent. You were using the MenuBar class to
      create a right nav. Was that was deliberate? That
      class is meant to create a horizontal nav bar with
      submenus that drop down. You just want to use the
      Menu class.

      It seems like what you really want is a menu that
      exists in a column to the the right of some content,
      correct? If so, you need to start by choosing the
      right grid layout, probably one with a narrow right
      column. So, check out the grids documentation and
      example page
      (http://developer.yahoo.com/yui/examples/grids/index.html)
      when you get a chance.

      Secondly, you're going to need to modify the menu code
      to allow for right-to-left support. While YUI Menu
      doesn't currently support this out of the box, you can
      hack it to work. Here is an example to help you out:

      http://yuiblog.com/sandbox/yui/v012/examples/menu/example15.php

      - Todd

      --- James Hartford <jimhartford@...> wrote:

      > I am trying to create a menu on the right side of a
      > page, but when the menu
      > drop down is wider than the first level menu item,
      > the drop down drops
      > somewhere in the middle of the page, same thing
      > happens if the window is too
      > small and the menu is slightly outside the window to
      > the right. I have
      > attached the html, css and some screen shots. Not
      > sure how to get around
      > this. Thanks for the help.
      >
      ---------------------------------
      Example: Website Top Nav With
      Submenus Built From Markup (YUI Library)


      div.yui-b p {
      margin:0 0 .5em 0; color:#999;
      } div.yui-b p strong {
      font-weight:bold;
      color:#000; }
      div.yui-b p em { color:#000;
      } h1 {
      font-weight:bold; margin:0 0 1em 0;
      padding:.25em .5em;
      background-color:#ccc; }
      #productsandservices { margin:0 0 10px
      0; }

      YAHOO.example.onMenuBarAvailable = function(p_oEvent)
      { // Instantiate and render the menu
      bar var oMenuBar = new
      YAHOO.widget.MenuBar("productsandservices", {
      autosubmenudisplay:true, showdelay:250, hidedelay:750,
      lazyload:true }); oMenuBar.render();
      } // Initialize and render the menu
      bar when it is available in the DOM
      YAHOO.util.Event.onAvailable("productsandservices",
      YAHOO.example.onMenuBarAvailable);

      Example: Website Top Nav With Submenus
      Built From Markup (YUI Library) [Examples Home]





      Communucation



      360°

      Alerts

      Avatars

      Groups

      Internet Access


      Member Directory

      Messenger

      Mobile

      Photos









      NOTE: This example demonstrates how to add submenus to
      a menu bar using existing markup. Alternatively, you
      can add submenus to a menu bar using JavaScript.

      One
      Two Three


      Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Maecenas sit amet metus. Nunc quam elit, posuere
      nec, auctor in, rhoncus quis, dui. Aliquam erat
      volutpat. Ut dignissim, massa sit amet dignissim
      cursus, quam lacus feugiat dolor, id aliquam leo
      tortor eget odio. Pellentesque orci arcu, eleifend at,
      iaculis sit amet, posuere eu, lorem. Aliquam erat
      volutpat. Phasellus vulputate. Vivamus id erat. Nulla
      facilisi. Class aptent taciti sociosqu ad litora
      torquent per conubia nostra, per inceptos hymenaeos.
      Nunc gravida. Ut euismod, tortor eget convallis
      ullamcorper, arcu odio egestas pede, ut ornare urna
      elit vitae mauris. Aenean ullamcorper eros a lacus.
      Curabitur egestas tempus lectus. Donec et lectus et
      purus dapibus feugiat. Sed sit amet diam. Etiam ipsum
      leo, facilisis ac, rutrum nec, dignissim quis, tellus.
      Sed eleifend.

      Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Maecenas sit amet metus. Nunc quam elit, posuere
      nec, auctor in, rhoncus quis, dui. Aliquam erat
      volutpat. Ut dignissim, massa sit amet dignissim
      cursus, quam lacus feugiat dolor, id aliquam leo
      tortor eget odio. Pellentesque orci arcu, eleifend at,
      iaculis sit amet, posuere eu, lorem. Aliquam erat
      volutpat. Phasellus vulputate. Vivamus id erat. Nulla
      facilisi. Class aptent taciti sociosqu ad litora
      torquent per conubia nostra, per inceptos hymenaeos.
      Nunc gravida. Ut euismod, tortor eget convallis
      ullamcorper, arcu odio egestas pede, ut ornare urna
      elit vitae mauris. Aenean ullamcorper eros a lacus.
      Curabitur egestas tempus lectus. Donec et lectus et
      purus dapibus feugiat. Sed sit amet diam. Etiam ipsum
      leo, facilisis ac, rutrum nec, dignissim quis, tellus.
      Sed eleifend.




      Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Maecenas sit amet metus. Nunc quam elit, posuere
      nec, auctor in, rhoncus quis, dui. Aliquam erat
      volutpat. Ut dignissim, massa sit amet dignissim
      cursus, quam lacus feugiat dolor, id aliquam leo
      tortor eget odio. Pellentesque orci arcu, eleifend at,
      iaculis sit amet, posuere eu, lorem. Aliquam erat
      volutpat. Phasellus vulputate. Vivamus id erat. Nulla
      facilisi. Class aptent taciti sociosqu ad litora
      torquent per conubia nostra, per inceptos hymenaeos.
      Nunc gravida. Ut euismod, tortor eget convallis
      ullamcorper, arcu odio egestas pede, ut ornare urna
      elit vitae mauris. Aenean ullamcorper eros a lacus.
      Curabitur egestas tempus lectus. Donec et lectus et
      purus dapibus feugiat. Sed sit amet diam. Etiam ipsum
      leo, facilisis ac, rutrum nec, dignissim quis, tellus.
      Sed eleifend.



      FOOTER: Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Maecenas sit amet metus. Nunc quam
      elit, posuere nec, auctor in, rhoncus quis, dui.
      Aliquam erat volutpat. Ut dignissim, massa sit amet
      dignissim cursus, quam lacus feugiat.


      > /*
      > Copyright (c) 2006, Yahoo! Inc. All rights reserved.
      > Code licensed under the BSD License:
      > http://developer.yahoo.com/yui/license.txt
      > Version: 0.12
      > */
      >
      >
      >
      > /* Menu styles */
      >
      > div.yuimenu {
      >
      > background-color:#f6f7ee;
      > border:solid 1px #c4c4be;
      > padding:1px;
      >
      > }
      >
      > /* Submenus are positioned absolute and hidden by
      > default */
      >
      > div.yuimenu div.yuimenu,
      > div.yuimenubar div.yuimenu {
      >
      > position:absolute;
      > visibility:hidden;
      >
      > }
      >
      > /* MenuBar Styles */
      >
      > div.yuimenubar {
      > float:right;
      > background-color:#f6f7ee;
      >
      > }
      >
      > /*
      > Applying a width triggers "haslayout" in IE so
      > that the module's
      > body clears its floated elements
      > */
      > div.yuimenubar div.bd {
      >
      > width:100%;
      >
      > }
      >
      > /*
      > Clear the module body for other browsers
      > */
      > div.yuimenubar div.bd:after {
      >
      > content:'.';
      > display:block;
      > clear:both;
      > visibility:hidden;
      > height:0;
      >
      > }
      >
      >
      > /* Matches the group title (H6) inside a Menu or
      > MenuBar instance */
      >
      > div.yuimenu h6,
      > div.yuimenubar h6 {
      >
      > font-size:100%;
      > font-weight:normal;
      > margin:0;
      > border:solid 1px #c4c4be;
      > color:#b9b9b9;
      >
      > }
      >
      > div.yuimenubar h6 {
      >
      > float:left;
      > display:inline; /* Prevent margin doubling in IE
      > */
      > padding:4px 12px;
      > border-width:0 1px 0 0;
      >
      > }
      >
      > div.yuimenu h6 {
      >
      > float:none;
      > display:block;
      > border-width:1px 0 0 0;
      > padding:5px 10px 0 10px;
      >
      > }
      >
      >
      > /* Matches the UL inside a Menu or MenuBar instance
      > */
      >
      > div.yuimenubar ul {
      >
      > list-style-type:none;
      > margin:0;
      > padding:0;
      >
      > }
      >
      > div.yuimenu ul {
      >
      > list-style-type:none;
      > border:solid 1px #c4c4be;
      > border-width:1px 0 0 0;
      > margin:0;
      > padding:10px 0;
      >
      > }
      >
      >
      > div.yuimenu ul.first-of-type,
      > div.yuimenu ul.hastitle,
      > div.yuimenu h6.first-of-type {
      >
      > border-width:0;
      >
      > }
      >
      >
      > /* MenuItem and MenuBarItem styles */
      >
      > div.yuimenu li,
      > div.yuimenubar li {
      >
      > font-size:85%;
      > cursor:pointer;
      > cursor:hand;
      > white-space:nowrap;
      > text-align:left;
      >
      > }
      >
      > div.yuimenu li.yuimenuitem {
      >
      > padding:2px 24px;
      >
      > }
      >
      > div.yuimenu li li,
      > div.yuimenubar li li {
      >
      > font-size:100%;
      >
      > }
      >
      >
      > /* Matches the help text for a menu item */
      >
      > div.yuimenu li em {
      >
      > font-style:normal;
      > margin:0 0 0 40px;
      >
      > }
      >
      > div.yuimenu li a em {
      >
      > margin:0;
      >
      > }
      >
      > div.yuimenu li a,
      > div.yuimenubar li a {
      >
      > /*
      > "zoom:1" triggers "haslayout" in IE to
      > ensure that the mouseover and
      > mouseout events bubble to the parent LI in
      > IE.
      > */
      > zoom:1;
      > color:#000;
      > text-decoration:none;
      >
      > }
      >
      > div.yuimenu li.hassubmenu,
      > div.yuimenu li.hashelptext {
      >
      > text-align:right;
      >
      > }
      >
      > div.yuimenu li.hassubmenu a.hassubmenu,
      > div.yuimenu li.hashelptext a.hashelptext {
      >
      > float:left;
      > display:inline; /* Prevent margin doubling in IE
      > */
      > text-align:left;
      >
      > }
      >
      >
      > /* Matches focused and selected menu items */
      >
      > div.yuimenu li.selected,
      > div.yuimenubar li.selected {
      >
      > background-color:#8c8ad0;
      >
      > }
      >
      > div.yuimenu li.selected a.selected,
      > div.yuimenubar li.selected a.selected {
      >
      > text-decoration:underline;
      >
      > }
      >
      > div.yuimenu li.selected a.selected,
      > div.yuimenu li.selected em.selected,
      > div.yuimenubar li.selected a.selected {
      >
      > color:#fff;
      >
      > }
      >
      >
      > /* Matches disabled menu items */
      >
      > div.yuimenu li.disabled,
      > div.yuimenubar li.disabled {
      >
      > cursor:default;
      >
      > }
      >
      > div.yuimenu li.disabled a.disabled,
      > div.yuimenu li.disabled em.disabled,
      > div.yuimenubar li.disabled a.disabled {
      >
      > color:#b9b9b9;
      > cursor:default;
      >
      > }
      >
      > div.yuimenubar li.yuimenubaritem {
      >
      > float:left;
      > display:inline; /* Prevent margin doubling in IE
      > */
      > border-width:0 0 0 1px;
      > border-style:solid;
      > border-color:#c4c4be;
      > padding:4px 24px;
      > margin:0;
      >
      > }
      >
      > div.yuimenubar li.yuimenubaritem.first-of-type {
      >
      > border-width:0;
      >
      > }
      >
      >
      > /* Matches the submenu indicator for menu items */
      >
      > div.yuimenubar li.yuimenubaritem img {
      >
      > height:8px;
      > width:8px;
      > margin:0 0 0 10px;
      > vertical-align:middle;
      >
      > }
      >
      > div.yuimenu li.yuimenuitem img {
      >
      > height:8px;
      > width:8px;
      > margin:0 -16px 0 0;
      > padding-left:10px;
      > border:0;
      >
      > }
      >
      > div.yuimenu li.checked {
      >
      > position:relative;
      >
      > }
      >
      > div.yuimenu li.checked img.checked {
      >
      > height:8px;
      > width:8px;
      > margin:0;
      > padding:0;
      > border:0;
      > position:absolute;
      > left:6px;
      > _left:-16px; /* Underscore hack b/c this is for
      > IE 6 only */
      > top:.5em;
      >
      > }
    Your message has been successfully submitted and would be delivered to recipients shortly.