Содержание

1 Full Page Layout
2 Layout components as border layout
3 Nested Layout - Example
4 Using a Layout with Grids CSS
5 YUI: CSS Grid Builder
- 5.1 Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)
6 Example: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)
- 6.1 Website Left Nav With Submenus From JavaScript (YUI Library)
7 Example: Website Left Nav With Submenus From JavaScript (YUI Library)
- 7.1 Website Top Nav With Submenus From JavaScript
8 Example: Website Top Nav With Submenus From JavaScript (YUI Library)

Full Page Layout

   <source lang="html4strict">

<!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 - 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;

}

toggle {

   text-align: center;
   padding: 1em;

}

toggle a {

   padding: 0 5px;
   border-left: 1px solid black;

}

tRight {

   border-left: none !important;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/layout/assets/skins/sam/layout.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo/yahoo-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/event/event-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dom/dom-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/layout/layout-min.js"></script>

</head> <body class=" yui-skin-sam">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.

   Right 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.

<a href="#" id="tRight">Toggle Right</a><a href="#" id="tLeft">Toggle Left</a><a href="#" id="closeLeft">Close Left</a><a href="#" id="padRight">Add Gutter to Right</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   Event.onDOMReady(function() {
       var layout = new YAHOO.widget.Layout({
           units: [
               { position: "top", height: 50, body: "top1", header: "Top", gutter: "5px", collapse: true, resize: true },
               { position: "right", header: "Right", width: 300, resize: true, gutter: "5px", footer: "Footer", collapse: true, scroll: true, body: "right1", animate: true },
               { position: "bottom", header: "Bottom", height: 100, resize: true, body: "bottom1", gutter: "5px", collapse: true },
               { position: "left", header: "Left", width: 200, resize: true, body: "left1", gutter: "5px", collapse: true, close: true, collapseSize: 50, scroll: true, animate: true },
               { position: "center", body: "center1" }
           ]
       });
       layout.on("render", function() {
           layout.getUnitByPosition("left").on("close", function() {
               closeLeft();
           });
       });
       layout.render();
       Event.on("tLeft", "click", function(ev) {
           Event.stopEvent(ev);
           layout.getUnitByPosition("left").toggle();
       });
       Event.on("tRight", "click", function(ev) {
           Event.stopEvent(ev);
           layout.getUnitByPosition("right").toggle();
       });
       Event.on("padRight", "click", function(ev) {
           Event.stopEvent(ev);
           var pad = prompt("CSS gutter to apply: ("2px" or "2px 4px" or any combination of the 4 sides)", layout.getUnitByPosition("right").get("gutter"));
           layout.getUnitByPosition("right").set("gutter", pad);
       });
       var closeLeft = function() {
           var a = document.createElement("a");
           a.href = "#";
           a.innerHTML = "Add Left Unit";
           Dom.get("closeLeft").parentNode.appendChild(a);
           Dom.setStyle("tLeft", "display", "none");
           Dom.setStyle("closeLeft", "display", "none");
           Event.on(a, "click", function(ev) {
               Event.stopEvent(ev);
               Dom.setStyle("tLeft", "display", "inline");
               Dom.setStyle("closeLeft", "display", "inline");
               a.parentNode.removeChild(a);
               layout.addUnit(layout.get("units")[3]);
               layout.getUnitByPosition("left").on("close", function() {
                   closeLeft();
               });
           });
       };
       Event.on("closeLeft", "click", function(ev) {
           Event.stopEvent(ev);
           layout.getUnitByPosition("left").close();
       });
   });

})(); </script> </body> </html>

 </source>

Layout components as border layout

   <source lang="html4strict">

<!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>Simple Application - Layout Example</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/calendar/assets/skins/sam/calendar.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/layout/assets/skins/sam/layout.css" /> <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;

}

demo .yui-resize-handle-br {

   height: 11px;
   width: 11px;
   background-position: -20px -60px;
   background-color: transparent;

}

demo .yui-calcontainer,
demo .yui-editor-container {

   border: none;

}

demo .yui-layout {

   background-color: transparent;

}

status img {

   padding: 4px;
   float: left;

}

demo textarea {

   visibility: hidden;

}

