JavaScript DHTML/GUI Components/Menu 2
Содержание
- 1 AtJsMenu Demo
- 2 Drop down menu and sub menu
- 3 Emulate XP start menu
- 4 The Start Menu
- 5 Example 10: Listening For DOM-Related Events
- 6 Example 11: MenuItem Configuration Properties
- 7 Example 12: Setting Configuration Properties At Runtime
- 8 Example 13: Multi-tiered Menu with Progressive Rendering of Submenus
- 9 Example 1: Basic Menu From Existing Markup [<a href="index.html">Examples Home</a>]
- 10 Example 2: Basic Menu From Pure JavaScript [<a href="index.html">Examples Home</a>]
- 11 Example 3: Grouped MenuItem Instances From Existing Markup [<a href="index.html">Examples Home</a>]
- 12 Example 4: Grouped MenuItem Instances Using Pure JavaScript
- 13 Example 5: Grouped MenuItem Instances With Titles From Existing Markup
- 14 Example 6: Grouped MenuItem Instances With Titles Using Pure JavaScript
- 15 Example 7: Multi-tiered Menu From Existing Markup
- 16 Example 8: Multi-tiered Menu From Pure JavaScript
- 17 Example 9: Handling Click Events
- 18 <a id="yahoo" href="http://www.yahoo.ru">Yahoo!</a>
- 19 The Image Menu
- 20 Website Left Nav Example (with submenus built from JavaScript) [<a href="index.html">Examples Home</a>]
- 21 Website Left Nav Example (with submenus built from markup) [<a href="index.html">Examples Home</a>]
- 22 Website Top Nav (with submenus built from JavaScript) [<a href="index.html">Examples Home</a>]
- 23 Website Top Nav (with submenus built from markup) [<a href="index.html">Examples Home</a>]
AtJsMenu Demo
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html>
<head>
<title>Loading Module...</title>
<link href="AtJsMenu-xpsilver.css" rel="stylesheet" type="text/css" /> <link href="menu.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript" src="browser.js"></script> <script language="JavaScript" type="text/javascript" src="AtJsMenuKeys.js"></script> <script language="JavaScript" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript" src="AtJsMenu.js"></script> </head> <body> <script language="JavaScript" type="text/javascript" src="menu.js"></script> <script language="JavaScript" type="text/javascript"> </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/AtJsMenu20060627.zip">AtJsMenu20060627.zip( 161 k)</a>
<source lang="html4strict">
<html> <head> <title>DynAPI Examples - HTML Menu</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("TemplateManager"); dynapi.library.include("HTMLMenu"); </script> <script language="Javascript"> // Mozilla will collapse/expand table cells whenever the content of the layer changes. To solve this, specify a width for your table cells
t = "This is the Template:| {@mnu} |
var tp = new Template(null,100,100,250,200,"#EEEEEE"); tp.addChild(new HTMLMenu(),"mnu"); var mbar; // Main Menu mbar= tp.mnu.createMenuBar("main",40,20); mbar.addItem(null,"File","file"); mbar.addItem(null,"Edit","edit"); mbar.addItem(null,"View","view"); mbar.addItem(null,"Tools","tools"); mbar.addItem(null,"Help","help");
//File menu
mbar = tp.mnu.createMenuBar("file",130);
mbar.addItem(null,"New");
mbar.addItem(null,"Open",null,"alert("Open files")");
mbar.addItem(null,"Save");
mbar.addItem(null,"Save As ...");
mbar.addItem(null,"Recent Files","recent");
mbar.addItem(null,"Exit");
//Recent menu
mbar = tp.mnu.createMenuBar("recent",120);
mbar.addItem(null,"Dynapi.js");
mbar.addItem(null,"Quickref.html");
mbar.addItem(null,"Changelog.html");
mbar.addItem(null,"Index.html");
//edit menu
mbar = tp.mnu.createMenuBar("edit",120);
mbar.addItem(null,"Undo");
mbar.addItem(null,"Cut");
mbar.addItem(null,"Copy");
mbar.addItem(null,"Paste");
//view menu
mbar = tp.mnu.createMenuBar("view",130);
mbar.addItem(null,"Go");
mbar.addItem(null,"Stop");
mbar.addItem(null,"Toolbars","tbar");
mbar.addItem(null,"Status Bar");
// tbar
mbar = tp.mnu.createMenuBar("tbar",120);
mbar.addItem(null,"Header");
mbar.addItem(null,"Footer");
mbar.addItem(null,"Standard");
mbar.addItem(null,"Drawing");
//tools menu
mbar = tp.mnu.createMenuBar("tools",120);
mbar.addItem(null,"Options");
mbar.addItem(null,"Macro");
mbar.addItem(null,"Convert...");
mbar.addItem(null,"Run...");
dynapi.document.addChild(tp); dynapi.onLoad(function(){
tp.setHTML(t);
}) </script> </head> <body> <script>
dynapi.document.insertAllChildren();
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
<source lang="html4strict">
<html> <head> <title>DynAPI Examples - HTML Menu - (Start Menu)</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("HTMLMenu"); dynapi.library.include("Image"); </script> <script language="Javascript"> var lyr = new DynLayer(null,0,0,65,25) lyr.setAnchor({left:10,bottom:5}) var mnu = lyr.addChild(new HTMLMenu(),"mnu"); mnu.backCol = "#FFFFFF"; mnu.selBgCol="#C1D2EE"; mnu.foreCol = "#000000"; mnu.cssMenuItem=""; mnu.cssMenuText = "MNUItmText"; dynapi.document.addChild(lyr) if(dynapi.ua.ns4){
// NS4 style
HTMLComponent.writeStyle({
MNUItm: "border: 1px solid #C0C0C0",
MNUItmTop: "border: 1px solid #C0C0C0",
MNUItmBottom: "border: 1px solid #C0C0C0",
MNUItmText: "text-decoration: none; color: #000000; font: 12px Arial, Helvetica "
})
} else{
// IE & DOM Style
HTMLComponent.writeStyle({
MNUItm: "{border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0;}",
MNUItmTop: "{border-top: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0}",
MNUItmBottom: "{border-bottom: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0}",
MNUItmText: "{cursor: default; text-decoration: none; color: #000000; font: 12px Arial, Helvetica }"
})
} var p ={align:"absmiddle"} var ipx = dynapi.functions.getImage("./dynapiexamples/images/menu_side.gif",16,22,p); var iprog = dynapi.functions.getImage("./dynapiexamples/images/menu_programs.gif",16,22,p); var istart = dynapi.functions.getImage("./dynapiexamples/images/menu_start.gif",16,22,{
align:"absmiddle", oversrc:"images/menu_start_on.gif"
}); var iset = dynapi.functions.getImage("./dynapiexamples/images/menu_settings.gif",16,22,{
align:"absmiddle", oversrc:"images/menu_settings_on.gif"
}); var mbar; // Main Menu mbar= mnu.createMenuBar("main",60,20,1,0); mbar.addItem(null,{image:istart,text:" Start"},"start");
//File menu
mbar = mnu.createMenuBar("start",150,22,-3,0);
mbar.addItem("MNUItmTop",iprog.getHTML()+" Programs","progs");
mbar.addItem("MNUItm",ipx.getHTML()+" Documents",null,"nav()");
mbar.addItem("MNUItm",{image:iset,text:" Settings"},"settings");
mbar.addItem("MNUItm",ipx.getHTML()+" Search...",null,"nav()");
mbar.addItem("MNUItmTop",ipx.getHTML()+" Logoff",null,"nav()");
mbar.addItem("MNUItmBottom",ipx.getHTML()+" Shutdown ...",null,"nav()");
// Programs
mbar = mnu.createMenuBar("progs",130,22,-2,0);
mbar.addItem("MNUItmTop",ipx.getHTML()+" Accessories",null,"nav()");
mbar.addItem("MNUItm",ipx.getHTML()+" Startup",null,"nav()");
mbar.addItem("MNUItmTop",ipx.getHTML()+" Games",null,"nav()");
mbar.addItem("MNUItm",ipx.getHTML()+" DynAPI IDE",null,"nav()");
mbar.addItem("MNUItmBottom",ipx.getHTML()+" The Compressor",null,"nav()");
// Settings
mbar = mnu.createMenuBar("settings",130,22,-2,0);
mbar.addItem("MNUItmTop",ipx.getHTML()+" Control Panel",null,"nav()");
mbar.addItem("MNUItmTop",ipx.getHTML()+" Printers & Fax",null,"nav()");
mbar.addItem("MNUItm",{image:iset,text:" Networks"},null,"nav()");
mbar.addItem("MNUItmBottom",ipx.getHTML()+" DynAPI Debugger",null,"nav()");
function nav(){
alert ("Do amazing things with the new HTMLMenu")
} </script> </head> <body>
The Start Menu
Just Imagine what you can do with HTMLMenu.
<script> dynapi.document.insertChild(mnu);</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Example 10: Listening For DOM-Related 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>Example 10: Listening For DOM-Related Events</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/logger/assets/logger.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body { margin:.5em; }
p em {
text-decoration:underline;
}
#logs {
position:absolute;
bottom:0;
right:0;
}
.example10 {
background-color:#9c9;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
// "load" event handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// Generic event handler for the Menu instance"s DOM-related events
function onMenuEvent(p_sType, p_aArguments) {
var oDOMEvent = p_aArguments[0];
YAHOO.log(
(
"Id: " + this.id + ", " +
"Custom Event Type: " + p_sType + ", " +
"DOM Event Type: " + oDOMEvent.type
),
"info",
"example10"
);
}
/*
Generic event handler for each MenuItem instance"s
DOM-related events
*/
function onMenuItemEvent(p_sType, p_aArguments) {
var oDOMEvent = p_aArguments[0];
YAHOO.log(
(
"Index: " + this.index + ", " +
"Group Index: " + this.groupIndex + ", " +
"Custom Event Type: " + p_sType + ", " +
"DOM Event Type: " + oDOMEvent.type
),
"info",
"example10"
);
}
// Create a menu
var oMenu = new YAHOO.widget.Menu("basicmenu"),
// Create the MenuItem instances and add them to the menu
aMenuItemData = [
"MenuItem 0",
"MenuItem 1",
"MenuItem 2",
"MenuItem 3",
"MenuItem 4"
],
nMenuItems = aMenuItemData.length,
oMenuItem;
for(var i=0; i<nMenuItems; i++) {
oMenuItem = oMenu.addItem(aMenuItemData[i]);
oMenuItem.mouseOverEvent.subscribe(onMenuItemEvent);
oMenuItem.mouseOutEvent.subscribe(onMenuItemEvent);
oMenuItem.mouseDownEvent.subscribe(onMenuItemEvent);
oMenuItem.mouseUpEvent.subscribe(onMenuItemEvent);
oMenuItem.clickEvent.subscribe(onMenuItemEvent);
oMenuItem.keyDownEvent.subscribe(onMenuItemEvent);
oMenuItem.keyUpEvent.subscribe(onMenuItemEvent);
oMenuItem.keyPressEvent.subscribe(onMenuItemEvent);
}
oMenu.render(document.body);
oMenu.show();
// Focus the first MenuItem instance
oMenu.getItem(0).focus();
// Disable the third MenuItem instance
oMenu.getItem(2).cfg.setProperty("disabled", true);
// Subscribe to the menu"s DOM-related events
oMenu.mouseOverEvent.subscribe(onMenuEvent);
oMenu.mouseOutEvent.subscribe(onMenuEvent);
oMenu.mouseDownEvent.subscribe(onMenuEvent);
oMenu.mouseUpEvent.subscribe(onMenuEvent);
oMenu.clickEvent.subscribe(onMenuEvent);
oMenu.keyDownEvent.subscribe(onMenuEvent);
oMenu.keyUpEvent.subscribe(onMenuEvent);
oMenu.keyPressEvent.subscribe(onMenuEvent);
var oLogs = document.createElement("div");
oLogs.id = "logs";
document.body.appendChild(oLogs);
var oLogReader = new YAHOO.widget.LogReader("logs");
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 10: Listening For DOM-Related 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."
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 11: MenuItem Configuration Properties
<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 11: MenuItem Configuration Properties</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body { margin:.5em; }
li.yuimenuitem a em {
font-style:italic;
}
li.yuimenuitem strong {
font-weight:bold;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
// "load" event handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// Create a menu
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true }),
// Add the MenuItem instance to the menu
aMenuItemData = [
{ text: "Selected MenuItem", config: { selected: true } },
{ text: "Disabled MenuItem", config: { disabled: true } },
{ text: "MenuItem With Help Text", config: { helptext: "Help Me!" } },
{ text: "MenuItem With A URL", config: { url: "http://www.yahoo.ru!" } },
{ text: "MenuItem With Emphasis", config: { emphasis: true } },
{ text: "MenuItem With Strong Emphasis", config: { strongemphasis: true } },
{ text: "Checked MenuItem", config: { checked: true } }
],
nMenuItems = aMenuItemData.length,
oMenuItem;
for(var i=0; i<nMenuItems; i++) {
oMenuItem = new YAHOO.widget.MenuItem(
aMenuItemData[i].text,
aMenuItemData[i].config
);
oMenu.addItem(oMenuItem);
}
oMenu.render(document.body);
oMenu.show();
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 11: MenuItem Configuration Properties
This example demonstrates how to set configuration properties when instantiating a MenuItem instance.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 12: Setting 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 12: Setting Configuration Properties At Runtime</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/logger/assets/logger.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body { margin:.5em; }
li.yuimenuitem a em {
font-style:italic;
}
li.yuimenuitem strong {
font-weight:bold;
}
p em {
text-decoration:underline;
}
#logs {
position:absolute;
bottom:0;
right:0;
}
.example12 {
background-color:#9c9;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
// "load" event handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// "config change" event handler for each MenuItem instance
function onMenuItemConfigChange(p_sType, p_aArguments, p_oMenuItem) {
var sPropertyName = p_aArguments[0][0],
sPropertyValue = p_aArguments[0][1];
YAHOO.log(
(
"Index: " + this.index + ", " +
"Group Index: " + this.groupIndex + ", " +
"Custom Event Type: " + p_sType + ", " +
"\"" + sPropertyName + "\" Property Set To: \"" + sPropertyValue + "\""
),
"info",
"example12"
);
}
// Create a menu
var oMenu = new YAHOO.widget.Menu("basicmenu"),
// Add the MenuItem instance to the menu
aMenuItemData = [
"MenuItem 0",
"MenuItem 1",
"MenuItem 2",
"MenuItem 3",
"MenuItem 4",
"MenuItem 5"
],
nMenuItems = aMenuItemData.length,
oMenuItem;
for(var i=0; i<nMenuItems; i++) {
oMenuItem = oMenu.addItem(aMenuItemData[i]);
oMenuItem.cfg.configChangedEvent.subscribe(onMenuItemConfigChange, oMenuItem, true);
}
oMenu.render(document.body);
oMenu.show();
// Set the MenuItem configuration properties
oMenu.getItem(0).cfg.setProperty("selected", true);
oMenu.getItem(1).cfg.setProperty("disabled", true);
oMenu.getItem(2).cfg.setProperty("helptext", "Help Me!");
oMenu.getItem(3).cfg.setProperty("emphasis", true);
oMenu.getItem(4).cfg.setProperty("strongemphasis", true);
oMenu.getItem(5).cfg.setProperty("checked", true);
var oLogs = document.createElement("div");
oLogs.id = "logs";
document.body.appendChild(oLogs);
var oLogReader = new YAHOO.widget.LogReader("logs");
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 12: Setting Configuration Properties At Runtime
This example demonstrates how to set MenuItem configuration properties at runtime and listen for the changes through the "configChangedEvent."
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 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 13: Multi-tiered Menu with Progressive Rendering of Submenus</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/logger/assets/logger.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
#logs {
position:absolute;
bottom:0;
right:0;
}
.example13 {
background-color:#9c9;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
YAHOO.example.onWindowLoad = function(p_oEvent) {
/*
Use a JSON-formatted data structure to define the data for
the submenus of the root menu
*/
var oMenuData = {
"communications": [
{ 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", submenuId: "pim", submenuItems: [
{ 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: "Photos", url: "http://photos.yahoo.ru" },
],
"shopping": [
{ 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: "Points", url: "http://points.yahoo.ru" },
{ 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" }
],
"entertainment": [
{ 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" }
],
"information": [
{ 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" }
]
};
/*
"beforeshow" handler for each submenu of the root
Menu instance
*/
function onMenuBeforeShow(p_sType, p_sArgs, p_oMenu) {
// Check if the menu has any items. If not, add them
if(this.getItemGroups().length == 0) {
YAHOO.log(("Menu " + this.id + " has no items yet, so they need to be added."), "info", "example13");
var aItemsData = this.itemsData,
nItems = aItemsData.length,
oItemData,
oItemConfig,
oSubmenu;
for(var i=0; i<nItems; i++) {
oItemData = aItemsData[i];
if(oItemData) {
oItemConfig = {};
if(oItemData.url) {
oItemConfig.url = oItemData.url;
}
if(oItemData.submenuItems) {
oSubmenu = new YAHOO.widget.Menu(oItemData.submenuId);
oSubmenu.itemsData = oItemData.submenuItems;
oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu, true);
oItemConfig.submenu = oSubmenu;
}
// Add the new YAHOO.widget.MenuItem instance to the Menu
this.addItem(new YAHOO.widget.MenuItem(oItemData.text, oItemConfig));
YAHOO.log(("Added item \"" + oItemData.text + "\" to menu: " + this.id), "info", "example13");
}
}
/*
Render the submenu into its parent MenuItem
instance"s element
*/
this.render(this.parent.element);
}
else {
YAHOO.log(("Menu " + this.id + " has all of its items, so no need to add them."), "info", "example13");
}
}
// Initialize the root menu
var oProductsServicesMenu = new YAHOO.widget.Menu("productsandservices");
// Initialize the submenus of the items in the root menu
var oCommunicationsMenu = new YAHOO.widget.Menu("communications"),
oShoppingMenu = new YAHOO.widget.Menu("shopping"),
oEntertainmentMenu = new YAHOO.widget.Menu("entertainment"),
oInformationMenu = new YAHOO.widget.Menu("information");
/*
Add a property ("itemsData") to each submenu that
is reference to the data for its items.
This data will be used in the "beforeshow" handler to add
the items to each submenu before it is displayed.
*/
oCommunicationsMenu.itemsData = oMenuData["communications"];
oShoppingMenu.itemsData = oMenuData["shopping"];
oEntertainmentMenu.itemsData = oMenuData["entertainment"];
oInformationMenu.itemsData = oMenuData["information"];
/*
Assign a "beforeshow" handler to each submenu of the
items in the root menu.
*/
oCommunicationsMenu.beforeShowEvent.subscribe(onMenuBeforeShow, oCommunicationsMenu, true);
oShoppingMenu.beforeShowEvent.subscribe(onMenuBeforeShow, oShoppingMenu, true);
oEntertainmentMenu.beforeShowEvent.subscribe(onMenuBeforeShow, oEntertainmentMenu, true);
oInformationMenu.beforeShowEvent.subscribe(onMenuBeforeShow, oInformationMenu, true);
// Add the empty submenus to the items in the root menu instance
oProductsServicesMenu.getItem(0).cfg.setProperty("submenu", oCommunicationsMenu);
oProductsServicesMenu.getItem(1).cfg.setProperty("submenu", oShoppingMenu);
oProductsServicesMenu.getItem(2).cfg.setProperty("submenu", oEntertainmentMenu);
oProductsServicesMenu.getItem(3).cfg.setProperty("submenu", oInformationMenu);
// Render and display the root menu
oProductsServicesMenu.render();
oProductsServicesMenu.show();
var oLogs = document.createElement("div");
oLogs.id = "logs";
document.body.appendChild(oLogs);
var oLogReader = new YAHOO.widget.LogReader("logs");
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
This example demonstrates how to create a menu with submenus that are rendered on the fly.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 1: Basic Menu From Existing 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>Example 1: Basic Menu From Existing Markup</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body { margin:.5em; }
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
YAHOO.example.onWindowLoad = function(p_oEvent) {
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
oMenu.render();
oMenu.show();
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 1: Basic Menu From Existing Markup [<a href="index.html">Examples Home</a>]
This example demonstrates how to create a basic menu using existing markup on the page. The Menu API also supports building a menu like this <a href="example02.html">using nothing but JavaScript</a>.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 2: Basic Menu From Pure 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 2: Basic Menu From Pure JavaScript</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body { margin:.5em; }
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
YAHOO.example.onWindowLoad = function(p_oEvent) {
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Mail",
{ url:"http://mail.yahoo.ru"}
)
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Address Book",
{ url:"http://addressbook.yahoo.ru"}
)
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Calendar",
{ url:"http://calendar.yahoo.ru"}
)
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Notepad",
{ url:"http://notepad.yahoo.ru"}
)
);
oMenu.render(document.body);
oMenu.show();
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 2: Basic Menu From Pure JavaScript [<a href="index.html">Examples Home</a>]
This example demonstrates how to create a basic menu using nothing but JavaScript. The Menu API also supports building a menu like this <a href="example01.html">using existing markup</a>.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 3: Grouped MenuItem Instances From Existing 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>Example 3: Grouped MenuItem Instances From Existing Markup</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body { margin:.5em; }
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
YAHOO.example.onWindowLoad = function(p_oEvent) {
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
oMenu.render();
oMenu.show();
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 3: Grouped MenuItem Instances From Existing Markup [<a href="index.html">Examples Home</a>]
This example demonstrates how to group MenuItem instances. The Menu API also supports building a menu like this <a href="example04.html">using nothing but JavaScript</a>.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 4: Grouped MenuItem Instances Using Pure 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 4: Grouped MenuItem Instances Using Pure JavaScript</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body { margin:.5em; }
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
YAHOO.example.onWindowLoad = function(p_oEvent) {
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
// Add MenuItem instances to the first group
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Mail",
{ url:"http://mail.yahoo.ru"}
)
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Address Book",
{ url:"http://addressbook.yahoo.ru"}
)
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Calendar",
{ url:"http://calendar.yahoo.ru"}
)
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Notepad",
{ url:"http://notepad.yahoo.ru"}
)
);
// Add MenuItem instances to the second group
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Local",
{ url:"http://local.yahoo.ru"}
),
1
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Maps",
{ url:"http://maps.yahoo.ru"}
),
1
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Travel",
{ url:"http://travel.yahoo.ru"}
),
1
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Shopping",
{ url:"http://shopping.yahoo.ru"}
),
1
);
// Add MenuItem instances to the third group
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Messenger",
{ url:"http://messenger.yahoo.ru"}
),
2
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! 360",
{ url:"http://360.yahoo.ru"}
),
2
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Groups",
{ url:"http://groups.yahoo.ru"}
),
2
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Photos",
{ url:"http://photos.yahoo.ru"}
),
2
);
oMenu.render(document.body);
oMenu.show();
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 4: Grouped MenuItem Instances Using Pure JavaScript
This example demonstrates how to group MenuItem instances. The Menu API also supports building a menu like this <a href="example03.html">using existing markup</a>.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 5: Grouped MenuItem Instances With Titles From Existing 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>Example 5: Grouped MenuItem Instances With Titles From Existing Markup</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body { margin:.5em; }
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
YAHOO.example.onWindowLoad = function(p_oEvent) {
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
oMenu.render();
oMenu.show();
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 5: Grouped MenuItem Instances With Titles From Existing Markup
This example demonstrates how to title groups of MenuItem instances. The Menu API also supports building a menu like this <a href="example06.html">using nothing but JavaScript</a>.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 6: Grouped MenuItem Instances With Titles Using Pure 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 6: Grouped MenuItem Instances With Titles Using Pure JavaScript</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body { margin:.5em; }
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
YAHOO.example.onWindowLoad = function(p_oEvent) {
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
// Add MenuItem instances to the first group
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Mail",
{ url:"http://mail.yahoo.ru"}
)
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Address Book",
{ url:"http://addressbook.yahoo.ru"}
)
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Calendar",
{ url:"http://calendar.yahoo.ru"}
)
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Notepad",
{ url:"http://notepad.yahoo.ru"}
)
);
// Add MenuItem instances to the second group
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Local",
{ url:"http://local.yahoo.ru"}
),
1
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Maps",
{ url:"http://maps.yahoo.ru"}
),
1
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Travel",
{ url:"http://travel.yahoo.ru"}
),
1
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Shopping",
{ url:"http://shopping.yahoo.ru"}
),
1
);
// Add MenuItem instances to the third group
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Messenger",
{ url:"http://messenger.yahoo.ru"}
),
2
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! 360",
{ url:"http://360.yahoo.ru"}
),
2
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Groups",
{ url:"http://groups.yahoo.ru"}
),
2
);
oMenu.addItem(
new YAHOO.widget.MenuItem(
"Yahoo! Photos",
{ url:"http://photos.yahoo.ru"}
),
2
);
oMenu.setItemGroupTitle("Yahoo! PIM", 0);
oMenu.setItemGroupTitle("Yahoo! Search", 1);
oMenu.setItemGroupTitle("Yahoo! Communications", 2);
oMenu.render(document.body);
oMenu.show();
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 6: Grouped MenuItem Instances With Titles Using Pure JavaScript
This example demonstrates how to title groups of MenuItem instances. The Menu API also supports building a menu like this <a href="example05.html">using existing markup</a>.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 7: Multi-tiered Menu From Existing 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>Example 7: Multi-tiered Menu From Existing Markup</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
YAHOO.example.onWindowLoad = function(p_oEvent) {
var oProductsServicesMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter:true });
oProductsServicesMenu.render();
oProductsServicesMenu.show();
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 7: Multi-tiered Menu From Existing Markup
This example demonstrates how to create a multi-tiered menu using existing markup on the page. The Menu API also supports building a menu like this <a href="example08.html">using nothing but JavaScript</a>.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 8: Multi-tiered Menu From Pure 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 8: Multi-tiered Menu From Pure JavaScript</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
YAHOO.example.onWindowLoad = function(p_oEvent) {
var oPIMMenu = new YAHOO.widget.Menu("pim");
oPIMMenu.addItem(new YAHOO.widget.MenuItem("Yahoo! Mail", { url:"http://mail.yahoo.ru" }));
oPIMMenu.addItem(new YAHOO.widget.MenuItem("Yahoo! Address Book", { url:"http://addressbook.yahoo.ru" }));
oPIMMenu.addItem(new YAHOO.widget.MenuItem("Yahoo! Calendar", { url:"http://calendar.yahoo.ru" }));
oPIMMenu.addItem(new YAHOO.widget.MenuItem("Yahoo! Notepad", { url:"http://notepad.yahoo.ru" } ));
var oCommunicationsMenu = new YAHOO.widget.Menu("communications");
oCommunicationsMenu.addItem(new YAHOO.widget.MenuItem("360", { url: "http://360.yahoo.ru" }));
oCommunicationsMenu.addItem(new YAHOO.widget.MenuItem("Alerts", { url: "http://alerts.yahoo.ru" }));
oCommunicationsMenu.addItem(new YAHOO.widget.MenuItem("Avatars", { url: "http://avatars.yahoo.ru" }));
oCommunicationsMenu.addItem(new YAHOO.widget.MenuItem("Groups", { url: "http://groups.yahoo.ru " }));
oCommunicationsMenu.addItem(new YAHOO.widget.MenuItem("Internet Access", { url: "http://promo.yahoo.ru/broadband" }));
oCommunicationsMenu.addItem(new YAHOO.widget.MenuItem("PIM", { submenu: oPIMMenu }));
oCommunicationsMenu.addItem(new YAHOO.widget.MenuItem("Member Directory", { url: "http://members.yahoo.ru" }));
oCommunicationsMenu.addItem(new YAHOO.widget.MenuItem("Messenger", { url: "http://messenger.yahoo.ru" }));
oCommunicationsMenu.addItem(new YAHOO.widget.MenuItem("Mobile", { url: "http://mobile.yahoo.ru" }));
oCommunicationsMenu.addItem(new YAHOO.widget.MenuItem("Photos", { url: "http://photos.yahoo.ru" }));
var oShoppingMenu = new YAHOO.widget.Menu("shopping");
oShoppingMenu.addItem(new YAHOO.widget.MenuItem("Auctions", { url: "http://auctions.shopping.yahoo.ru" }));
oShoppingMenu.addItem(new YAHOO.widget.MenuItem("Autos", { url: "http://autos.yahoo.ru" }));
oShoppingMenu.addItem(new YAHOO.widget.MenuItem("Classifieds", { url: "http://classifieds.yahoo.ru" }));
oShoppingMenu.addItem(new YAHOO.widget.MenuItem("Flowers & Gifts", { url: "http://shopping.yahoo.ru/b:Flowers%20%26%20Gifts:20146735" }));
oShoppingMenu.addItem(new YAHOO.widget.MenuItem("Points", { url: "http://points.yahoo.ru" }));
oShoppingMenu.addItem(new YAHOO.widget.MenuItem("Real Estate", { url: "http://realestate.yahoo.ru" }));
oShoppingMenu.addItem(new YAHOO.widget.MenuItem("Travel", { url: "http://travel.yahoo.ru" }));
oShoppingMenu.addItem(new YAHOO.widget.MenuItem("Wallet", { url: "http://wallet.yahoo.ru" }));
oShoppingMenu.addItem(new YAHOO.widget.MenuItem("Yellow Pages", { url: "http://yp.yahoo.ru" }));
var oEntertainmentMenu = new YAHOO.widget.Menu("entertainment");
oEntertainmentMenu.addItem(new YAHOO.widget.MenuItem("Fantasy Sports", { url: "http://fantasysports.yahoo.ru" }));
oEntertainmentMenu.addItem(new YAHOO.widget.MenuItem("Games", { url: "http://games.yahoo.ru" }));
oEntertainmentMenu.addItem(new YAHOO.widget.MenuItem("Kids", { url: "http://www.yahooligans.ru" }));
oEntertainmentMenu.addItem(new YAHOO.widget.MenuItem("Music", { url: "http://music.yahoo.ru" }));
oEntertainmentMenu.addItem(new YAHOO.widget.MenuItem("Movies", { url: "http://movies.yahoo.ru" }));
oEntertainmentMenu.addItem(new YAHOO.widget.MenuItem("Radio", { url: "http://music.yahoo.ru/launchcast" }));
oEntertainmentMenu.addItem(new YAHOO.widget.MenuItem("Travel", { url: "http://travel.yahoo.ru" }));
oEntertainmentMenu.addItem(new YAHOO.widget.MenuItem("TV", { url: "http://tv.yahoo.ru" }));
var oInformationMenu = new YAHOO.widget.Menu("information");
oInformationMenu.addItem(new YAHOO.widget.MenuItem("Downloads", { url: "http://downloads.yahoo.ru" }));
oInformationMenu.addItem(new YAHOO.widget.MenuItem("Finance", { url: "http://finance.yahoo.ru" }));
oInformationMenu.addItem(new YAHOO.widget.MenuItem("Health", { url: "http://health.yahoo.ru" }));
oInformationMenu.addItem(new YAHOO.widget.MenuItem("Local", { url: "http://local.yahoo.ru" }));
oInformationMenu.addItem(new YAHOO.widget.MenuItem("Maps & Directions", { url: "http://maps.yahoo.ru" }));
oInformationMenu.addItem(new YAHOO.widget.MenuItem("My Yahoo!", { url: "http://my.yahoo.ru" }));
oInformationMenu.addItem(new YAHOO.widget.MenuItem("News", { url: "http://news.yahoo.ru" }));
oInformationMenu.addItem(new YAHOO.widget.MenuItem("Search", { url: "http://search.yahoo.ru" }));
oInformationMenu.addItem(new YAHOO.widget.MenuItem("Small Business", { url: "http://smallbusiness.yahoo.ru" }));
oInformationMenu.addItem(new YAHOO.widget.MenuItem("Weather", { url: "http://weather.yahoo.ru" }));
var oProductsServicesMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter: true });
oProductsServicesMenu.addItem(new YAHOO.widget.MenuItem("Communication", { url: "http://communication.yahoo.ru", submenu: oCommunicationsMenu }));
oProductsServicesMenu.addItem(new YAHOO.widget.MenuItem("Shopping", { url: "http://shopping.yahoo.ru", submenu: oShoppingMenu }));
oProductsServicesMenu.addItem(new YAHOO.widget.MenuItem("Entertainment", { url: "http://entertainment.yahoo.ru", submenu: oEntertainmentMenu }));
oProductsServicesMenu.addItem(new YAHOO.widget.MenuItem("Information", { submenu: oInformationMenu } ));
oProductsServicesMenu.render(document.body);
oProductsServicesMenu.show();
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 8: Multi-tiered Menu From Pure JavaScript
This example demonstrates how to create a multi-tiered menu using nothing but JavaScript. The Menu API also supports building a menu like this <a href="example07.html">using existing markup</a>.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Example 9: Handling 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>Example 9: Handling Click Events</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/logger/assets/logger.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
body { margin:.5em; }
#logs {
position:absolute;
bottom:0;
right:0;
}
.example9 {
background-color:#9c9;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
YAHOO.example.onWindowLoad = function(p_oEvent) {
// "click" event handler for a MenuItem instance
function onMenuItemClick(p_sType, p_aArguments, p_oValue) {
YAHOO.log(
(
"index: " + this.index +
", text: " + this.cfg.getProperty("text") +
", value:" + p_oValue
),
"info",
"example9"
);
this.parent.show();
}
var oMenu = new YAHOO.widget.Menu("mymenu");
var oItem1 =
oMenu.addItem(new YAHOO.widget.MenuItem("Item One"));
oItem1.clickEvent.subscribe(onMenuItemClick);
var oItem2 =
oMenu.addItem(new YAHOO.widget.MenuItem("Item Two"));
/*
Register a "click" event handler for the first item,
passing a string arguemnt ("foo") to the event handler
*/
oItem2.clickEvent.subscribe(onMenuItemClick, "foo");
var oItem2 =
oMenu.addItem(new YAHOO.widget.MenuItem("Item Three"));
/*
Register a "click" event handler for the third item and
passing and array as an argument to the event handler
*/
oItem2.clickEvent.subscribe(onMenuItemClick, ["foo", "bar"]);
oMenu.render(document.body);
oMenu.show();
var oLogs = document.createElement("div");
oLogs.id = "logs";
document.body.appendChild(oLogs);
var oLogReader = new YAHOO.widget.LogReader("logs");
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
Example 9: Handling Click Events
This example demonstrates how to register a "click" event handler for a MenuItem instance. All of the events for YUI Menu are instances of <a href="http://developer.yahoo.ru/yui/event/#customevent">YAHOO.util.CustomEvent</a>. To register a listener for an event, use the event"s "subscribe" method passing a pointer to your handler as the first argument. You can pass an argument to your event handler(s) as an additional second argument to the "subscribe" method.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/menu-for-applications.zip">menu-for-applications.zip( 80 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/PopupMenu.htm">Popup Menu</a> <A href="/Code/JavaScript/GUI-Components/PopupMenu.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/AtJsMenuDemo.htm">AtJsMenu Demo</a> <A href="/Code/JavaScript/GUI-Components/AtJsMenuDemo.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/Example1BasicMenuFromExistingMarkup.htm">Example 1: Basic Menu From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example1BasicMenuFromExistingMarkup.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/Example2BasicMenuFromPureJavaScript.htm">Example 2: Basic Menu From Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example2BasicMenuFromPureJavaScript.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/Example3GroupedMenuItemInstancesFromExistingMarkup.htm">Example 3: Grouped MenuItem Instances From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example3GroupedMenuItemInstancesFromExistingMarkup.htm"></a> 6. <A href="/Code/JavaScript/GUI-Components/Example4GroupedMenuItemInstancesUsingPureJavaScript.htm">Example 4: Grouped MenuItem Instances Using Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example4GroupedMenuItemInstancesUsingPureJavaScript.htm"></a> 7. <A href="/Code/JavaScript/GUI-Components/Example5GroupedMenuItemInstancesWithTitlesFromExistingMarkup.htm">Example 5: Grouped MenuItem Instances With Titles From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example5GroupedMenuItemInstancesWithTitlesFromExistingMarkup.htm"></a> 8. <A href="/Code/JavaScript/GUI-Components/Example6GroupedMenuItemInstancesWithTitlesUsingPureJavaScript.htm">Example 6: Grouped MenuItem Instances With Titles Using Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example6GroupedMenuItemInstancesWithTitlesUsingPureJavaScript.htm"></a> 9. <A href="/Code/JavaScript/GUI-Components/Example7MultitieredMenuFromExistingMarkup.htm">Example 7: Multi-tiered Menu From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example7MultitieredMenuFromExistingMarkup.htm"></a> 10. <A href="/Code/JavaScript/GUI-Components/Example8MultitieredMenuFromPureJavaScript.htm">Example 8: Multi-tiered Menu From Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example8MultitieredMenuFromPureJavaScript.htm"></a> 11. <A href="/Code/JavaScript/GUI-Components/Example9HandlingClickEvents.htm">Example 9: Handling Click Events</a> <A href="/Code/JavaScript/GUI-Components/Example9HandlingClickEvents.htm"></a> 12. <A href="/Code/JavaScript/GUI-Components/Example10ListeningForDOMRelatedEvents.htm">Example 10: Listening For DOM-Related Events</a> <A href="/Code/JavaScript/GUI-Components/Example10ListeningForDOMRelatedEvents.htm"></a> 13. <A href="/Code/JavaScript/GUI-Components/Example11MenuItemConfigurationProperties.htm">Example 11: MenuItem Configuration Properties</a> <A href="/Code/JavaScript/GUI-Components/Example11MenuItemConfigurationProperties.htm"></a> 14. <A href="/Code/JavaScript/GUI-Components/Example12SettingConfigurationPropertiesAtRuntime.htm">Example 12: Setting Configuration Properties At Runtime</a> <A href="/Code/JavaScript/GUI-Components/Example12SettingConfigurationPropertiesAtRuntime.htm"></a> 15. <A href="/Code/JavaScript/GUI-Components/Example13MultitieredMenuwithProgressiveRenderingofSubmenus.htm">Example 13: Multi-tiered Menu with Progressive Rendering of Submenus</a> <A href="/Code/JavaScript/GUI-Components/Example13MultitieredMenuwithProgressiveRenderingofSubmenus.htm"></a> 16. <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfromJavaScript1.htm">Website Left Nav Example (with submenus built from JavaScript) 1</a> <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfromJavaScript1.htm"></a> 17. <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfrommarkup2.htm">Website Left Nav Example (with submenus built from markup) 2</a> <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfrommarkup2.htm"></a> 18. <A href="/Code/JavaScript/GUI-Components/OSStyleProgramsMenuExample.htm">OS-Style Programs Menu Example</a> <A href="/Code/JavaScript/GUI-Components/OSStyleProgramsMenuExample.htm"></a> 19. <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfromJavaScript3.htm">Website Top Nav (with submenus built from JavaScript) 3</a> <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfromJavaScript3.htm"></a> 20. <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfrommarkup4.htm">Website Top Nav (with submenus built from markup) 4</a> <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfrommarkup4.htm"></a> 21. <A href="/Code/JavaScript/GUI-Components/Dropdownmenuandsubmenu.htm">Drop down menu and sub menu</a> <A href="/Code/JavaScript/GUI-Components/Dropdownmenuandsubmenu.htm"></a> 22. <A href="/Code/JavaScript/GUI-Components/Verticalmenuandimagemenu.htm">Vertical menu and image menu</a> <A href="/Code/JavaScript/GUI-Components/Verticalmenuandimagemenu.htm"></a> 23. <A href="/Code/JavaScript/GUI-Components/EmulateXPstartmenu.htm">Emulate XP start menu</a> <A href="/Code/JavaScript/GUI-Components/EmulateXPstartmenu.htm"></a> 24. <A href="/Code/JavaScript/GUI-Components/xmenuxlayer3.htm">xmenu-xlayer-3</a> <A href="/Code/JavaScript/GUI-Components/xmenuxlayer3.htm"></a> 25. <A href="/Code/JavaScript/GUI-Components/treemenu.htm">tree-menu</a> <A href="/Code/JavaScript/GUI-Components/treemenu.htm"></a>
OS-Style Programs Menu 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=utf-8">
<title>OS-Style Programs Menu Example</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<style type="text/css">
html {
overflow:hidden;
}
body {
background-color:#dfb8df;
overflow:hidden;
}
/* Define a style for the H1 "toolbar" */
.ytoolbar {
border-top-width:2px;
border-top-color:#ddd;
border-top-style:solid;
background-color:#ccc;
position:absolute;
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;
*display:inline-block;
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 */
div.yuimenu {
border-width:2px;
border-color:#ddd #666 #666 #ddd;
border-style:solid;
background-color:#ccc;
}
/* Define a new style for each menu item */
div.yuimenu li.yuimenuitem {
padding-top:4px;
padding-bottom:4px;
background-image:url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif);
background-position:4px;
background-repeat:no-repeat;
}
div.yuimenu li.yuimenuitem img {
*border-color:#ccc;
}
/* Add icons to menu items */
div.yuimenu li.hassubmenu {
background-image:url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/fldr16_1.gif);
}
div.yuimenu li#help {
background-image:url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/hlp16_1.gif);
}
div.yuimenu li#search {
background-image:url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/srch16_1.gif);
}
div.yuimenu li#goto {
background-image:url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/arorght16_1.gif);
}
div.yuimenu li#examples {
background-image:url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/lnk16_1.gif);
}
/* Define a new style for an item"s "selected" state */
div.yuimenu li.selected {
background-color:#039;
}
div.yuimenu li.selected a.selected {
text-decoration:none;
}
div.yuimenu li.yuimenuitem.selected img.selected {
*border-color:#039;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="./build/animation/animation.js"></script>
<script type="text/javascript" src="./build/container/container.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
// "load" handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// "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;
}
}
var oH1 = document.getElementsByTagName("h1")[0];
/*
Apply the "ytoolbar" class to the H1 so that it is styled
like an application toolbar
*/
YAHOO.util.Dom.addClass(oH1, "ytoolbar");
function PositionToolbar() {
// Position the H1 "toolbar" to the bottom of the viewport
var nViewportHeight = YAHOO.util.Dom.getClientHeight(),
nToolbarHeight = oH1.offsetHeight;
oH1.style.top = (nViewportHeight - nToolbarHeight) + "px";
}
PositionToolbar();
// Instantiate the root menu and submenus
var oMenu = new YAHOO.widget.Menu(
"yproducts",
{ constraintoviewport:true, zIndex:2 }
);
// Add a link back to the examples index page
var oExamples = oMenu.addItem(
new YAHOO.widget.MenuItem(
"Examples",
{ url: "index.html" }
)
);
oExamples.element.id = "examples";
// Add a "Go to..." item to the root menu
var oGoTo = oMenu.addItem("Go to...");
oGoTo.element.id = "goto";
// Add a "click" event handler to the "Go to..." item
oGoTo.clickEvent.subscribe(onGotoClick);
// Render the root menu and submenus
oMenu.render();
/*
Position the bottom-left corner of the root menu to the
top-left corner of the "Yahoo!" anchor
*/
oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]);
// "click" event handler for "Yahoo!" button
function onYahooClick(p_oEvent) {
// Position and display the menu
oMenu.align("bl", "tl");
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);
// "click" event handler for the document
function onDocumentClick(p_oEvent) {
// Hide the menu
oMenu.hide();
}
/*
Assign a "click" event handler to the document that will
hide the menu
*/
YAHOO.util.Event.addListener(
document,
"click",
onDocumentClick
);
// "resize" handler for the window
function onWindowResize() {
PositionToolbar();
oMenu.align("bl", "tl");
}
/*
Add a "resize" event handler for the window that will
reposition the H1 "toolbar" to the bottom of the viewport
*/
YAHOO.util.Event.addListener(window, "resize", onWindowResize);
var oPanel = new YAHOO.widget.SimpleDialog(
"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);
oPanel.show();
}
// Add a "load" event handler for the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
<a id="yahoo" href="http://www.yahoo.ru">Yahoo!</a>
- Products
- <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://photos.yahoo.ru">Yahoo! Photos</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.zip">yui.zip( 3,714 k)</a>
Popup Menu
<source lang="html4strict">
<html>
<head>
<title>Popup Menu</title>
<link href="AtJsMenu-classic.css" rel="stylesheet" type="text/css" /> <link href="popup-menu.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript" src="signs.js"></script> <script language="JavaScript" type="text/javascript" src="browser.js"></script> <script language="JavaScript" type="text/javascript" src="AtJsMenuKeys.js"></script> <script language="JavaScript" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript" src="AtJsMenu.js"></script> </head> <body> <script language="JavaScript" type="text/javascript" src="menu.js"></script> <script language="JavaScript" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript" src="popup-menu.js"></script>
<textarea id="txtTest" cols="100" rows="5">Give focus this textbox and then select a menu. How"s the effect? Something wrong?</textarea>
Right click anywhere on this page. It will bring up the context menu.
The context menu does nothing. You should only watch its behavior.
Beside right clicking, the popup-key (on win keyboard) can also be used. On Opera 7.5+, use "]"
(right square bracket).
When right clicking is used, opera still shows its own context menu.
If you use popup-key (or "]" on Opera 7.5+), you can see the other directions to which the popup
is slidden when the popup comes up. These directions are new in version 1.2. Try these
combinations keys and you will see these directions:
- Popup-key: "south-east"
- Ctrl+Popup-key: "south-west"
- Shift+Popup-key: "north-west"
- Ctrl+Shift+Popup-key: "north-east"
View source to see the code!!
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/AtJsMenu20060627.zip">AtJsMenu20060627.zip( 161 k)</a>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/tree-menu.zip">tree-menu.zip( 125 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/PopupMenu.htm">Popup Menu</a> <A href="/Code/JavaScript/GUI-Components/PopupMenu.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/AtJsMenuDemo.htm">AtJsMenu Demo</a> <A href="/Code/JavaScript/GUI-Components/AtJsMenuDemo.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/Example1BasicMenuFromExistingMarkup.htm">Example 1: Basic Menu From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example1BasicMenuFromExistingMarkup.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/Example2BasicMenuFromPureJavaScript.htm">Example 2: Basic Menu From Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example2BasicMenuFromPureJavaScript.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/Example3GroupedMenuItemInstancesFromExistingMarkup.htm">Example 3: Grouped MenuItem Instances From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example3GroupedMenuItemInstancesFromExistingMarkup.htm"></a> 6. <A href="/Code/JavaScript/GUI-Components/Example4GroupedMenuItemInstancesUsingPureJavaScript.htm">Example 4: Grouped MenuItem Instances Using Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example4GroupedMenuItemInstancesUsingPureJavaScript.htm"></a> 7. <A href="/Code/JavaScript/GUI-Components/Example5GroupedMenuItemInstancesWithTitlesFromExistingMarkup.htm">Example 5: Grouped MenuItem Instances With Titles From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example5GroupedMenuItemInstancesWithTitlesFromExistingMarkup.htm"></a> 8. <A href="/Code/JavaScript/GUI-Components/Example6GroupedMenuItemInstancesWithTitlesUsingPureJavaScript.htm">Example 6: Grouped MenuItem Instances With Titles Using Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example6GroupedMenuItemInstancesWithTitlesUsingPureJavaScript.htm"></a> 9. <A href="/Code/JavaScript/GUI-Components/Example7MultitieredMenuFromExistingMarkup.htm">Example 7: Multi-tiered Menu From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example7MultitieredMenuFromExistingMarkup.htm"></a> 10. <A href="/Code/JavaScript/GUI-Components/Example8MultitieredMenuFromPureJavaScript.htm">Example 8: Multi-tiered Menu From Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example8MultitieredMenuFromPureJavaScript.htm"></a> 11. <A href="/Code/JavaScript/GUI-Components/Example9HandlingClickEvents.htm">Example 9: Handling Click Events</a> <A href="/Code/JavaScript/GUI-Components/Example9HandlingClickEvents.htm"></a> 12. <A href="/Code/JavaScript/GUI-Components/Example10ListeningForDOMRelatedEvents.htm">Example 10: Listening For DOM-Related Events</a> <A href="/Code/JavaScript/GUI-Components/Example10ListeningForDOMRelatedEvents.htm"></a> 13. <A href="/Code/JavaScript/GUI-Components/Example11MenuItemConfigurationProperties.htm">Example 11: MenuItem Configuration Properties</a> <A href="/Code/JavaScript/GUI-Components/Example11MenuItemConfigurationProperties.htm"></a> 14. <A href="/Code/JavaScript/GUI-Components/Example12SettingConfigurationPropertiesAtRuntime.htm">Example 12: Setting Configuration Properties At Runtime</a> <A href="/Code/JavaScript/GUI-Components/Example12SettingConfigurationPropertiesAtRuntime.htm"></a> 15. <A href="/Code/JavaScript/GUI-Components/Example13MultitieredMenuwithProgressiveRenderingofSubmenus.htm">Example 13: Multi-tiered Menu with Progressive Rendering of Submenus</a> <A href="/Code/JavaScript/GUI-Components/Example13MultitieredMenuwithProgressiveRenderingofSubmenus.htm"></a> 16. <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfromJavaScript1.htm">Website Left Nav Example (with submenus built from JavaScript) 1</a> <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfromJavaScript1.htm"></a> 17. <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfrommarkup2.htm">Website Left Nav Example (with submenus built from markup) 2</a> <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfrommarkup2.htm"></a> 18. <A href="/Code/JavaScript/GUI-Components/OSStyleProgramsMenuExample.htm">OS-Style Programs Menu Example</a> <A href="/Code/JavaScript/GUI-Components/OSStyleProgramsMenuExample.htm"></a> 19. <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfromJavaScript3.htm">Website Top Nav (with submenus built from JavaScript) 3</a> <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfromJavaScript3.htm"></a> 20. <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfrommarkup4.htm">Website Top Nav (with submenus built from markup) 4</a> <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfrommarkup4.htm"></a> 21. <A href="/Code/JavaScript/GUI-Components/Dropdownmenuandsubmenu.htm">Drop down menu and sub menu</a> <A href="/Code/JavaScript/GUI-Components/Dropdownmenuandsubmenu.htm"></a> 22. <A href="/Code/JavaScript/GUI-Components/Verticalmenuandimagemenu.htm">Vertical menu and image menu</a> <A href="/Code/JavaScript/GUI-Components/Verticalmenuandimagemenu.htm"></a> 23. <A href="/Code/JavaScript/GUI-Components/EmulateXPstartmenu.htm">Emulate XP start menu</a> <A href="/Code/JavaScript/GUI-Components/EmulateXPstartmenu.htm"></a> 24. <A href="/Code/JavaScript/GUI-Components/xmenuxlayer3.htm">xmenu-xlayer-3</a> <A href="/Code/JavaScript/GUI-Components/xmenuxlayer3.htm"></a> 25. <A href="/Code/JavaScript/GUI-Components/menuforapplications.htm">menu for applications</a> <A href="/Code/JavaScript/GUI-Components/menuforapplications.htm"></a>
<source lang="html4strict">
<html> <head> <title>DynAPI Examples - HTML Menu with Images</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("HTMLMenu"); dynapi.library.include("Image"); </script> <script language="Javascript"> // Write Style to browser HTMLComponent.writeStyle({
MNUItm: "border: 1px solid #E0E0E0", MNUItmText: "cursor: default; text-decoration: none; color: #000000; font: 12px Arial, Helvetica;"
}); var p ={align:"top"} var i1 = dynapi.functions.getImage("./dynapiexamples/images/btn_new.gif",16,16,p); var i2 = dynapi.functions.getImage("./dynapiexamples/images/btn_save.gif",16,16,p); var i3 = dynapi.functions.getImage("./dynapiexamples/images/eicon3.gif",32,32,p); var i4 = dynapi.functions.getImage("./dynapiexamples/images/eicon2.gif",32,32,p); var i5 = dynapi.functions.getImage("./dynapiexamples/images/eicon1.gif",32,32,p); var px = dynapi.functions.getImage("./dynapiexamples/images/pixel.gif",16,16,p); var mnu = dynapi.document.addChild(new HTMLMenu(),"mnu"); mnu.backCol = "#EFEBD7" mnu.selBgCol = "#C1D2EE"; mnu.cssMenu = "MNU"; mnu.cssMenuText = "MNUItmText"; mnu.cssMenuItem = "MNUItm"; var mbar; // Main Menu mbar= mnu.createMenuBar("main",40,20); mbar.addItem(null,"File","file"); mbar.addItem(null,"Edit","edit"); mbar.addItem(null,"View","view");
//File menu
mbar = mnu.createMenuBar("file",130);
mbar.addItem(null,{image:i1,text:" New"});
mbar.addItem(null,{image:px,text:" Open"},null,"alert("Open files")");
mbar.addItem(null,{image:i2,text:" Save"});
mbar.addItem(null,"Save As ...");
mbar.addItem(null,"Recent Files","recent");
mbar.addItem(null,"Exit");
//Recent menu
mbar = mnu.createMenuBar("recent",120);
mbar.addItem(null,"Dynapi.js");
mbar.addItem(null,"Quickref.html");
mbar.addItem(null,"Changelog.html");
mbar.addItem(null,"Index.html");
//edit menu
mbar = mnu.createMenuBar("edit",120);
mbar.addItem(null,"Undo");
mbar.addItem(null,"Cut");
mbar.addItem(null,"Copy");
mbar.addItem(null,"Paste");
//view menu
mbar = mnu.createMenuBar("view",130);
mbar.addItem(null,{image:px,text:"Icon #1"},"eicon1");
mbar.addItem(null,{image:px,text:"Icon #2"},"eicon2");
mbar.addItem(null,{image:px,text:"Icon #3"},"eicon3");
mbar = mnu.createMenuBar("eicon1",40,36);
mbar.addItem(null,i3.getHTML());
mbar = mnu.createMenuBar("eicon2",40,36);
mbar.addItem(null,i4.getHTML());
mbar = mnu.createMenuBar("eicon3",40,36);
mbar.addItem(null,i5.getHTML());
// Vertical Menu var mnu2 = dynapi.document.addChild(new HTMLMenu(null,"vert"),"mnu2"); mbar= mnu2.createMenuBar("main",90,20); mbar.addItem(null,"Products","prods"); mbar.addItem(null,"Services","edit"); mbar.addItem(null,"Contacts","file");
//File menu
mbar = mnu2.createMenuBar("file",130);
mbar.addItem(null,{image:i1,text:" New"});
mbar.addItem(null,{image:px,text:"Open"},null,"alert("Open files")");
mbar.addItem(null,{image:i2,text:" Save"});
mbar.addItem(null,"Save As ...");
mbar.addItem(null,"Recent Files","recent");
mbar.addItem(null,"Exit");
//Recent menu
mbar = mnu2.createMenuBar("recent",120);
mbar.addItem(null,"Dynapi.js");
mbar.addItem(null,"Quickref.html");
mbar.addItem(null,"Changelog.html");
mbar.addItem(null,"Index.html");
//edit menu
mbar = mnu2.createMenuBar("edit",120);
mbar.addItem(null,"Undo");
mbar.addItem(null,"Cut");
mbar.addItem(null,"Copy");
mbar.addItem(null,"Paste");
//view menu
mbar = mnu2.createMenuBar("prods",130);
mbar.addItem(null,{image:px,text:"Icon #1"},"eicon1");
mbar.addItem(null,{image:px,text:"Icon #2"},"eicon2");
mbar.addItem(null,{image:px,text:"Icon #3"},"eicon3");
mbar = mnu2.createMenuBar("eicon1",40,36);
mbar.addItem(null,i3.getHTML());
mbar = mnu2.createMenuBar("eicon2",40,36);
mbar.addItem(null,i4.getHTML());
mbar = mnu2.createMenuBar("eicon3",40,36);
mbar.addItem(null,i5.getHTML());
</script> </head> <body>
The Image Menu
<script>
dynapi.document.insertChild(mnu);
</script>
<p>This is a great way to start your web page
A Vertical Way to start your day
<script>
dynapi.document.insertChild(mnu2);
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 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>Website Left Nav Example (with submenus built from JavaScript)</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/grids/grids.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/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 {
padding:.25em .5em;
background-color:#ccc;
}
div.yuimenu {
position:absolute;
visibility:hidden;
}
#productsandservices {
position:static;
visibility:visible;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
// "load" handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// Hides submenus of the root Menu instance
function hideSubmenus() {
if(oMenu.activeItem) {
var oSubmenu = oMenu.activeItem.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.hide();
}
}
}
// Cancels the call to "hideSubmenus"
function cancelTimer() {
if(nTimeoutId) {
window.clearTimeout(nTimeoutId);
}
}
// "mouseout" event handler for each submenu
function onSubmenuMouseOut(p_sType, p_aArguments, p_oMenu) {
cancelTimer();
nTimeoutId = window.setTimeout(hideSubmenus, 750);
}
// "beforeshow" handler for each submenu
function onMenuBeforeShow(p_sType, p_sArgs) {
// Check if the menu has any items. If not, add them
if(this.getItemGroups().length == 0) {
var aItemsData = this.itemsData,
nItems = aItemsData.length,
oItemData,
oItemConfig,
oSubmenu;
for(var i=0; i<nItems; i++) {
oItemData = aItemsData[i];
if(oItemData) {
oItemConfig = {};
if(oItemData.url) {
oItemConfig.url = oItemData.url;
}
if(oItemData.submenuItems) {
oSubmenu = new YAHOO.widget.Menu(oItemData.submenuId);
oSubmenu.itemsData = oItemData.submenuItems;
oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu, true);
oSubmenu.mouseOverEvent.subscribe(cancelTimer);
oSubmenu.mouseOutEvent.subscribe(onSubmenuMouseOut, oSubmenu, true);
oItemConfig.submenu = oSubmenu;
}
// Add the new YAHOO.widget.MenuItem instance to the Menu
this.addItem(new YAHOO.widget.MenuItem(oItemData.text, oItemConfig));
}
}
// Render the submenu into its parent MenuItem instance"s element
this.render(this.parent.element);
}
}
var nTimeoutId;
/*
Use a JSON-formatted data structure to define the data for
the submenus of the root menu
*/
var oMenuData = {
"communications": [
{ 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", submenuId: "pim", submenuItems: [
{ 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: "Photos", url: "http://photos.yahoo.ru" },
],
"shopping": [
{ 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: "Points", url: "http://points.yahoo.ru" },
{ 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" }
],
"entertainment": [
{ 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" }
],
"information": [
{ 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" }
]
};
// Initialize the root menu
var oMenu = new YAHOO.widget.Menu("productsandservices", { position: "static" });
// Initialize the submenus of the items in the root menu
var oCommunication = new YAHOO.widget.Menu("communications"),
oShopping = new YAHOO.widget.Menu("shopping"),
oEntertainment = new YAHOO.widget.Menu("entertainment"),
oInformation = new YAHOO.widget.Menu("information");
/*
Add a property ("itemsData") to each submenu that
is reference to the data for its items.
This data will be used in the "beforeshow" handler to add
the items to each submenu before it is displayed.
*/
oCommunication.itemsData = oMenuData["communications"];
oShopping.itemsData = oMenuData["shopping"];
oEntertainment.itemsData = oMenuData["entertainment"];
oInformation.itemsData = oMenuData["information"];
// Assign event handlers
// Add a "mouseover" event handler to the root menu
oMenu.mouseOverEvent.subscribe(cancelTimer);
// Add a "beforeshow" event handler to each submenu
oCommunication.beforeShowEvent.subscribe(onMenuBeforeShow, oCommunication, true);
oShopping.beforeShowEvent.subscribe(onMenuBeforeShow, oShopping, true);
oEntertainment.beforeShowEvent.subscribe(onMenuBeforeShow, oEntertainment, true);
oInformation.beforeShowEvent.subscribe(onMenuBeforeShow, oInformation, true);
// Add a "mouseover" event handler to each submenu
oCommunication.mouseOverEvent.subscribe(cancelTimer);
oShopping.mouseOverEvent.subscribe(cancelTimer);
oEntertainment.mouseOverEvent.subscribe(cancelTimer);
oInformation.mouseOverEvent.subscribe(cancelTimer);
// Add a "mouseout" event handler to each submenu
oCommunication.mouseOutEvent.subscribe(onSubmenuMouseOut, oCommunication, true);
oShopping.mouseOutEvent.subscribe(onSubmenuMouseOut, oShopping, true);
oEntertainment.mouseOutEvent.subscribe(onSubmenuMouseOut, oEntertainment, true);
oInformation.mouseOutEvent.subscribe(onSubmenuMouseOut, oInformation, true);
// Add a "click" handler to the document
YAHOO.util.Event.addListener(document, "click", hideSubmenus);
// Add the submenus to the items in the root menu
oMenu.getItem(0).cfg.setProperty("submenu", oCommunication);
oMenu.getItem(1).cfg.setProperty("submenu", oShopping);
oMenu.getItem(2).cfg.setProperty("submenu", oEntertainment);
oMenu.getItem(3).cfg.setProperty("submenu", oInformation);
// Render the root menu
oMenu.render();
}
// Add a "load" handler for the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body id="yahoo-com">
NOTE: This example demonstrates how to combine a menu built from existing markup with a menu built completely from JavaScript. The root menu in the left nav 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 root menu. This allows the user to skip the product landing pages and proceed directly to a given property. Alternatively, you can <a href="leftnavfrommarkup.html">add submenus to a menu using markup</a>
eugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
FOOTER: .
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 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>Website Left Nav Example (with submenus built from markup)</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/grids/grids.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/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 {
padding:.25em .5em;
background-color:#ccc;
}
div.yuimenu {
position:absolute;
visibility:hidden;
}
#productsandservices {
position:static;
visibility:visible;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
// "load" handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// Hides submenus of the root Menu instance
function hideSubmenus() {
if(oMenu.activeItem) {
var oSubmenu = oMenu.activeItem.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.hide();
}
}
}
// Cancels the call to "hideSubmenus"
function cancelTimer() {
if(nTimeoutId) {
window.clearTimeout(nTimeoutId);
}
}
// "mouseout" event handler for each submenu
function onSubmenuMouseOut(p_sType, p_aArguments, p_oMenu) {
cancelTimer();
nTimeoutId = window.setTimeout(hideSubmenus, 750);
}
var nTimeoutId;
// Initialize the root menu
var oMenu = new YAHOO.widget.Menu("productsandservices", { position: "static" });
// Render the root menu and corresponding submenus
oMenu.render();
var oCommunication = oMenu.getItem(0).cfg.getProperty("submenu"),
oPIM = oCommunication.getItem(5).cfg.getProperty("submenu"),
oShopping = oMenu.getItem(1).cfg.getProperty("submenu"),
oEntertainment = oMenu.getItem(2).cfg.getProperty("submenu"),
oInformation = oMenu.getItem(3).cfg.getProperty("submenu");
// Assign event handlers
// Add a "mouseover" event handler to the root menu
oMenu.mouseOverEvent.subscribe(cancelTimer);
// Add a "mouseover" event handler to each submenu
oCommunication.mouseOverEvent.subscribe(cancelTimer);
oPIM.mouseOverEvent.subscribe(cancelTimer);
oShopping.mouseOverEvent.subscribe(cancelTimer);
oEntertainment.mouseOverEvent.subscribe(cancelTimer);
oInformation.mouseOverEvent.subscribe(cancelTimer);
// Add a "mouseout" event handler to each submenu
oCommunication.mouseOutEvent.subscribe(onSubmenuMouseOut, oCommunication, true);
oPIM.mouseOutEvent.subscribe(onSubmenuMouseOut, oPIM, true);
oShopping.mouseOutEvent.subscribe(onSubmenuMouseOut, oShopping, true);
oEntertainment.mouseOutEvent.subscribe(onSubmenuMouseOut, oEntertainment, true);
oInformation.mouseOutEvent.subscribe(onSubmenuMouseOut, oInformation, true);
// Add a "click" handler to the document
YAHOO.util.Event.addListener(document, "click", hideSubmenus);
}
// Add a "load" handler for the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body id="yahoo-com">
NOTE: This example demonstrates how to build a menu with submenus created using existing markup. Alternatively, you can <a href="leftnavfromjs.html">add submenus to a menu using JavaScript</a>.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 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>Website Top Nav (with submenus built from JavaScript)</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/grids/grids.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/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 {
padding:.25em .5em;
background-color:#ccc;
}
#productsandservices {
visibility: visible;
margin:0 0 10px 0;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
// "load" handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// Hides submenus of the root Menubar instance
function hideSubmenus() {
if(oMenuBar.activeItem) {
var oSubmenu = oMenuBar.activeItem.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.hide();
}
}
}
// Cancels the call to "hideSubmenus"
function cancelTimer() {
if(nTimeoutId) {
window.clearTimeout(nTimeoutId);
}
}
// "mouseout" event handler for each submenu of the menubar
function onSubmenuMouseOut(p_sType, p_aArguments, p_oMenu) {
cancelTimer();
nTimeoutId = window.setTimeout(hideSubmenus, 750);
}
// "mouseover" handler for each item in the menubar
function onMenuBarItemMouseOver(p_sType, p_aArguments, p_oMenuItem) {
var oActiveItem = this.parent.activeItem;
// Hide any other submenus that might be visible
if(oActiveItem && oActiveItem != this) {
this.parent.clearActiveItem();
}
// Select and focus the current MenuItem instance
this.cfg.setProperty("selected", true);
this.focus();
// Show the submenu for this instance
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.show();
}
}
// "mouseout" handler for each item in the menubar
function onMenuBarItemMouseOut(p_sType, p_aArguments, p_oMenuItem) {
this.cfg.setProperty("selected", false);
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
var oDOMEvent = p_aArguments[0],
oRelatedTarget = YAHOO.util.Event.getRelatedTarget(oDOMEvent);
if(
!(
oRelatedTarget == oSubmenu.element ||
this._oDom.isAncestor(oSubmenu.element, oRelatedTarget)
)
) {
oSubmenu.hide();
}
}
}
// "beforeshow" handler for each submenu of the menubar
function onMenuBeforeShow(p_sType, p_sArgs) {
// Check if the menu has any items. If not, add them
if(this.getItemGroups().length == 0) {
var aItemsData = this.itemsData,
nItems = aItemsData.length,
oItemData,
oItemConfig,
oSubmenu;
for(var i=0; i<nItems; i++) {
oItemData = aItemsData[i];
if(oItemData) {
oItemConfig = {};
if(oItemData.url) {
oItemConfig.url = oItemData.url;
}
if(oItemData.submenuItems) {
oSubmenu = new YAHOO.widget.Menu(oItemData.submenuId);
oSubmenu.itemsData = oItemData.submenuItems;
oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu, true);
oSubmenu.mouseOverEvent.subscribe(cancelTimer);
oSubmenu.mouseOutEvent.subscribe(onSubmenuMouseOut, oSubmenu, true);
oItemConfig.submenu = oSubmenu;
}
// Add the new YAHOO.widget.MenuItem instance to the Menu
this.addItem(new YAHOO.widget.MenuItem(oItemData.text, oItemConfig));
}
}
// Render the submenu into its parent MenuItem instance"s element
this.render(this.parent.element);
}
}
var nTimeoutId;
/*
Use a JSON-formatted data structure to define the data for
the submenus of the menubar
*/
var oMenuData = {
"communications": [
{ 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", submenuId: "pim", submenuItems: [
{ 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: "Photos", url: "http://photos.yahoo.ru" },
],
"shopping": [
{ 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: "Points", url: "http://points.yahoo.ru" },
{ 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" }
],
"entertainment": [
{ 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" }
],
"information": [
{ 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" }
]
};
// Initialize the root menubar
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices");
// Initialize the submenus of the items in the root menubar
var oCommunications = new YAHOO.widget.Menu("communications"),
oShopping = new YAHOO.widget.Menu("shopping"),
oEntertainment = new YAHOO.widget.Menu("entertainment"),
oInformation = new YAHOO.widget.Menu("information");
/*
Add a property ("itemsData") to each submenu that
is reference to the data for its items.
This data will be used in the "beforeshow" handler to add
the items to each submenu before it is displayed.
*/
oCommunications.itemsData = oMenuData["communications"];
oShopping.itemsData = oMenuData["shopping"];
oEntertainment.itemsData = oMenuData["entertainment"];
oInformation.itemsData = oMenuData["information"];
// Assign event handlers
// Add a "mouseover" handler to the menubar
oMenuBar.mouseOverEvent.subscribe(cancelTimer);
// Add a "beforeshow" event handler to each submenu
oCommunications.beforeShowEvent.subscribe(onMenuBeforeShow, oCommunications, true);
oShopping.beforeShowEvent.subscribe(onMenuBeforeShow, oShopping, true);
oEntertainment.beforeShowEvent.subscribe(onMenuBeforeShow, oEntertainment, true);
oInformation.beforeShowEvent.subscribe(onMenuBeforeShow, oInformation, true);
// Add a "mouseover" event handler to each submenu
oCommunications.mouseOverEvent.subscribe(cancelTimer);
oShopping.mouseOverEvent.subscribe(cancelTimer);
oEntertainment.mouseOverEvent.subscribe(cancelTimer);
oInformation.mouseOverEvent.subscribe(cancelTimer);
// Add a "mouseout" event handler to each submenu
oCommunications.mouseOutEvent.subscribe(onSubmenuMouseOut, oCommunications, true);
oShopping.mouseOutEvent.subscribe(onSubmenuMouseOut, oShopping, true);
oEntertainment.mouseOutEvent.subscribe(onSubmenuMouseOut, oEntertainment, true);
oInformation.mouseOutEvent.subscribe(onSubmenuMouseOut, oInformation, true);
// Add the submenus to the items in the menubar
oMenuBar.getItem(0).cfg.setProperty("submenu", oCommunications);
oMenuBar.getItem(1).cfg.setProperty("submenu", oShopping);
oMenuBar.getItem(2).cfg.setProperty("submenu", oEntertainment);
oMenuBar.getItem(3).cfg.setProperty("submenu", oInformation);
// Add a "click" handler to the document
YAHOO.util.Event.addListener(document, "click", hideSubmenus);
/*
Add a "mouseover" and "mouseout" event handler each item
in the menubar
*/
var aMenuBarItems = oMenuBar.getItemGroups()[0],
oMenuItem,
i = aMenuBarItems.length - 1;
do {
oMenuItem = aMenuBarItems[i];
oMenuItem.mouseOverEvent.subscribe(onMenuBarItemMouseOver, oMenuItem, true);
oMenuItem.mouseOutEvent.subscribe(onMenuBarItemMouseOut, oMenuItem, true);
}
while(i--);
// Render the menubar
oMenuBar.render();
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body id="yahoo-com">
NOTE: This example demonstrates how to combine a menu built from existing markup with a menu built completely from JavaScript. The root menu in the top nav 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 root menu. This allows the user to skip the product landing pages and proceed directly to a given property. Alternatively, you can <a href="topnavfrommarkup.html">add submenus to a menubar using markup</a>
<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.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 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>Website Top Nav (with submenus built from markup)</title>
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/grids/grids.css">
<link rel="stylesheet" type="text/css" href="./build/menu/assets/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 {
padding:.25em .5em;
background-color:#ccc;
}
#productsandservices {
margin:0 0 10px 0;
}
div.yuimenu {
position:absolute;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/container/container_core.js"></script>
<script type="text/javascript" src="./build/menu/menu.js"></script>
<script type="text/javascript">
// "load" handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// Hides submenus of the root Menubar instance
function hideSubmenus() {
if(oMenuBar.activeItem) {
var oSubmenu = oMenuBar.activeItem.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.hide();
}
}
}
// Cancels the call to "hideSubmenus"
function cancelTimer() {
if(nTimeoutId) {
window.clearTimeout(nTimeoutId);
}
}
// "mouseout" event handler for each submenu of the menubar
function onSubmenuMouseOut(p_sType, p_aArguments, p_oMenu) {
cancelTimer();
nTimeoutId = window.setTimeout(hideSubmenus, 750);
}
// "mouseover" handler for each item in the menubar
function onMenuBarItemMouseOver(p_sType, p_aArguments, p_oMenuItem) {
var oActiveItem = this.parent.activeItem;
// Hide any other submenus that might be visible
if(oActiveItem && oActiveItem != this) {
this.parent.clearActiveItem();
}
// Select and focus the current MenuItem instance
this.cfg.setProperty("selected", true);
this.focus();
// Show the submenu for this instance
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.show();
}
}
// "mouseout" handler for each item in the menubar
function onMenuBarItemMouseOut(p_sType, p_aArguments, p_oMenuItem) {
this.cfg.setProperty("selected", false);
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
var oDOMEvent = p_aArguments[0],
oRelatedTarget = YAHOO.util.Event.getRelatedTarget(oDOMEvent);
if(
!(
oRelatedTarget == oSubmenu.element ||
this._oDom.isAncestor(oSubmenu.element, oRelatedTarget)
)
) {
oSubmenu.hide();
}
}
}
var nTimeoutId;
// Instantiate and render the menubar and corresponding submenus
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices");
oMenuBar.render();
/*
Add a "mouseover" and "mouseout" event handler each item
in the menu bar
*/
var aMenuBarItems = oMenuBar.getItemGroups()[0],
i = aMenuBarItems.length - 1;
do {
aMenuBarItems[i].mouseOverEvent.subscribe(onMenuBarItemMouseOver);
aMenuBarItems[i].mouseOutEvent.subscribe(onMenuBarItemMouseOut);
}
while(i--);
// Assign event handlers
// Add a "mouseover" handler to the menubar
oMenuBar.mouseOverEvent.subscribe(cancelTimer);
var oCommunication = oMenuBar.getItem(0).cfg.getProperty("submenu"),
oPIM = oCommunication.getItem(5).cfg.getProperty("submenu"),
oShopping = oMenuBar.getItem(1).cfg.getProperty("submenu"),
oEntertainment = oMenuBar.getItem(2).cfg.getProperty("submenu"),
oInformation = oMenuBar.getItem(3).cfg.getProperty("submenu");
// Add a "mouseover" event handler to each submenu
oCommunication.mouseOverEvent.subscribe(cancelTimer);
oPIM.mouseOverEvent.subscribe(cancelTimer);
oShopping.mouseOverEvent.subscribe(cancelTimer);
oEntertainment.mouseOverEvent.subscribe(cancelTimer);
oInformation.mouseOverEvent.subscribe(cancelTimer);
// Add a "mouseout" event handler to each submenu
oCommunication.mouseOutEvent.subscribe(onSubmenuMouseOut, oCommunication, true);
oPIM.mouseOutEvent.subscribe(onSubmenuMouseOut, oPIM, true);
oShopping.mouseOutEvent.subscribe(onSubmenuMouseOut, oShopping, true);
oEntertainment.mouseOutEvent.subscribe(onSubmenuMouseOut, oEntertainment, true);
oInformation.mouseOutEvent.subscribe(onSubmenuMouseOut, oInformation, true);
// Add a "click" handler to the document
YAHOO.util.Event.addListener(document, "click", hideSubmenus);
}
// Add a "load" handler for the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body id="yahoo-com">
NOTE: This example demonstrates how to build a menubar with submenus created using existing markup. Alternatively, you can <a href="topnavfromjs.html">add submenus to a menubar using JavaScript</a>.
<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.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/xmenu-xlayer-3.zip">xmenu-xlayer-3.zip( 116 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/PopupMenu.htm">Popup Menu</a> <A href="/Code/JavaScript/GUI-Components/PopupMenu.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/AtJsMenuDemo.htm">AtJsMenu Demo</a> <A href="/Code/JavaScript/GUI-Components/AtJsMenuDemo.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/Example1BasicMenuFromExistingMarkup.htm">Example 1: Basic Menu From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example1BasicMenuFromExistingMarkup.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/Example2BasicMenuFromPureJavaScript.htm">Example 2: Basic Menu From Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example2BasicMenuFromPureJavaScript.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/Example3GroupedMenuItemInstancesFromExistingMarkup.htm">Example 3: Grouped MenuItem Instances From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example3GroupedMenuItemInstancesFromExistingMarkup.htm"></a> 6. <A href="/Code/JavaScript/GUI-Components/Example4GroupedMenuItemInstancesUsingPureJavaScript.htm">Example 4: Grouped MenuItem Instances Using Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example4GroupedMenuItemInstancesUsingPureJavaScript.htm"></a> 7. <A href="/Code/JavaScript/GUI-Components/Example5GroupedMenuItemInstancesWithTitlesFromExistingMarkup.htm">Example 5: Grouped MenuItem Instances With Titles From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example5GroupedMenuItemInstancesWithTitlesFromExistingMarkup.htm"></a> 8. <A href="/Code/JavaScript/GUI-Components/Example6GroupedMenuItemInstancesWithTitlesUsingPureJavaScript.htm">Example 6: Grouped MenuItem Instances With Titles Using Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example6GroupedMenuItemInstancesWithTitlesUsingPureJavaScript.htm"></a> 9. <A href="/Code/JavaScript/GUI-Components/Example7MultitieredMenuFromExistingMarkup.htm">Example 7: Multi-tiered Menu From Existing Markup</a> <A href="/Code/JavaScript/GUI-Components/Example7MultitieredMenuFromExistingMarkup.htm"></a> 10. <A href="/Code/JavaScript/GUI-Components/Example8MultitieredMenuFromPureJavaScript.htm">Example 8: Multi-tiered Menu From Pure JavaScript</a> <A href="/Code/JavaScript/GUI-Components/Example8MultitieredMenuFromPureJavaScript.htm"></a> 11. <A href="/Code/JavaScript/GUI-Components/Example9HandlingClickEvents.htm">Example 9: Handling Click Events</a> <A href="/Code/JavaScript/GUI-Components/Example9HandlingClickEvents.htm"></a> 12. <A href="/Code/JavaScript/GUI-Components/Example10ListeningForDOMRelatedEvents.htm">Example 10: Listening For DOM-Related Events</a> <A href="/Code/JavaScript/GUI-Components/Example10ListeningForDOMRelatedEvents.htm"></a> 13. <A href="/Code/JavaScript/GUI-Components/Example11MenuItemConfigurationProperties.htm">Example 11: MenuItem Configuration Properties</a> <A href="/Code/JavaScript/GUI-Components/Example11MenuItemConfigurationProperties.htm"></a> 14. <A href="/Code/JavaScript/GUI-Components/Example12SettingConfigurationPropertiesAtRuntime.htm">Example 12: Setting Configuration Properties At Runtime</a> <A href="/Code/JavaScript/GUI-Components/Example12SettingConfigurationPropertiesAtRuntime.htm"></a> 15. <A href="/Code/JavaScript/GUI-Components/Example13MultitieredMenuwithProgressiveRenderingofSubmenus.htm">Example 13: Multi-tiered Menu with Progressive Rendering of Submenus</a> <A href="/Code/JavaScript/GUI-Components/Example13MultitieredMenuwithProgressiveRenderingofSubmenus.htm"></a> 16. <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfromJavaScript1.htm">Website Left Nav Example (with submenus built from JavaScript) 1</a> <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfromJavaScript1.htm"></a> 17. <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfrommarkup2.htm">Website Left Nav Example (with submenus built from markup) 2</a> <A href="/Code/JavaScript/GUI-Components/WebsiteLeftNavExamplewithsubmenusbuiltfrommarkup2.htm"></a> 18. <A href="/Code/JavaScript/GUI-Components/OSStyleProgramsMenuExample.htm">OS-Style Programs Menu Example</a> <A href="/Code/JavaScript/GUI-Components/OSStyleProgramsMenuExample.htm"></a> 19. <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfromJavaScript3.htm">Website Top Nav (with submenus built from JavaScript) 3</a> <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfromJavaScript3.htm"></a> 20. <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfrommarkup4.htm">Website Top Nav (with submenus built from markup) 4</a> <A href="/Code/JavaScript/GUI-Components/WebsiteTopNavwithsubmenusbuiltfrommarkup4.htm"></a> 21. <A href="/Code/JavaScript/GUI-Components/Dropdownmenuandsubmenu.htm">Drop down menu and sub menu</a> <A href="/Code/JavaScript/GUI-Components/Dropdownmenuandsubmenu.htm"></a> 22. <A href="/Code/JavaScript/GUI-Components/Verticalmenuandimagemenu.htm">Vertical menu and image menu</a> <A href="/Code/JavaScript/GUI-Components/Verticalmenuandimagemenu.htm"></a> 23. <A href="/Code/JavaScript/GUI-Components/EmulateXPstartmenu.htm">Emulate XP start menu</a> <A href="/Code/JavaScript/GUI-Components/EmulateXPstartmenu.htm"></a> 24. <A href="/Code/JavaScript/GUI-Components/treemenu.htm">tree-menu</a> <A href="/Code/JavaScript/GUI-Components/treemenu.htm"></a> 25. <A href="/Code/JavaScript/GUI-Components/menuforapplications.htm">menu for applications</a> <A href="/Code/JavaScript/GUI-Components/menuforapplications.htm"></a>
