JavaScript DHTML/YUI Library/Menu MenuItem
Содержание
- 1 Add menuitem separator to menu
- 2 Add shortcut key to menuitem
- 3 Add submenu to menuitem
- 4 Create a Menu instance using existing markup on the page.
- 5 Basic Menu From Markup
- 6 Basic Menu From JavaScript
- 7 Grouped Menu Items Using JavaScript
- 8 Grouped Menu Items Using Markup
- 9 Grouped Menu Items With Titles From JavaScript
- 10 Grouped Menu Items With Titles From Markup
- 11 Handling Menu Click Events
- 12 Listening For Menu Events
- 13 Multi-tiered Menu From Markup
- 14 Multi-tiered Menu From JavaScript
- 15 "toolbar" */ .ytoolbar { border-top-width: 2px; border-top-color: #ddd; border-top-style: solid; background-color: #ccc; position: absolute; bottom: 0; width: 100%; } /* Style the "Yahoo!" anchor to look like a button */ .ytoolbar #yahoo { border-width: 2px; border-color: #ddd #666 #666 #ddd; border-style: solid; float: left; *float: none; /* For IE */ *display: inline-block; /* For IE */ padding: 4px 12px 4px 28px; margin: 4px; background-color: #ccc; color: #000; text-decoration: none; background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) 10% 50% no-repeat; } .ytoolbar #yahoo: active { border-color: #666 #ddd #ddd #666; } /* Define a new style for each menu */ .yui-skin-sam .yuimenu { line-height: 2; /* ~24px */ *line-height: 1.9; /* For IE */ } .yui-skin-sam .yuimenu .bd { border-width: 2px; border-color: #ddd #666 #666 #ddd; border-style: solid; background-color: #ccc; } /* Define a new style for each MenuItem instance. */ .yui-skin-sam #yproducts li.yuimenuitem .yuimenuitemlabel { background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) no-repeat 4px; padding: 0 20px 0 24px; } .yui-skin-sam #yproducts li.yuimenuitem { /* For IE 7 Quirks and IE 6 Strict Mode and Quirks Mode: Used to collapse superfluous white space between elements that is triggered by the "display" property of the <a> elements being set to "block." */ _border-bottom: solid 1px #ccc; } /* Define a new style for a MenuItem instance"s "selected" state. */ .yui-skin-sam #yproducts .yuimenuitem-selected { background-color: #039; } .yui-skin-sam #yproducts .yuimenuitemlabel-selected { color: #fff; } /* Add unique icons to some of the MenuItem instances. */ .yui-skin-sam #yproducts li#help .yuimenuitemlabel { background-image: url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/hlp16_1.gif); } .yui-skin-sam #yproducts li#search .yuimenuitemlabel { background-image: url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/srch16_1.gif); } .yui-skin-sam #yproducts li#goto .yuimenuitemlabel { background-image: url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/arorght16_1.gif); } </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.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("yproducts", function () { var oPanel = new YAHOO.widget.Panel( "exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zindex: 1 } ); oPanel.setHeader("OS-Style Programs Menu Example"); oPanel.setBody("This example demonstrates how to transform existing markup on the page into an operating-system-like menu."); oPanel.render(document.body); /* Apply the "ytoolbar" class to the <H1> so that it is styled like an application toolbar. */ var oH1 = document.getElementsByTagName("h1")[0]; YAHOO.util.Dom.addClass(oH1, "ytoolbar"); /* 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("yproducts", { zindex: 2 }); /* Aligns the bottom-left corner of Menu instance to the top-left corner of the Yahoo! anchor element that is its context element. */ function positionMenu() { oMenu.align("bl", "tl"); } // "click" handler for the "Go to..." menu item function onGotoClick() { var sURL = window.prompt("Enter a URL: ",""); if (sURL && sURL.length > 0) { document.location = sURL; } } /* Add an additional item to the Menu instance. Unlike the other items in the Menu instance, this item is added via script since its functionality requires JavaScript. */ oMenu.addItem({ text: "Go to...", id: "goto", onclick: { fn: onGotoClick } }); /* "beforeShow" event listener - used to position the root Menu instance when it is displayed. */ oMenu.subscribe("beforeShow", function () { if (this.getRoot() == this) { positionMenu(); } }); /* Call the "render" method with no arguments since the markup for this menu already exists in the pages. */ oMenu.render(); /* Position the bottom-left corner of the root menu to the top-left corner of the "Yahoo!" anchor element. */ oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]); // "click" event handler for "Yahoo!" button function onYahooClick(p_oEvent) { // Position and display the menu positionMenu(); oMenu.show(); // Stop propagation and prevent the default "click" behavior YAHOO.util.Event.stopEvent(p_oEvent); } /* Assign a "click" event handler to the "Yahoo!" anchor that will display the menu */ YAHOO.util.Event.addListener("yahoo", "click", onYahooClick); /* Add a "resize" event handler for the window that will reposition the H1 "toolbar" to the bottom of the viewport */ YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionMenu); }); </script> </head> <body class="yui-skin-sam"> <h1><a id="yahoo" href="http://www.yahoo.ru">Yahoo!</a>
- 16 MenuItem Configuration Properties
- 17 Setting Menu Configuration Properties At Runtime
<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: Application Menubar (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.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">
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance"s
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</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.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 the page"s DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "Yahoo!",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
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 oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
// Add a "show" event listener for each submenu.
function onSubmenuShow() {
var oIFrame,
oElement,
nOffsetWidth;
// Keep the left-most submenu against the left edge of the browser viewport
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
oIFrame = this.iframe;
if (oIFrame) {
YAHOO.util.Dom.setX(oIFrame, 0);
}
this.cfg.setProperty("x", 0, true);
}
/*
Need to set the width for submenus of submenus in IE to prevent the mouseout
event from firing prematurely when the user mouses off of a MenuItem"s
text node.
*/
if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<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: Application Menubar (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.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">
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance"s
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</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.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 the page"s DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "Yahoo!",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
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 oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
// Add a "show" event listener for each submenu.
function onSubmenuShow() {
var oIFrame,
oElement,
nOffsetWidth;
// Keep the left-most submenu against the left edge of the browser viewport
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
oIFrame = this.iframe;
if (oIFrame) {
YAHOO.util.Dom.setX(oIFrame, 0);
}
this.cfg.setProperty("x", 0, true);
}
/*
Need to set the width for submenus of submenus in IE to prevent the mouseout
event from firing prematurely when the user mouses off of a MenuItem"s
text node.
*/
if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<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: Application Menubar (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.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">
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance"s
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</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.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 the page"s DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "Yahoo!",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
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 oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
// Add a "show" event listener for each submenu.
function onSubmenuShow() {
var oIFrame,
oElement,
nOffsetWidth;
// Keep the left-most submenu against the left edge of the browser viewport
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
oIFrame = this.iframe;
if (oIFrame) {
YAHOO.util.Dom.setX(oIFrame, 0);
}
this.cfg.setProperty("x", 0, true);
}
/*
Need to set the width for submenus of submenus in IE to prevent the mouseout
event from firing prematurely when the user mouses off of a MenuItem"s
text node.
*/
if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Create a Menu instance using existing markup on the page.
<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>Basic Menu From Markup</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
</head> <body class=" yui-skin-sam">
Basic Menu From Markup
This example demonstrates how to create a Menu instance using existing markup on the page.
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
/*
Initialize and render the Menu when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("basicmenu", 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("basicmenu", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Create a Menu instance using nothing but 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>Basic Menu From JavaScript</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
</head> <body class=" yui-skin-sam">
Basic Menu From JavaScript
This example demonstrates how to create a Menu instance using nothing but JavaScript.
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", 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("basicmenu", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
{ 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" }
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<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: Application Menubar (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.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">
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance"s
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</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.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 the page"s DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "Yahoo!",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
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 oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
// Add a "show" event listener for each submenu.
function onSubmenuShow() {
var oIFrame,
oElement,
nOffsetWidth;
// Keep the left-most submenu against the left edge of the browser viewport
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
oIFrame = this.iframe;
if (oIFrame) {
YAHOO.util.Dom.setX(oIFrame, 0);
}
this.cfg.setProperty("x", 0, true);
}
/*
Need to set the width for submenus of submenus in IE to prevent the mouseout
event from firing prematurely when the user mouses off of a MenuItem"s
text node.
*/
if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Grouped Menu Items Using 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>Grouped Menu Items Using JavaScript</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
</head> <body class=" yui-skin-sam">
Grouped Menu Items Using JavaScript
This example demonstrates how to group MenuItem instances.
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", 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("menuwithgroups", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
[
{ 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: "Yahoo! Local", url: "http://local.yahoo.ru" },
{ text: "Yahoo! Maps", url: "http://maps.yahoo.ru" },
{ text: "Yahoo! Travel", url: "http://travel.yahoo.ru" },
{ text: "Yahoo! Shopping", url: "http://shopping.yahoo.ru" }
],
[
{ text: "Yahoo! Messenger", url: "http://messenger.yahoo.ru" },
{ text: "Yahoo! 360", url: "http://360.yahoo.ru" },
{ text: "Yahoo! Groups", url: "http://groups.yahoo.ru" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.ru" }
]
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Grouped Menu Items Using Markup
<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>Grouped Menu Items Using Markup</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
</head> <body class=" yui-skin-sam">
Grouped Menu Items Using Markup
This example demonstrates how to group MenuItem instances.
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
// Instantiate and render the menu when it is available in the DOM
YAHOO.util.Event.onContentReady("menuwithgroups", 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("menuwithgroups", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Grouped Menu Items With Titles 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>Grouped Menu Items With Titles From JavaScript</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
</head> <body class=" yui-skin-sam">
Grouped Menu Items With Titles From JavaScript
This example demonstrates how to title groups of MenuItem instances.
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", 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("menuwithgroups", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
[
{ 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: "Yahoo! Local", url: "http://local.yahoo.ru" },
{ text: "Yahoo! Maps", url: "http://maps.yahoo.ru" },
{ text: "Yahoo! Travel", url: "http://travel.yahoo.ru" },
{ text: "Yahoo! Shopping", url: "http://shopping.yahoo.ru" }
],
[
{ text: "Yahoo! Messenger", url: "http://messenger.yahoo.ru" },
{ text: "Yahoo! 360", url: "http://360.yahoo.ru" },
{ text: "Yahoo! Groups", url: "http://groups.yahoo.ru" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.ru" }
]
]);
// Add the title for each group of menu items
oMenu.setItemGroupTitle("Yahoo! PIM", 0);
oMenu.setItemGroupTitle("Yahoo! Search", 1);
oMenu.setItemGroupTitle("Yahoo! Communications", 2);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Grouped Menu Items With Titles From Markup
<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>Grouped Menu Items With Titles From Markup</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
</head> <body class=" yui-skin-sam">
Grouped Menu Items With Titles From Markup
This example demonstrates how to title groups of MenuItem instances.
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
// Instantiate and render the menu when it is available in the DOM
YAHOO.util.Event.onContentReady("menuwithgroups", 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("menuwithgroups", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Handling Menu Click Events
<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>Handling Menu Click Events</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
</head> <body class=" yui-skin-sam">
Handling Menu Click Events
This example demonstrates how to register a "click" event handler for a MenuItem instance.
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
"click" event handler for the Menu instance - used to keep the Menu
instance visible when clicked, since by default a Menu instance
will hide when clicked.
*/
function onMenuClick(p_sType, p_aArgs, p_oValue) {
this.show();
}
/*
"click" event handler for each MenuItem instance - used to log
info about the MenuItem that was clicked.
*/
function onMenuItemClick(p_sType, p_aArgs, p_oValue) {
YAHOO.log(("index: " + this.index +
", text: " + this.cfg.getProperty("text") +
", value: " + p_oValue), "info", "example9");
}
/*
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("mymenu", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
// Register a "click" event handler for the first item.
{ text: "Item One", onclick: { fn: onMenuItemClick } },
/*
Register a "click" event handler for the second item,
passing a string arguemnt ("foo") to the event handler.
*/
{ text: "Item Two", onclick: { fn: onMenuItemClick, obj: "foo" } },
/*
Register a "click" event handler for the third item and
passing and array as an argument to the event handler.
*/
{ text: "Item Three", onclick: { fn: onMenuItemClick, obj: ["foo", "bar"] } }
]);
oMenu.subscribe("click", onMenuClick);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Icon on a Menu bar
<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: Application Menubar (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.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">
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance"s
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</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.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 the page"s DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "Yahoo!",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
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 oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
// Add a "show" event listener for each submenu.
function onSubmenuShow() {
var oIFrame,
oElement,
nOffsetWidth;
// Keep the left-most submenu against the left edge of the browser viewport
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
oIFrame = this.iframe;
if (oIFrame) {
YAHOO.util.Dom.setX(oIFrame, 0);
}
this.cfg.setProperty("x", 0, true);
}
/*
Need to set the width for submenus of submenus in IE to prevent the mouseout
event from firing prematurely when the user mouses off of a MenuItem"s
text node.
*/
if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Listening For Menu Events
<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>Listening For Menu Events</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/*
Overrides for the ".example-container a:visited" in the
the yui.css file.
*/
div.yuimenu a.yuimenuitemlabel-disabled:visited {
color: #A6A6A6;
}
</style>
</head> <body class=" yui-skin-sam">
Listening For Menu Events
This example demonstrates how to listen for DOM-related events. Interaction with the Menu will result in event information being output to the console. Please note: Disabled MenuItem instances do not fire DOM events. This is demonstrated with the MenuItem named "MenuItem 2."
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Generic event handler used to log info about the DOM events for
the Menu instance.
*/
function onMenuEvent(p_sType, p_aArgs) {
var oDOMEvent = p_aArgs[0];
YAHOO.log(("Id: " + this.id + ", " +
"Custom Event Type: " + p_sType + ", " +
"DOM Event Type: " + oDOMEvent.type),
"info", "example10");
}
/*
Generic event handler used to log info about the DOM events for
each MenuItem instance.
*/
function onMenuItemEvent(p_sType, p_aArgs) {
var oDOMEvent = p_aArgs[0];
YAHOO.log(("Index: " + this.index + ", " +
"Group Index: " + this.groupIndex + ", " +
"Custom Event Type: " + p_sType + ", " +
"DOM Event Type: " + oDOMEvent.type
), "info", "example10");
}
/*
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("basicmenu", { fixedcenter: true });
// Subscribe to the Menu instance"s "itemAdded" event
oMenu.subscribe("itemAdded", function (p_sType, p_aArgs) {
var oMenuItem = p_aArgs[0];
/*
Subscribe to each MenuItem instance"s DOM events as they
are added to the Menu instance.
*/
oMenuItem.subscribe("mouseover", onMenuItemEvent);
oMenuItem.subscribe("mouseout", onMenuItemEvent);
oMenuItem.subscribe("mousedown", onMenuItemEvent);
oMenuItem.subscribe("mouseup", onMenuItemEvent);
oMenuItem.subscribe("click", onMenuItemEvent);
oMenuItem.subscribe("keydown", onMenuItemEvent);
oMenuItem.subscribe("keyup", onMenuItemEvent);
oMenuItem.subscribe("keypress", onMenuItemEvent);
});
// Subscribe to every DOM event for the Menu instance.
oMenu.subscribe("mouseover", onMenuEvent);
oMenu.subscribe("mouseout", onMenuEvent);
oMenu.subscribe("mousedown", onMenuEvent);
oMenu.subscribe("mouseup", onMenuEvent);
oMenu.subscribe("click", onMenuEvent);
oMenu.subscribe("keydown", onMenuEvent);
oMenu.subscribe("keyup", onMenuEvent);
oMenu.subscribe("keypress", onMenuEvent);
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
"MenuItem 0",
"MenuItem 1",
/*
Add a disabled menu item to demonstrate that disabled
items do not respond to DOM events.
*/
{ text: "MenuItem 2", disabled: true },
"MenuItem 3",
"MenuItem 4"
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<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>Multi-tiered Menu From Markup</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
</head> <body class=" yui-skin-sam">
Multi-tiered Menu From Markup
This example demonstrates how to create a multi-tiered menu using existing markup on the page.
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
// Instantiate and render the menu when it is available in the DOM
YAHOO.util.Event.onContentReady("productsandservices", function () {
/*
Instantiate the menu and corresponding submenus. The first argument passed
to the constructor is the id of the element in the DOM that represents
the menu; the second is an object literal representing a set of
configuration properties for the menu.
*/
var oMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<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>Multi-tiered Menu From JavaScript</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
</head> <body class=" yui-skin-sam">
Multi-tiered Menu From JavaScript
This example demonstrates how to create a multi-tiered menu using nothing but JavaScript.
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Define an array of object literals, each containing
the configuration properties necessary to create a MenuItem and
its corresponding submenu.
*/
var aItems = [
{
text: "Communication",
url: "#communication",
submenu: {
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",
url: "#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" }
]
}
},
{
text: "Shopping",
url: "http://shopping.yahoo.ru",
submenu: {
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" }
]
}
},
{
text: "Entertainment",
url: "http://entertainment.yahoo.ru",
submenu: {
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" }
]
}
},
{
text: "Information",
url: "#information",
submenu: {
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" }
]
}
}
];
/*
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", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems(aItems);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
OS-Style Programs Menu
<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: OS-Style Programs Menu (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.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">
<style type="text/css">
html {
overflow: hidden;
background-color: #dfb8df;
}
h1 {
font-weight: bold;
}
body {
overflow: hidden;
}
/* Define a style for the - <a href="#">Products</a>
- <a href="http://mail.yahoo.ru">Yahoo! Mail</a>
- <a href="http://addressbook.yahoo.ru">Yahoo! Address Book</a>
- <a href="http://calendar.yahoo.ru">Yahoo! Calender</a>
- <a href="http://notepad.yahoo.ru">Yahoo! Notepad</a>
- <a href="http://messenger.yahoo.ru">Yahoo! Messenger</a>
- <a href="http://360.yahoo.ru">Yahoo! 360</a>
- <a href="http://www.flickr.ru">Flickr Photo Sharing</a>
- <a href="http://finance.yahoo.ru/">Finance</a>
- <a href="http://entertainment.yahoo.ru/">Entertainment</a>
- <a href="http://music.yahoo.ru/">Yahoo! Music</a>
- <a href="http://movies.yahoo.ru/">Yahoo! Movies</a>
- <a href="http://tv.yahoo.ru/">Yahoo! TV</a>
- <a href="http://search.yahoo.ru/">Search</a>
- <a href="http://images.search.yahoo.ru/images">Yahoo! Image Search</a>
- <a href="http://dir.yahoo.ru/">Yahoo! Directory</a>
- <a href="http://local.yahoo.ru">Yahoo! Local</a>
- <a href="http://news.search.yahoo.ru/news">Yahoo! News Search</a>
- <a href="http://search.yahoo.ru/people">Yahoo! People Search</a>
- <a href="http://search.yahoo.ru/products">Yahoo! Product Search</a>
- <a href="http://help.yahoo.ru/">Help</a>
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Set MenuItem configuration properties when adding items to a Menu instance.
<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>MenuItem Configuration Properties</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
.yui-skin-sam .yuimenuitemlabel .helptext {
margin-left: 20em;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/*
Overrides for the ".example-container a:visited" in the
the yui.css file.
*/
div.yuimenu a.yuimenuitemlabel-disabled:visited {
color: #A6A6A6;
}
</style>
</head> <body class=" yui-skin-sam">
MenuItem Configuration Properties
This example demonstrates how to set MenuItem configuration properties when adding items to a Menu instance.
Note: By default clicking outside of a Menu instance will hide it. Additionally, MenuItem instances without a submenu or a URL to navigate to will hide their parent Menu instance when clicked. Click the "Show Menu" button below to make the Menu instance visible if it is hidden.
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", 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("basicmenu", { fixedcenter: true } );
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
{ text: "Selected MenuItem", selected: true },
{ text: "Disabled MenuItem", disabled: true },
{ text: "MenuItem With A URL", url: "http://www.yahoo.ru" },
{ text: "Checked MenuItem", checked: true }
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Setting Menu Configuration Properties At Runtime
<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>Setting Menu Configuration Properties At Runtime</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;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/*
Overrides for the ".example-container a:visited" in the
the yui.css file.
*/
div.yuimenu a.yuimenuitemlabel-disabled:visited {
color: #A6A6A6;
}
</style>
</head> <body class=" yui-skin-sam">
Setting Menu Configuration Properties At Runtime
This example demonstrates how to set MenuItem configuration properties at runtime and listen for the changes through the "configChanged" event.
Note: By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate to will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
"configChange" event handler for each MenuItem instance - used
to log info about the configuration property that was changed.
*/
function onMenuItemConfigChange(p_sType, p_aArgs) {
var sPropertyName = p_aArgs[0][0],
sPropertyValue = p_aArgs[0][1];
YAHOO.log(("Index: " + this.index + ", " +
"Group Index: " + this.groupIndex + ", " +
"Custom Event Type: " + p_sType + ", " +
"\"" + sPropertyName + "\" Property Set To: \""
+ sPropertyValue + "\""), "info", "example12");
}
/*
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("basicmenu", { fixedcenter: true });
/*
Subscribe to the Menu instance"s "itemAdded" event in order to
subscribe to the "configChange" event handler of each MenuItem
instance"s configuration object.
*/
oMenu.subscribe("itemAdded", function (p_sType, p_aArgs) {
var oMenuItem = p_aArgs[0];
/*
Subscribe to the "configChange" event handler of each MenuItem
instance"s configuration object.
*/
oMenuItem.cfg.subscribe("configChanged", onMenuItemConfigChange);
});
/*
Add items to the Menu instance by passing an array of strings
(each of which represents the "text" configuration property of a
YAHOO.widget.MenuItem instance) to the "addItems" method.
*/
oMenu.addItems([
"Selected MenuItem",
"Disabled MenuItem",
"MenuItem With A URL",
"Checked MenuItem"
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
/*
Set a configuration property of each MenuItem to trigger the firing
of its configuration object"s "configChanged" event.
*/
oMenu.getItem(0).cfg.setProperty("selected", true);
oMenu.getItem(1).cfg.setProperty("disabled", true);
oMenu.getItem(2).cfg.setProperty("url", "http://www.yahoo.ru");
oMenu.getItem(3).cfg.setProperty("checked", true);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script> <button id="menutoggle" type="button">Show Menu</button>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
![15 "toolbar" */ .ytoolbar { border-top-width: 2px; border-top-color: #ddd; border-top-style: solid; background-color: #ccc; position: absolute; bottom: 0; width: 100%; } /* Style the "Yahoo!" anchor to look like a button */ .ytoolbar #yahoo { border-width: 2px; border-color: #ddd #666 #666 #ddd; border-style: solid; float: left; *float: none; /* For IE */ *display: inline-block; /* For IE */ padding: 4px 12px 4px 28px; margin: 4px; background-color: #ccc; color: #000; text-decoration: none; background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) 10% 50% no-repeat; } .ytoolbar #yahoo: active { border-color: #666 #ddd #ddd #666; } /* Define a new style for each menu */ .yui-skin-sam .yuimenu { line-height: 2; /* ~24px */ *line-height: 1.9; /* For IE */ } .yui-skin-sam .yuimenu .bd { border-width: 2px; border-color: #ddd #666 #666 #ddd; border-style: solid; background-color: #ccc; } /* Define a new style for each MenuItem instance. */ .yui-skin-sam #yproducts li.yuimenuitem .yuimenuitemlabel { background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) no-repeat 4px; padding: 0 20px 0 24px; } .yui-skin-sam #yproducts li.yuimenuitem { /* For IE 7 Quirks and IE 6 Strict Mode and Quirks Mode: Used to collapse superfluous white space between elements that is triggered by the "display" property of the <a> elements being set to "block." */ _border-bottom: solid 1px #ccc; } /* Define a new style for a MenuItem instance"s "selected" state. */ .yui-skin-sam #yproducts .yuimenuitem-selected { background-color: #039; } .yui-skin-sam #yproducts .yuimenuitemlabel-selected { color: #fff; } /* Add unique icons to some of the MenuItem instances. */ .yui-skin-sam #yproducts li#help .yuimenuitemlabel { background-image: url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/hlp16_1.gif); } .yui-skin-sam #yproducts li#search .yuimenuitemlabel { background-image: url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/srch16_1.gif); } .yui-skin-sam #yproducts li#goto .yuimenuitemlabel { background-image: url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/arorght16_1.gif); } </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.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("yproducts", function () { var oPanel = new YAHOO.widget.Panel( "exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zindex: 1 } ); oPanel.setHeader("OS-Style Programs Menu Example"); oPanel.setBody("This example demonstrates how to transform existing markup on the page into an operating-system-like menu."); oPanel.render(document.body); /* Apply the "ytoolbar" class to the <H1> so that it is styled like an application toolbar. */ var oH1 = document.getElementsByTagName("h1")[0]; YAHOO.util.Dom.addClass(oH1, "ytoolbar"); /* 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("yproducts", { zindex: 2 }); /* Aligns the bottom-left corner of Menu instance to the top-left corner of the Yahoo! anchor element that is its context element. */ function positionMenu() { oMenu.align("bl", "tl"); } // "click" handler for the "Go to..." menu item function onGotoClick() { var sURL = window.prompt("Enter a URL: ",""); if (sURL && sURL.length > 0) { document.location = sURL; } } /* Add an additional item to the Menu instance. Unlike the other items in the Menu instance, this item is added via script since its functionality requires JavaScript. */ oMenu.addItem({ text: "Go to...", id: "goto", onclick: { fn: onGotoClick } }); /* "beforeShow" event listener - used to position the root Menu instance when it is displayed. */ oMenu.subscribe("beforeShow", function () { if (this.getRoot() == this) { positionMenu(); } }); /* Call the "render" method with no arguments since the markup for this menu already exists in the pages. */ oMenu.render(); /* Position the bottom-left corner of the root menu to the top-left corner of the "Yahoo!" anchor element. */ oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]); // "click" event handler for "Yahoo!" button function onYahooClick(p_oEvent) { // Position and display the menu positionMenu(); oMenu.show(); // Stop propagation and prevent the default "click" behavior YAHOO.util.Event.stopEvent(p_oEvent); } /* Assign a "click" event handler to the "Yahoo!" anchor that will display the menu */ YAHOO.util.Event.addListener("yahoo", "click", onYahooClick); /* Add a "resize" event handler for the window that will reposition the H1 "toolbar" to the bottom of the viewport */ YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionMenu); }); </script> </head> <body class="yui-skin-sam"> <h1><a id="yahoo" href="http://www.yahoo.ru">Yahoo!</a>](#.22toolbar.22_.2A.2F.0A_.ytoolbar_.7B.0A_border-top-width:_2px.3B.0A_border-top-color:_.23ddd.3B.0A_border-top-style:_solid.3B.0A_background-color:_.23ccc.3B.0A_position:_absolute.3B.0A_bottom:_0.3B.0A_width:_100.25.3B.0A_.0A_.7D.0A.0A_.2F.2A_Style_the_.22Yahoo.21.22_anchor_to_look_like_a_button_.2A.2F.0A_.ytoolbar_.23yahoo_.7B.0A_.0A_border-width:_2px.3B.0A_border-color:_.23ddd_.23666_.23666_.23ddd.3B.0A_border-style:_solid.3B.0A_float:_left.3B.0A_.2Afloat:_none.3B_.2F.2A_For_IE_.2A.2F.0A_.2Adisplay:_inline-block.3B_.2F.2A_For_IE_.2A.2F.0A_padding:_4px_12px_4px_28px.3B.0A_margin:_4px.3B.0A_background-color:_.23ccc.3B.0A_color:_.23000.3B.0A_text-decoration:_none.3B.0A_background:_url.28http:.2F.2Fus.i1.yimg.ru.2Fus.yimg.ru.2Fi.2Fus.2Fnt.2Fb.2Fpurpley.1.0.gif.29_10.25_50.25_no-repeat.3B.0A_.0A_.7D.0A_.ytoolbar_.23yahoo:_active_.7B.0A_border-color:_.23666_.23ddd_.23ddd_.23666.3B.0A_.0A_.7D.0A.0A_.2F.2A_Define_a_new_style_for_each_menu_.2A.2F.0A_.yui-skin-sam_.yuimenu_.7B.0A_.0A_line-height:_2.3B_.2F.2A_.7E24px_.2A.2F.0A_.2Aline-height:_1.9.3B_.2F.2A_For_IE_.2A.2F.0A_.0A_.7D.0A_.yui-skin-sam_.yuimenu_.bd_.7B.0A_border-width:_2px.3B.0A_border-color:_.23ddd_.23666_.23666_.23ddd.3B.0A_border-style:_solid.3B.0A_background-color:_.23ccc.3B.0A_.0A_.7D.0A.0A_.2F.2A_Define_a_new_style_for_each_MenuItem_instance._.2A.2F.0A_.yui-skin-sam_.23yproducts_li.yuimenuitem_.yuimenuitemlabel_.7B.0A_background:_url.28http:.2F.2Fus.i1.yimg.ru.2Fus.yimg.ru.2Fi.2Fus.2Fnt.2Fb.2Fpurpley.1.0.gif.29_no-repeat_4px.3B.0A_padding:_0_20px_0_24px.3B.0A_.7D.0A_.yui-skin-sam_.23yproducts_li.yuimenuitem_.7B.0A_.0A_.2F.2A.0A_For_IE_7_Quirks_and_IE_6_Strict_Mode_and_Quirks_Mode:.0A_Used_to_collapse_superfluous_white_space_between_.0A_elements_that_is_triggered_by_the_.22display.22_property_of_the.0A_.3Ca.3E_elements_being_set_to_.22block..22.0A_.2A.2F.0A_.0A_border-bottom:_solid_1px_.23ccc.3B.0A_.0A_.7D.0A.0A_.2F.2A_Define_a_new_style_for_a_MenuItem_instance.22s_.22selected.22_state._.2A.2F.0A_.yui-skin-sam_.23yproducts_.yuimenuitem-selected_.7B.0A_background-color:_.23039.3B.0A_.7D.0A_.yui-skin-sam_.23yproducts_.yuimenuitemlabel-selected_.7B.0A_color:_.23fff.3B.0A_.7D.0A_.0A_.2F.2A_Add_unique_icons_to_some_of_the_MenuItem_instances._.2A.2F.0A_.yui-skin-sam_.23yproducts_li.23help_.yuimenuitemlabel_.7B.0A_background-image:_url.28http:.2F.2Fus.i1.yimg.ru.2Fus.yimg.ru.2Fi.2Fnt.2Fic.2Fut.2Fbsc.2Fhlp16_1.gif.29.3B.0A_.0A_.7D.0A_.yui-skin-sam_.23yproducts_li.23search_.yuimenuitemlabel_.7B.0A_background-image:_url.28http:.2F.2Fus.i1.yimg.ru.2Fus.yimg.ru.2Fi.2Fnt.2Fic.2Fut.2Fbsc.2Fsrch16_1.gif.29.3B.0A_.0A_.7D.0A_.yui-skin-sam_.23yproducts_li.23goto_.yuimenuitemlabel_.7B.0A_background-image:_url.28http:.2F.2Fus.i1.yimg.ru.2Fus.yimg.ru.2Fi.2Fnt.2Fic.2Fut.2Fbsc.2Farorght16_1.gif.29.3B.0A_.7D.0A_.3C.2Fstyle.3E.0A_.0A_.3Cscript_type.3D.22text.2Fjavascript.22_src.3D.22yui_2.7.0b-lib.2Futilities.2Futilities.js.22.3E.3C.2Fscript.3E.0A_.3Cscript_type.3D.22text.2Fjavascript.22_src.3D.22yui_2.7.0b-lib.2Fcontainer.2Fcontainer.js.22.3E.3C.2Fscript.3E.0A.0A_.0A_.3Cscript_type.3D.22text.2Fjavascript.22_src.3D.22yui_2.7.0b-lib.2Fmenu.2Fmenu.js.22.3E.3C.2Fscript.3E.0A.0A_.0A_.3Cscript_type.3D.22text.2Fjavascript.22.3E.0A_.2F.2A.0A_Initialize_and_render_the_MenuBar_when_its_elements_are_ready_.0A_to_be_scripted..0A_.2A.2F.0A_YAHOO.util.Event.onContentReady.28.22yproducts.22.2C_function_.28.29_.7B.0A_var_oPanel_.3D_new_YAHOO.widget.Panel.28.0A_.22exampleinfo.22.2C_.0A_.7B_.0A_constraintoviewport:_true.2C.0A_fixedcenter:_true.2C.0A_width:_.22400px.22.2C.0A_zindex:_1.0A_.7D.0A_.29.3B.0A_oPanel.setHeader.28.22OS-Style_Programs_Menu_Example.22.29.3B.0A_oPanel.setBody.28.22This_example_demonstrates_how_to_transform_existing_markup_on_the_page_into_an_operating-system-like_menu..22.29.3B.0A_oPanel.render.28document.body.29.3B_.0A_.0A_.2F.2A.0A_Apply_the_.22ytoolbar.22_class_to_the_.3CH1.3E_so_that_it_is_styled_.0A_like_an_application_toolbar..0A_.2A.2F.0A_var_oH1_.3D_document.getElementsByTagName.28.22h1.22.29.5B0.5D.3B.0A_YAHOO.util.Dom.addClass.28oH1.2C_.22ytoolbar.22.29.3B.0A.0A_.2F.2A.0A_Instantiate_a_Menu:_The_first_argument_passed_to_the_.0A_constructor_is_the_id_of_the_element_in_the_page_.0A_representing_the_Menu.3B_the_second_is_an_object_literal_.0A_of_configuration_properties..0A_.2A.2F.0A_var_oMenu_.3D_new_YAHOO.widget.Menu.28.22yproducts.22.2C_.7B_zindex:_2_.7D.29.3B.0A.0A_.2F.2A.0A_Aligns_the_bottom-left_corner_of_Menu_instance_to_the_.0A_top-left_corner_of_the_Yahoo.21_anchor_element_that_is_.0A_its_context_element..0A_.2A.2F.0A_function_positionMenu.28.29_.7B.0A_oMenu.align.28.22bl.22.2C_.22tl.22.29.3B.0A_.7D.0A.0A_.2F.2F_.22click.22_handler_for_the_.22Go_to....22_menu_item.0A_.0A_function_onGotoClick.28.29_.7B.0A_.0A_var_sURL_.3D_window.prompt.28.22Enter_a_URL:_.22.2C.22.22.29.3B.0A_.0A_if_.28sURL_.26.26_sURL.length_.3E_0.29_.7B.0A_.0A_document.location_.3D_sURL.3B.0A_.0A_.7D.0A_.0A_.7D.0A.0A_.2F.2A.0A_Add_an_additional_item_to_the_Menu_instance._Unlike_the_.0A_other_items_in_the_Menu_instance.2C_this_item_is_added_via_.0A_script_since_its_functionality_requires_JavaScript..0A_.2A.2F.0A_oMenu.addItem.28.7B_text:_.22Go_to....22.2C_id:_.22goto.22.2C_onclick:_.7B_fn:_onGotoClick_.7D_.7D.29.3B.0A.0A_.2F.2A.0A_.22beforeShow.22_event_listener_-_used_to_position_the_.0A_root_Menu_instance_when_it_is_displayed..0A_.2A.2F.0A_oMenu.subscribe.28.22beforeShow.22.2C_function_.28.29_.7B.0A_.0A_if_.28this.getRoot.28.29_.3D.3D_this.29_.7B.0A_positionMenu.28.29.3B.0A_.7D.0A_.0A_.7D.29.3B.0A.0A_.2F.2A.0A_Call_the_.22render.22_method_with_no_arguments_since_the_.0A_markup_for_this_menu_already_exists_in_the_pages..0A_.2A.2F.0A_oMenu.render.28.29.3B.0A.0A_.2F.2A.0A_Position_the_bottom-left_corner_of_the_root_menu_to_the_.0A_top-left_corner_of_the_.22Yahoo.21.22_anchor_element..0A_.2A.2F.0A_oMenu.cfg.setProperty.28.22context.22.2C_.5B.22yahoo.22.2C_.22bl.22.2C_.22tl.22.5D.29.3B.0A.0A_.2F.2F_.22click.22_event_handler_for_.22Yahoo.21.22_button.0A_.0A_function_onYahooClick.28p_oEvent.29_.7B.0A_.0A_.2F.2F_Position_and_display_the_menu.0A_.0A_positionMenu.28.29.3B.0A_oMenu.show.28.29.3B.0A_.0A_.2F.2F_Stop_propagation_and_prevent_the_default_.22click.22_behavior.0A_.0A_YAHOO.util.Event.stopEvent.28p_oEvent.29.3B.0A_.0A_.7D.0A.0A_.2F.2A.0A_Assign_a_.22click.22_event_handler_to_the_.22Yahoo.21.22_anchor_that_.0A_will_display_the_menu.0A_.2A.2F.0A_.0A_YAHOO.util.Event.addListener.28.22yahoo.22.2C_.22click.22.2C_onYahooClick.29.3B.0A.0A_.2F.2A.0A_Add_a_.22resize.22_event_handler_for_the_window_that_will_.0A_reposition_the_H1_.22toolbar.22_to_the_bottom_of_the_viewport.0A_.2A.2F.0A_YAHOO.widget.Overlay.windowResizeEvent.subscribe.28positionMenu.29.3B.0A_.0A_.7D.29.3B.0A_.3C.2Fscript.3E.0A_.3C.2Fhead.3E.0A_.3Cbody_class.3D.22yui-skin-sam.22.3E.0A_.0A_.3Ch1.3E.3Ca_id.3D.22yahoo.22_href.3D.22http:.2F.2Fwww.yahoo.ru.22.3EYahoo.21.3C.2Fa.3E){kind=link}