demo .yui-toolbar .bd {

   padding: 0;
   border: none;
   background-color: #fff;

} </style> <script type="text/javascript" src="yui_2.7.0b-lib/utilities/utilities.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/calendar/calendar-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/simpleeditor-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/layout/layout-min.js"></script> </head> <body class=" yui-skin-sam">

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       layout = null,
       cal = null,
       editor = null,
       conn = null,
       panel = null,
       dateSelected = null,
       editorData = {};
   panel = new YAHOO.widget.Panel("demo", {
       width: "700px",
       underlay: "none",
       close: false,
       xy: [100, 100]
   });
   panel.setHeader("Editor");

panel.setBody("

");

   panel.renderEvent.subscribe(function() {
       Event.onAvailable("layout", function() {
           layout = new YAHOO.widget.Layout("layout", {
               height: 400,
               units: [
                   { position: "top", height: 25, header: "Date Editor", gutter: "2" },
                   { position: "left", width: 205, body: "", gutter: "0 5 0 2" },
                   { position: "bottom", height: 25, id: "status", body: "Status", gutter: "2" },
                   { position: "center", body: "Select a date..", gutter: "0 2 0 0" }
               ]
           });
           
           layout.on("render", function() {
               var c = layout.getUnitByPosition("center");
               c.set("body", "<textarea id="caleditor"></textarea>");
               editor = new YAHOO.widget.SimpleEditor("caleditor", {
                   height: "305px",
                   width: c.get("width") + "px",
                   dompath: false,
                   animate: false,
                   focusAtStart: true,
                   toolbar: {
                       grouplabels: false,
                       buttons: [
                           { group: "textstyle", label: "Font Style",
                               buttons: [
                                   { type: "select", label: "Arial", value: "fontname", disabled: true,
                                       menu: [
                                           { text: "Arial", checked: true },
                                           { text: "Arial Black" },
                                           { text: "Comic Sans MS" },
                                           { text: "Courier New" },
                                           { text: "Lucida Console" },
                                           { text: "Tahoma" },
                                           { text: "Times New Roman" },
                                           { text: "Trebuchet MS" },
                                           { text: "Verdana" }
                                       ]
                                   },
                                   { type: "spin", label: "13", value: "fontsize", range: [ 9, 75 ], disabled: true },
                                   { type: "separator" },
                                   { type: "push", label: "Bold", value: "bold" },
                                   { type: "push", label: "Italic", value: "italic" },
                                   { type: "push", label: "Underline", value: "underline" },
                                   { type: "separator" },
                                   { type: "color", label: "Font Color", value: "forecolor", disabled: true },
                                   { type: "color", label: "Background Color", value: "backcolor", disabled: true }
                               ]
                           }
                       ]
                   }
               });
               editor.on("editorContentLoaded", function() {
                   var d = new Date();
                   var today = d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear();
                   dateSelected = [today];
                   layout.getUnitByPosition("top").set("header", "Editing Date: " + today);
                   cal.cfg.setProperty("selected", today);
                   cal.render();
               });
               editor.render();
               var l = layout.getUnitByPosition("left");
               var el = document.createElement("div");
               l.body.appendChild(el);
               cal = new YAHOO.widget.Calendar(el);
               cal.selectEvent.subscribe(function(ev, args) {
                   if (dateSelected) {
                       //Connection Manager
                       layout.getUnitByPosition("bottom").set("body", "<img src="yui_2.7.0b-assets/layout-assets/progress.gif"> Sending Data...");
                       var html = editor.getEditorHTML();
                       var url = "yui_2.7.0b-assets/layout-assets/post4.php?html=" + html;
                       editorData[dateSelected] = html;
                       conn = YAHOO.util.Connect.asyncRequest("POST", url, {
                           success: function() {
                               layout.getUnitByPosition("bottom").set("body", "Data Saved..");
                           },
                           failure: function() {
                           }
                       });
                       editor.setEditorHTML(" ");
                   }
                   var d = args[0][0];
                   dateSelected = d[1] + "/" + d[2] + "/" + d[0];
                   layout.getUnitByPosition("top").set("header", "Editing Date: " + d[1] + "/" + d[2] + "/" + d[0]);
                   if (dateSelected && editorData[dateSelected]) {
                       editor.setEditorHTML(editorData[dateSelected]);
                   }
                   var dates = [dateSelected];
                   for (var i in editorData) {
                       dates[dates.length] = i;
                   }
                   cal.cfg.setProperty("selected", dates.join(","));
                   cal.render();
               });
               cal.render();
           });
           layout.render();
       });
   });
   panel.render(document.body);
   resize = new YAHOO.util.Resize("demo", {
       handles: ["br"],
       autoRatio: true,
       status: true,
       proxy: true,
       useShim: true,
       minWidth: 700,
       minHeight: 400
   });
   resize.on("resize", function(args) {
       var h = args.height;
       var hh = this.header.clientHeight;
       var padding = ((10 * 2) + 2); //Sam"s skin applied a 10px padding and a 1 px border to the element..
       var bh = (h - hh - padding);
       Dom.setStyle(this.body, "height", bh + "px");
       layout.set("height", bh);
       layout.set("width", (args.width - padding));
       layout.resize();
       //Editor Resize
       var th = (editor.toolbar.get("element").clientHeight + 2); //It has a 1px border..
       var eH = (h - th);
       editor.set("width", args.width + "px");
       editor.set("height", eH + "px");
   }, panel, true);
   resize.on("endResize", function() {
       //Fixing IE"s calculations
       this.innerElement.style.height = "";
       //Focus the Editor so they can type.
       editor._focusWindow();
   }, panel, true);

})(); </script> </body> </html>

 </source>

