Example 13: Multi-tiered Menu with Progressive Rendering of Submenus
<!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>
<!-- Standard reset and fonts -->
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<!-- Logger CSS -->
<link rel="stylesheet" type="text/css" href="./build/logger/assets/logger.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
#logs {
position:absolute;
bottom:0;
right:0;
}
.example13 {
background-color:#9c9;
}
</style>
<!-- Namespace source file -->
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<!-- Dependency source files -->
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<!-- Logger source file -->
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- Container source file -->
<script type="text/javascript" src="./build/container/container_core.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="./build/menu/menu.js"></script>
<!-- Page-specific 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.com" },
{ text: "Alerts", url: "http://alerts.yahoo.com" },
{ text: "Avatars", url: "http://avatars.yahoo.com" },
{ text: "Groups", url: "http://groups.yahoo.com " },
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
{ text: "PIM", submenuId: "pim", submenuItems: [
{ text: "Yahoo! Mail", url:"http://mail.yahoo.com" },
{ text: "Yahoo! Address Book", url:"http://addressbook.yahoo.com" },
{ text: "Yahoo! Calendar", url:"http://calendar.yahoo.com" },
{ text: "Yahoo! Notepad", url:"http://notepad.yahoo.com" }
]
},
{ text: "Member Directory", url: "http://members.yahoo.com" },
{ text: "Messenger", url: "http://messenger.yahoo.com" },
{ text: "Mobile", url: "http://mobile.yahoo.com" },
{ text: "Photos", url: "http://photos.yahoo.com" },
],
"shopping": [
{ text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
{ text: "Autos", url: "http://autos.yahoo.com" },
{ text: "Classifieds", url: "http://classifieds.yahoo.com" },
{ text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
{ text: "Points", url: "http://points.yahoo.com" },
{ text: "Real Estate", url: "http://realestate.yahoo.com" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "Wallet", url: "http://wallet.yahoo.com" },
{ text: "Yellow Pages", url: "http://yp.yahoo.com" }
],
"entertainment": [
{ text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
{ text: "Games", url: "http://games.yahoo.com" },
{ text: "Kids", url: "http://www.yahooligans.com" },
{ text: "Music", url: "http://music.yahoo.com" },
{ text: "Movies", url: "http://movies.yahoo.com" },
{ text: "Radio", url: "http://music.yahoo.com/launchcast" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "TV", url: "http://tv.yahoo.com" }
],
"information": [
{ text: "Downloads", url: "http://downloads.yahoo.com" },
{ text: "Finance", url: "http://finance.yahoo.com" },
{ text: "Health", url: "http://health.yahoo.com" },
{ text: "Local", url: "http://local.yahoo.com" },
{ text: "Maps & Directions", url: "http://maps.yahoo.com" },
{ text: "My Yahoo!", url: "http://my.yahoo.com" },
{ text: "News", url: "http://news.yahoo.com" },
{ text: "Search", url: "http://search.yahoo.com" },
{ text: "Small Business", url: "http://smallbusiness.yahoo.com" },
{ text: "Weather", url: "http://weather.yahoo.com" }
]
};
/*
"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>
<h1>Example 13: Multi-tiered Menu with Progressive Rendering of Submenus</h1>
<p>This example demonstrates how to create a menu with submenus that are rendered on the fly.</p>
<div id="productsandservices" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a href="http://communication.yahoo.com">Communication</a></li>
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a></li>
<li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a></li>
<li class="yuimenuitem">Information</li>
</ul>
</div>
</div>
</body>
</html>
yui.zip( 3,714 k)Related examples in the same category