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

Menu in nested Layout - Dav!

Expand Messages
  • malutanpetronel
    Bellow is I hope a simple correct example based on original example I think of Dav http://developer.yahoo.com/yui/examples/layout/menu_layout_source.html Dav,
    Message 1 of 2 , Apr 2, 2009
    • 0 Attachment
      Bellow is I hope a simple correct example based on original example I think of Dav
      http://developer.yahoo.com/yui/examples/layout/menu_layout_source.html

      Dav, as i have always troubles to make menu escape nested layouts please let me know how to do it.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <title>Full Page Layout with Menu Navigation - Example</title>
      <style type="text/css">
      /*margin and padding on body element
      can introduce errors in determining
      element position and are not recommended;
      we turn them off as a foundation for YUI
      CSS treatments. */
      body {
      margin:0;
      padding:0;
      }
      /* SUGESTIION DAVGLAS FOR correcting MENU's but is not overlapping center left or right from the nested below example DIV*/
      .yui-skin-sam .yui-layout .yui-layout-unit-top,
      .yui-skin-sam .yui-layout .yui-layout-unit-top div.yui-layout-bd-nohd {
      overflow: visible;
      }
      </style>
      <link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/reset-fonts-grids/reset-fonts-grids.css" />
      <link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/menu/assets/skins/sam/menu.css" />
      <link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/resize/assets/skins/sam/resize.css" />
      <link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/layout/assets/skins/sam/layout.css" />
      <script type="text/javascript" src="http://developer.yahoo.com/yui/build/utilities/utilities.js"></script>
      <script type="text/javascript" src="http://developer.yahoo.com/yui/build/container/container_core-min.js"></script>
      <script type="text/javascript" src="http://developer.yahoo.com/yui/build/menu/menu-min.js"></script>
      <script type="text/javascript" src="http://developer.yahoo.com/yui/build/resize/resize-min.js"></script>
      <script type="text/javascript" src="http://developer.yahoo.com/yui/build/layout/layout-min.js"></script>
      <style>
      #productsandservices2 {
      position: static;
      }

      /*
      For IE 6: trigger "haslayout" for the anchor elements in the root Menu by
      setting the "zoom" property to 1. This ensures that the selected state of
      MenuItems doesn't get dropped when the user mouses off of the text node of
      the anchor element that represents a MenuItem's text label.
      */

      #productsandservices2 .yuimenuitemlabel {
      _zoom: 1;
      }

      #productsandservices2 .yuimenu .yuimenuitemlabel {
      _zoom: normal;
      }
      /*
      Turn off the border on the top unit since Menu has it's own border
      */
      .yui-skin-sam .yui-layout .yui-layout-unit-top div.yui-layout-bd {
      border: none;
      }
      /*
      Change some of the Menu colors
      */
      .yui-skin-sam .yuimenu .bd {
      background-color: #F2F2F2;
      }
      #productsandservices2 .bd {
      border: none;
      }
      #productsandservices2 .bd .first-of-type .bd {
      border: 1px solid #808080;
      }
      </style>

      </head>

      <body class=" yui-skin-sam">
      <div id="top1">
      <div id="l;ogo">TEST</div>
      <div id="menu">
      <div id="productsandservices" class="yuimenubar yuimenubarnav">
      <div class="bd">
      <ul class="first-of-type">

      <li class="yuimenubaritem first-of-type">
      <a class="yuimenubaritemlabel" href="#communication">Communication</a>
      </li>
      <li class="yuimenubaritem">
      <a class="yuimenubaritemlabel" href="http://shopping.yahoo.com">Shopping</a>
      </li>
      <li class="yuimenubaritem">
      <a class="yuimenubaritemlabel" href="http://entertainment.yahoo.com">Entertainment</a>

      </li>
      <li class="yuimenubaritem">
      <a class="yuimenubaritemlabel" href="#">Information</a>
      </li>
      </ul>
      </div>
      </div>
      </div>
      </div>
      <div id="bottom1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p></div>
      <div id="right1">
      <b>Right 1</b>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      </div>
      <div id="left1">
      <div id="productsandservices2" class="yuimenu">
      <div class="bd">
      <ul class="first-of-type">
      <li class="yuimenuitem">
      <a class="yuimenuitemlabel" href="#communication2">Communication</a>
      </li>
      <li class="yuimenuitem">
      <a class="yuimenuitemlabel" href="http://shopping.yahoo.com">Shopping</a>
      </li>

      <li class="yuimenuitem">
      <a class="yuimenuitemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
      </li>
      <li class="yuimenuitem">
      <a class="yuimenuitemlabel" href="#">Information</a>
      </li>
      </ul>
      </div>

      </div>
      </div>
      <div id="center1">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
      </div>


      <script>
      (function() {
      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;


      var initTopMenu = function() {
      /*
      Instantiate a MenuBar: The first argument passed to the
      constructor is the id of the element in the page
      representing the MenuBar; the second is an object literal
      of configuration properties.
      */

      var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
      autosubmenudisplay: true,
      hidedelay: 750,
      lazyload: true,
      effect: {
      effect: YAHOO.widget.ContainerEffect.FADE,
      duration: 0.25
      }
      });

      /*
      Define an array of object literals, each containing
      the data necessary to create a submenu.
      */

      var aSubmenuData = [

      {
      id: "communication",
      itemdata: [
      { text: "360", url: "http://360.yahoo.com" },
      { text: "Alerts", url: "http://alerts.yahoo.com" },
      { text: "Avatars", url: "http://avatars.yahoo.com" },
      { text: "Groups", url: "http://groups.yahoo.com " },
      { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
      {
      text: "PIM",
      submenu: {
      id: "pim",
      itemdata: [
      { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
      { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
      { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
      { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
      ]
      }

      },
      { text: "Member Directory", url: "http://members.yahoo.com" },
      { text: "Messenger", url: "http://messenger.yahoo.com" },
      { text: "Mobile", url: "http://mobile.yahoo.com" },
      { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
      ]
      },

      {
      id: "shopping",
      itemdata: [
      { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
      { text: "Autos", url: "http://autos.yahoo.com" },
      { text: "Classifieds", url: "http://classifieds.yahoo.com" },
      { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
      { text: "Real Estate", url: "http://realestate.yahoo.com" },
      { text: "Travel", url: "http://travel.yahoo.com" },
      { text: "Wallet", url: "http://wallet.yahoo.com" },
      { text: "Yellow Pages", url: "http://yp.yahoo.com" }
      ]
      },

      {
      id: "entertainment",
      itemdata: [
      { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
      { text: "Games", url: "http://games.yahoo.com" },
      { text: "Kids", url: "http://www.yahooligans.com" },
      { text: "Music", url: "http://music.yahoo.com" },
      { text: "Movies", url: "http://movies.yahoo.com" },
      { text: "Radio", url: "http://music.yahoo.com/launchcast" },
      { text: "Travel", url: "http://travel.yahoo.com" },
      { text: "TV", url: "http://tv.yahoo.com" }
      ]
      },

      {
      id: "information",
      itemdata: [
      { text: "Downloads", url: "http://downloads.yahoo.com" },
      { text: "Finance", url: "http://finance.yahoo.com" },
      { text: "Health", url: "http://health.yahoo.com" },
      { text: "Local", url: "http://local.yahoo.com" },
      { text: "Maps & Directions", url: "http://maps.yahoo.com" },
      { text: "My Yahoo!", url: "http://my.yahoo.com" },
      { text: "News", url: "http://news.yahoo.com" },
      { text: "Search", url: "http://search.yahoo.com" },
      { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
      { text: "Weather", url: "http://weather.yahoo.com" }
      ]
      }
      ];


      /*
      Subscribe to the "beforerender" event, adding a submenu
      to each of the items in the MenuBar instance.
      */

      oMenuBar.subscribe("beforeRender", function () {

      if (this.getRoot() == this) {

      this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
      this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
      this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
      this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);

      }

      });


      /*
      Call the "render" method with no arguments since the
      markup for this MenuBar instance is already exists in
      the page.
      */

      oMenuBar.render();
      };

      var initLeftMenu = function() {
      /*
      Instantiate a Menu: The first argument passed to the
      constructor is the id of the element in the page
      representing the Menu; the second is an object literal
      of configuration properties.
      */

      var oMenu = new YAHOO.widget.Menu("productsandservices2", {
      position: "static",
      hidedelay: 750,
      lazyload: true,
      effect: {
      effect: YAHOO.widget.ContainerEffect.FADE,
      duration: 0.25
      }
      });


      /*
      Define an array of object literals, each containing
      the data necessary to create a submenu.
      */

      var aSubmenuData = [

      {
      id: "communication2",
      itemdata: [
      { text: "360", url: "http://360.yahoo.com" },
      { text: "Alerts", url: "http://alerts.yahoo.com" },
      { text: "Avatars", url: "http://avatars.yahoo.com" },
      { text: "Groups", url: "http://groups.yahoo.com " },
      { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
      {
      text: "PIM",
      submenu: {
      id: "pim2",
      itemdata: [
      { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
      { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
      { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
      { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
      ]
      }

      },
      { text: "Member Directory", url: "http://members.yahoo.com" },
      { text: "Messenger", url: "http://messenger.yahoo.com" },
      { text: "Mobile", url: "http://mobile.yahoo.com" },
      { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
      ]
      },

      {
      id: "shopping2",
      itemdata: [
      { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
      { text: "Autos", url: "http://autos.yahoo.com" },
      { text: "Classifieds", url: "http://classifieds.yahoo.com" },
      { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
      { text: "Real Estate", url: "http://realestate.yahoo.com" },
      { text: "Travel", url: "http://travel.yahoo.com" },
      { text: "Wallet", url: "http://wallet.yahoo.com" },
      { text: "Yellow Pages", url: "http://yp.yahoo.com" }
      ]
      },

      {
      id: "entertainment2",
      itemdata: [
      { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
      { text: "Games", url: "http://games.yahoo.com" },
      { text: "Kids", url: "http://www.yahooligans.com" },
      { text: "Music", url: "http://music.yahoo.com" },
      { text: "Movies", url: "http://movies.yahoo.com" },
      { text: "Radio", url: "http://music.yahoo.com/launchcast" },
      { text: "Travel", url: "http://travel.yahoo.com" },
      { text: "TV", url: "http://tv.yahoo.com" }
      ]
      },

      {
      id: "information2",
      itemdata: [
      { text: "Downloads", url: "http://downloads.yahoo.com" },
      { text: "Finance", url: "http://finance.yahoo.com" },
      { text: "Health", url: "http://health.yahoo.com" },
      { text: "Local", url: "http://local.yahoo.com" },
      { text: "Maps & Directions", url: "http://maps.yahoo.com" },
      { text: "My Yahoo!", url: "http://my.yahoo.com" },
      { text: "News", url: "http://news.yahoo.com" },
      { text: "Search", url: "http://search.yahoo.com" },
      { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
      { text: "Weather", url: "http://weather.yahoo.com" }
      ]
      }
      ];


      // Subscribe to the Menu instance's "beforeRender" event

      oMenu.subscribe("beforeRender", function () {

      if (this.getRoot() == this) {

      this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
      this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
      this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
      this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);

      }

      });


      /*
      Call the "render" method with no arguments since the
      markup for this Menu instance is already exists in the page.
      */

      oMenu.render();
      };


      Event.onDOMReady(function() {
      var layout = new YAHOO.widget.Layout({
      units: [
      { position: 'top', height: 68, body: 'top1', scroll: null, zIndex: 2 },
      { position: 'right', header: 'Right', width: 300, resize: true, footer: 'Footer', collapse: true, scroll: true, body: 'right1', animate: true, gutter: '5' },
      { position: 'bottom', height: 30, body: 'bottom1' },
      { position: 'left', header: 'Left', width: 200, body: 'left1', gutter: '5', scroll: null, zIndex: 1 },
      { position: 'center', body: 'center1', gutter: '5 0' }
      ]
      });


      layout.on('render', function() {
      var el = layout.getUnitByPosition('top').get('wrap');
      var toplayout = new YAHOO.widget.Layout(el, {
      parent: layout,
      units: [
      { position: 'bottom', body: 'logo' , height: 24, gutter: '0px' },
      { position: 'center', body: 'menu', gutter: '0px' }
      ]
      });
      toplayout.render();
      });
      layout.render();

      YAHOO.util.Event.onContentReady("productsandservices", initTopMenu);
      YAHOO.util.Event.onContentReady("productsandservices2", initLeftMenu);

      });
      })();

      </script>
      </body>
      </html>


      With kind regards
    • malutanpetronel
      Found the answer and I ll post it here /* DAVGLAS */ .yui-skin-sam .yui-layout .yui-layout-unit-top, .yui-skin-sam .yui-layout .yui-layout-unit-top
      Message 2 of 2 , Apr 2, 2009
      • 0 Attachment
        Found the answer and I'll post it here

        /* DAVGLAS */
        .yui-skin-sam .yui-layout .yui-layout-unit-top,
        .yui-skin-sam .yui-layout .yui-layout-unit-top div.yui-layout-bd-nohd {
        overflow: visible;
        }
        /* +DAVGLAS */
        #layout-doc div.yui-layout-doc {
        overflow: visible;
        }
      Your message has been successfully submitted and would be delivered to recipients shortly.