Nested Layout - Example

   <source lang="html4strict">

<!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>Nested Layout - 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;

}

toggle {

   text-align: center;
   padding: 1em;

}

toggle a {

   padding: 0 5px;
   border-left: 1px solid black;

}

tRight {

   border-left: none !important;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/layout/assets/skins/sam/layout.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo/yahoo-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/event/event-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dom/dom-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/layout/layout-min.js"></script>

</head> <body class=" yui-skin-sam">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.

   Right 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   Event.onDOMReady(function() {
       var layout = new YAHOO.widget.Layout({
           minWidth: 1000,
           minHeight: 500,
           units: [
               { position: "top", height: 50, resize: false, body: "top1", header: "Top", gutter: "5px", collapse: true, resize: true, maxHeight: 100 },
               { position: "right", header: "Right", width: 300, resize: true, gutter: "2px 5px", footer: "Footer", collapse: true, scroll: true, body: "right1", maxWidth: 400 },
               { position: "bottom", header: "Bottom", height: 100, resize: true, body: "bottom1", gutter: "5px", collapse: true, maxHeight: 130 },
               { position: "left", header: "Left", width: 200, resize: true, body: "left1", gutter: "2px 5px", collapse: true, collapseSize: 50, scroll: true, maxWidth: 300 },
               { position: "center", minWidth: 400, minHeight: 200 }
           ]
       });
       layout.on("render", function() {
           var el = layout.getUnitByPosition("center").get("wrap");
           var layout2 = new YAHOO.widget.Layout(el, {
               parent: layout,
               minWidth: 400,
               minHeight: 200,
               units: [
                   { position: "top", header: "Top 2", height: 30, gutter: "2px", maxHeight: 80 },
                   { position: "right", header: "Right 2", width: 90, resize: true, proxy: false, body: "Right Content Data", collapse: true, gutter: "2px 2px 2px 5px", maxWidth: 200 },
                   { position: "left", header: "Left 2", width: 90, resize: true, proxy: false, body: "Left Content Data", gutter: "2px 5px 2px 2px", collapse: true, maxWidth: 200 },
                   { position: "center", body: "center2", gutter: "2px", scroll: true }
               ]
           });
           layout2.render();
       });
       layout.render();
   });

})(); </script> </body> </html>

 </source>

Using a Layout with Grids CSS

   <source lang="html4strict">

<!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>Using a Layout with Grids CSS</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;

}

hd, .yui-layout-unit-top {

   background-color: blue;
   color: white;

}

bd, .yui-layout-unit-center {

   background-color: #f2f2f2;

}

ft, .yui-layout-unit-bottom {

   background-color: red;
   color: #fff;

}

nav, .yui-layout-unit-left {

   background-color: #808080;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/layout/assets/layout-core.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/selector/selector-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/layout/layout-min.js"></script> </head> <body class="yui-skin-sam">

YUI: CSS Grid Builder

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.

Navigation Pane

Footer is here.

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   Event.onDOMReady(function() {
       var layout = new YAHOO.widget.Layout("doc1", {
           height: Dom.getClientHeight(), //Height of the viewport
           width: Dom.get("doc1").offsetWidth, //Width of the outer element
           minHeight: 150, //So it doesn"t get too small
           units: [
               { position: "top", height: 45, body: "hd" },
               { position: "left", width: 160, body: "nav", grids: true },
               { position: "bottom", height: 25, body: "ft" },
               { position: "center", body: "bd", grids: true }
           ]
       });
       layout.on("beforeResize", function() {
           Dom.setStyle("doc1", "height", Dom.getClientHeight() + "px");
       });
       layout.render();
       //Handle the resizing of the window
       Event.on(window, "resize", layout.resize, layout, true);
   });

})(); </script> </body> </html>

 </source>

Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)

   <source lang="html4strict">

<!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=utf-8">
       <title>Example: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)</title>
       
       
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css">

       
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">

       <style type="text/css">
           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 {
               
               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.
     */
     #productsandservices .yuimenuitemlabel {
     
       _zoom: 1;
     
     }
     #productsandservices .yuimenu .yuimenuitemlabel {
       _zoom: normal;
     }
       </style>

       <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
       <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation.js"></script>
       <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core.js"></script>
       
       <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>

       <script type="text/javascript">
           /*
                Initialize and render the Menu when its elements are ready 
                to be scripted.
           */
           YAHOO.util.Event.onContentReady("productsandservices", function () {
               /*
         Instantiate a Menu:  The first argument passed to the constructor
         is the id for the Menu element to be created, the second is an 
         object literal of configuration properties.
               */
               var oMenu = new YAHOO.widget.Menu(
                                   "productsandservices", 
                                   {
                                       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: "communication", 
                       itemdata: [ 
                           { text: "360", url: "http://360.yahoo.ru" },
                           { text: "Alerts", url: "http://alerts.yahoo.ru" },
                           { text: "Avatars", url: "http://avatars.yahoo.ru" },
                           { text: "Groups", url: "http://groups.yahoo.ru " },
                           { text: "Internet Access", url: "http://promo.yahoo.ru/broadband" },
                           {
                               text: "PIM", 
                               submenu: { 
                                           id: "pim", 
                                           itemdata: [
                                               { text: "Yahoo! Mail", url: "http://mail.yahoo.ru" },
                                               { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.ru" },
                                               { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.ru" },
                                               { text: "Yahoo! Notepad", url: "http://notepad.yahoo.ru" }
                                           ] 
                                       }
                           
                           }, 
                           { text: "Member Directory", url: "http://members.yahoo.ru" },
                           { text: "Messenger", url: "http://messenger.yahoo.ru" },
                           { text: "Mobile", url: "http://mobile.yahoo.ru" },
                           { text: "Flickr Photo Sharing", url: "http://www.flickr.ru" },
                       ]
                   },
                   {
                       id: "shopping", 
                       itemdata: [
                           { text: "Auctions", url: "http://auctions.shopping.yahoo.ru" },
                           { text: "Autos", url: "http://autos.yahoo.ru" },
                           { text: "Classifieds", url: "http://classifieds.yahoo.ru" },
                           { text: "Flowers & Gifts", url: "http://shopping.yahoo.ru/b:Flowers%20%26%20Gifts:20146735" },
                           { text: "Real Estate", url: "http://realestate.yahoo.ru" },
                           { text: "Travel", url: "http://travel.yahoo.ru" },
                           { text: "Wallet", url: "http://wallet.yahoo.ru" },
                           { text: "Yellow Pages", url: "http://yp.yahoo.ru" }                    
                       ]    
                   },
                   
                   {
                       id: "entertainment", 
                       itemdata: [
                           { text: "Fantasy Sports", url: "http://fantasysports.yahoo.ru" },
                           { text: "Games", url: "http://games.yahoo.ru" },
                           { text: "Kids", url: "http://www.yahooligans.ru" },
                           { text: "Music", url: "http://music.yahoo.ru" },
                           { text: "Movies", url: "http://movies.yahoo.ru" },
                           { text: "Radio", url: "http://music.yahoo.ru/launchcast" },
                           { text: "Travel", url: "http://travel.yahoo.ru" },
                           { text: "TV", url: "http://tv.yahoo.ru" }              
                       ] 
                   },
                   
                   {
                       id: "information",
                       itemdata: [
                           { text: "Downloads", url: "http://downloads.yahoo.ru" },
                           { text: "Finance", url: "http://finance.yahoo.ru" },
                           { text: "Health", url: "http://health.yahoo.ru" },
                           { text: "Local", url: "http://local.yahoo.ru" },
                           { text: "Maps & Directions", url: "http://maps.yahoo.ru" },
                           { text: "My Yahoo!", url: "http://my.yahoo.ru" },
                           { text: "News", url: "http://news.yahoo.ru" },
                           { text: "Search", url: "http://search.yahoo.ru" },
                           { text: "Small Business", url: "http://smallbusiness.yahoo.ru" },
                           { text: "Weather", url: "http://weather.yahoo.ru" }
                       ]
                   }                    
               ];

               // Subscribe to the Menu instance"s "beforeRender" event
               oMenu.subscribe("beforeRender", function () {
         var nSubmenus = aSubmenuData.length,
           i;

                   if (this.getRoot() == this) {
           for (i = 0; i < nSubmenus; i++) {
                         this.getItem(i).cfg.setProperty("submenu", aSubmenuData[i]);
           }
                   }
               });

               /*
                    Call the "render" method with no arguments since the 
                    markup for this Menu instance is already exists in the page.
               */
               oMenu.render();
           
           });
       </script>   
   </head>
   <body class="yui-skin-sam" id="yahoo-com">

Example: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)

NOTE: This example demonstrates how to add animation effects to a menu with submenus built using JavaScript.

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.

<a class="yuimenuitemlabel" href="#communication">Communication</a>
<a class="yuimenuitemlabel" href="http://shopping.yahoo.ru">Shopping</a>
<a class="yuimenuitemlabel" href="http://entertainment.yahoo.ru">Entertainment</a>
<a class="yuimenuitemlabel" href="#">Information</a>

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.

   </body>

</html>

 </source>

Website Left Nav With Submenus From JavaScript (YUI Library)

   <source lang="html4strict">

<!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=utf-8">
       <title>Example: Website Left Nav With Submenus From JavaScript (YUI Library)</title>
       
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css">

       
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">

       <style type="text/css">
           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 {
               
               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.
     */
     #productsandservices .yuimenuitemlabel {
     
       _zoom: 1;
     
     }
     #productsandservices .yuimenu .yuimenuitemlabel {
       _zoom: normal;
     }
       </style>

       <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
       <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core.js"></script>

       <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>

       <script type="text/javascript">
           /*
                Initialize and render the Menu when its elements are ready 
                to be scripted.
           */
           YAHOO.util.Event.onContentReady("productsandservices", function () {
               /*
         Instantiate a Menu:  The first argument passed to the constructor
         is the id for the Menu element to be created, the second is an 
         object literal of configuration properties.
               */
               var oMenu = new YAHOO.widget.Menu("productsandservices", { 
                                                       position: "static", 
                                                       hidedelay:  750, 
                                                       lazyload: true });

               /*
                    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.ru" },
                           { text: "Alerts", url: "http://alerts.yahoo.ru" },
                           { text: "Avatars", url: "http://avatars.yahoo.ru" },
                           { text: "Groups", url: "http://groups.yahoo.ru " },
                           { text: "Internet Access", url: "http://promo.yahoo.ru/broadband" },
                           {
                               text: "PIM", 
                               submenu: { 
                                           id: "pim", 
                                           itemdata: [
                                               { text: "Yahoo! Mail", url: "http://mail.yahoo.ru" },
                                               { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.ru" },
                                               { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.ru" },
                                               { text: "Yahoo! Notepad", url: "http://notepad.yahoo.ru" }
                                           ] 
                                       }
                           
                           }, 
                           { text: "Member Directory", url: "http://members.yahoo.ru" },
                           { text: "Messenger", url: "http://messenger.yahoo.ru" },
                           { text: "Mobile", url: "http://mobile.yahoo.ru" },
                           { text: "Flickr Photo Sharing", url: "http://www.flickr.ru" },
                       ]
                   },
                   {
                       id: "shopping", 
                       itemdata: [
                           { text: "Auctions", url: "http://auctions.shopping.yahoo.ru" },
                           { text: "Autos", url: "http://autos.yahoo.ru" },
                           { text: "Classifieds", url: "http://classifieds.yahoo.ru" },
                           { text: "Flowers & Gifts", url: "http://shopping.yahoo.ru/b:Flowers%20%26%20Gifts:20146735" },
                           { text: "Real Estate", url: "http://realestate.yahoo.ru" },
                           { text: "Travel", url: "http://travel.yahoo.ru" },
                           { text: "Wallet", url: "http://wallet.yahoo.ru" },
                           { text: "Yellow Pages", url: "http://yp.yahoo.ru" }                    
                       ]    
                   },
                   
                   {
                       id: "entertainment", 
                       itemdata: [
                           { text: "Fantasy Sports", url: "http://fantasysports.yahoo.ru" },
                           { text: "Games", url: "http://games.yahoo.ru" },
                           { text: "Kids", url: "http://www.yahooligans.ru" },
                           { text: "Music", url: "http://music.yahoo.ru" },
                           { text: "Movies", url: "http://movies.yahoo.ru" },
                           { text: "Radio", url: "http://music.yahoo.ru/launchcast" },
                           { text: "Travel", url: "http://travel.yahoo.ru" },
                           { text: "TV", url: "http://tv.yahoo.ru" }              
                       ] 
                   },
                   
                   {
                       id: "information",
                       itemdata: [
                           { text: "Downloads", url: "http://downloads.yahoo.ru" },
                           { text: "Finance", url: "http://finance.yahoo.ru" },
                           { text: "Health", url: "http://health.yahoo.ru" },
                           { text: "Local", url: "http://local.yahoo.ru" },
                           { text: "Maps & Directions", url: "http://maps.yahoo.ru" },
                           { text: "My Yahoo!", url: "http://my.yahoo.ru" },
                           { text: "News", url: "http://news.yahoo.ru" },
                           { text: "Search", url: "http://search.yahoo.ru" },
                           { text: "Small Business", url: "http://smallbusiness.yahoo.ru" },
                           { text: "Weather", url: "http://weather.yahoo.ru" }
                       ]
                   }                    
               ];

               // Subscribe to the Menu instance"s "beforeRender" event
               oMenu.subscribe("beforeRender", function () {
         var nSubmenus = aSubmenuData.length,
           i;

                   if (this.getRoot() == this) {
           for (i = 0; i < nSubmenus; i++) {
                         this.getItem(i).cfg.setProperty("submenu", aSubmenuData[i]);
           }
                   }
               });
               
               /*
                    Call the "render" method with no arguments since the 
                    markup for this Menu instance is already exists in the page.
               */
               oMenu.render();
           
           });
       </script>   
   </head>
   <body class="yui-skin-sam" id="yahoo-com">

Example: Website Left Nav With Submenus From JavaScript (YUI Library)

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.

<a class="yuimenuitemlabel" href="#communication">Communication</a>
<a class="yuimenuitemlabel" href="http://shopping.yahoo.ru">Shopping</a>
<a class="yuimenuitemlabel" href="http://entertainment.yahoo.ru">Entertainment</a>
<a class="yuimenuitemlabel" href="#">Information</a>

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.

   </body>

</html>

 </source>

Website Top Nav With Submenus From JavaScript

   <source lang="html4strict">

<!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=utf-8">
       <title>Example: Website Top Nav With Submenus From JavaScript (YUI Library)</title>
       
       
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css">

       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">

       <style type="text/css">
           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;
           
           }
       </style>

       <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
       <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core.js"></script>

       <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>

       <script type="text/javascript">
           /*
                Initialize and render the MenuBar when its elements are ready 
                to be scripted.
           */
           YAHOO.util.Event.onContentReady("productsandservices", function () {
               /*
         Instantiate a MenuBar:  The first argument passed to the constructor
         is the id for the Menu element to be created, the second is an 
         object literal of configuration properties.
               */
               var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { 
                                                           autosubmenudisplay: true, 
                                                           hidedelay: 750, 
                                                           lazyload: true });
               /*
                    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.ru" },
                           { text: "Alerts", url: "http://alerts.yahoo.ru" },
                           { text: "Avatars", url: "http://avatars.yahoo.ru" },
                           { text: "Groups", url: "http://groups.yahoo.ru " },
                           { text: "Internet Access", url: "http://promo.yahoo.ru/broadband" },
                           {
                               text: "PIM", 
                               submenu: { 
                                           id: "pim", 
                                           itemdata: [
                                               { text: "Yahoo! Mail", url: "http://mail.yahoo.ru" },
                                               { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.ru" },
                                               { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.ru" },
                                               { text: "Yahoo! Notepad", url: "http://notepad.yahoo.ru" }
                                           ] 
                                       }
                           
                           }, 
                           { text: "Member Directory", url: "http://members.yahoo.ru" },
                           { text: "Messenger", url: "http://messenger.yahoo.ru" },
                           { text: "Mobile", url: "http://mobile.yahoo.ru" },
                           { text: "Flickr Photo Sharing", url: "http://www.flickr.ru" },
                       ]
                   },
                   {
                       id: "shopping", 
                       itemdata: [
                           { text: "Auctions", url: "http://auctions.shopping.yahoo.ru" },
                           { text: "Autos", url: "http://autos.yahoo.ru" },
                           { text: "Classifieds", url: "http://classifieds.yahoo.ru" },
                           { text: "Flowers & Gifts", url: "http://shopping.yahoo.ru/b:Flowers%20%26%20Gifts:20146735" },
                           { text: "Real Estate", url: "http://realestate.yahoo.ru" },
                           { text: "Travel", url: "http://travel.yahoo.ru" },
                           { text: "Wallet", url: "http://wallet.yahoo.ru" },
                           { text: "Yellow Pages", url: "http://yp.yahoo.ru" }                    
                       ]    
                   },
                   
                   {
                       id: "entertainment", 
                       itemdata: [
                           { text: "Fantasy Sports", url: "http://fantasysports.yahoo.ru" },
                           { text: "Games", url: "http://games.yahoo.ru" },
                           { text: "Kids", url: "http://www.yahooligans.ru" },
                           { text: "Music", url: "http://music.yahoo.ru" },
                           { text: "Movies", url: "http://movies.yahoo.ru" },
                           { text: "Radio", url: "http://music.yahoo.ru/launchcast" },
                           { text: "Travel", url: "http://travel.yahoo.ru" },
                           { text: "TV", url: "http://tv.yahoo.ru" }              
                       ] 
                   },
                   
                   {
                       id: "information",
                       itemdata: [
                           { text: "Downloads", url: "http://downloads.yahoo.ru" },
                           { text: "Finance", url: "http://finance.yahoo.ru" },
                           { text: "Health", url: "http://health.yahoo.ru" },
                           { text: "Local", url: "http://local.yahoo.ru" },
                           { text: "Maps & Directions", url: "http://maps.yahoo.ru" },
                           { text: "My Yahoo!", url: "http://my.yahoo.ru" },
                           { text: "News", url: "http://news.yahoo.ru" },
                           { text: "Search", url: "http://search.yahoo.ru" },
                           { text: "Small Business", url: "http://smallbusiness.yahoo.ru" },
                           { text: "Weather", url: "http://weather.yahoo.ru" }
                       ]
                   }                    
               ];

               /*
                    Subscribe to the "beforerender" event, adding a submenu 
                    to each of the items in the MenuBar instance.
               */
               oMenuBar.subscribe("beforeRender", function () {
         var nSubmenus = aSubmenuData.length,
           i;

                   if (this.getRoot() == this) {
           for (i = 0; i < nSubmenus; i++) {
                         this.getItem(i).cfg.setProperty("submenu", aSubmenuData[i]);
           }
                   }
               });

               /*
                    Call the "render" method with no arguments since the 
                    markup for this MenuBar instance is already exists in 
                    the page.
               */
               oMenuBar.render();         
           
           });
       </script>
   </head>
   <body class="yui-skin-sam" id="yahoo-com">

Example: Website Top Nav With Submenus From JavaScript (YUI Library)

<a class="yuimenubaritemlabel" href="#communication">Communication</a>
<a class="yuimenubaritemlabel" href="http://shopping.yahoo.ru">Shopping</a>
<a class="yuimenubaritemlabel" href="http://entertainment.yahoo.ru">Entertainment</a>
<a class="yuimenubaritemlabel" href="#">Information</a>

NOTE: This example demonstrates how to add submenus via JavaScript to a menu bar built from existing markup. The menu bar is constructed using markup and enables the user to navigate to different landing pages for each product category. If JavaScript is enabled, submenus are constructed and appended to the items in the menu bar. This allows the user to skip the product landing pages and proceed directly to a given property.

                       <form name="example">
                           <select name="test">
                               <option value="one">One</option>
                               <option value="two">Two</option>
                               <option value="three">Three</option>                                
                           </select>
                       </form>

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.

   </body>

</html>

 </source>

JavaScript DHTML/YUI Library/Layout

Содержание

Full Page Layout

Layout components as border layout

Nested Layout - Example

Using a Layout with Grids CSS

YUI: CSS Grid Builder

Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)

Example: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)

Website Left Nav With Submenus From JavaScript (YUI Library)

Example: Website Left Nav With Submenus From JavaScript (YUI Library)

Website Top Nav With Submenus From JavaScript

Example: Website Top Nav With Submenus From JavaScript (YUI Library)

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты