upgraded to yui 0.12.0
upgraded to yui-ext 0.33 rc2
This commit is contained in:
JT Smith
parent
62b3d90db7
commit
cfd09a5cb6
1271 changed files with 539033 additions and 0 deletions
298
www/extras/yui/examples/menu/applicationmenubar.html
Normal file
298
www/extras/yui/examples/menu/applicationmenubar.html
Normal file
|
|
@ -0,0 +1,298 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Application Menubar (YUI Library)</title>
|
||||
|
||||
<!-- 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">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/container/assets/container.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
<style type="text/css">
|
||||
|
||||
body {
|
||||
|
||||
background-color:#dfb8df;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Define a new style for each menu bar */
|
||||
|
||||
div.yuimenubar {
|
||||
|
||||
border-width:1px 0;
|
||||
border-color:#666;
|
||||
border-style:solid;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
div.yuimenubar div.bd {
|
||||
|
||||
border-width:1px 0;
|
||||
border-color:#ddd;
|
||||
border-style:solid;
|
||||
|
||||
}
|
||||
|
||||
div.yuimenubar li.yuimenubaritem {
|
||||
|
||||
border-width:0;
|
||||
border-style:none;
|
||||
padding:4px 12px;
|
||||
|
||||
}
|
||||
|
||||
div.yuimenubar li.yuimenubaritem img {
|
||||
|
||||
margin:0;
|
||||
border:0;
|
||||
height:1px;
|
||||
width:1px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Define a new style for each menu */
|
||||
|
||||
div.yuimenu {
|
||||
|
||||
border:solid 1px #666;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu div.bd {
|
||||
|
||||
border-width:0;
|
||||
border-style:none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Define a new style for each menu item */
|
||||
|
||||
div.yuimenu li.yuimenuitem {
|
||||
|
||||
padding-top:4px;
|
||||
padding-bottom:4px;
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li.yuimenuitem img {
|
||||
|
||||
height:8px;
|
||||
width:8px;
|
||||
margin:0 -16px 0 10px;
|
||||
border:0;
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu ul {
|
||||
|
||||
border:solid 1px #666;
|
||||
border-width:1px 0 0 0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Define a new style for an item's "selected" state */
|
||||
|
||||
div.yuimenu li.selected,
|
||||
div.yuimenubar li.selected {
|
||||
|
||||
background-color:#039;
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li.selected a.selected,
|
||||
div.yuimenubar li.selected a.selected {
|
||||
|
||||
text-decoration:none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Define a new style for an item's "disabled" state */
|
||||
|
||||
div.yuimenu li.disabled a.disabled,
|
||||
div.yuimenu li.disabled em.disabled,
|
||||
div.yuimenubar li.disabled a.disabled {
|
||||
|
||||
color:#666;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
<script type="text/javascript">
|
||||
|
||||
/**
|
||||
* Constant representing the path to the image to be used for the
|
||||
* submenu arrow indicator.
|
||||
* @final
|
||||
* @type String
|
||||
*/
|
||||
YAHOO.widget.MenuBarItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH =
|
||||
"promo/m/irs/blank.gif";
|
||||
|
||||
|
||||
/**
|
||||
* Constant representing the path to the image to be used for the
|
||||
* submenu arrow indicator when a MenuBarItem instance is selected.
|
||||
* @final
|
||||
* @type String
|
||||
*/
|
||||
YAHOO.widget.MenuBarItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH =
|
||||
"promo/m/irs/blank.gif";
|
||||
|
||||
|
||||
/**
|
||||
* Constant representing the path to the image to be used for the
|
||||
* submenu arrow indicator when a MenuBarItem instance is disabled.
|
||||
* @final
|
||||
* @type String
|
||||
*/
|
||||
YAHOO.widget.MenuBarItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH =
|
||||
"promo/m/irs/blank.gif";
|
||||
|
||||
|
||||
// "load" event handler for the window
|
||||
|
||||
YAHOO.example.onWindowLoad = function(p_oEvent) {
|
||||
|
||||
|
||||
var aItemData = [
|
||||
|
||||
{ text:"File", submenu:{ id:"filemenu", itemdata:[
|
||||
|
||||
{ text:"New File", helptext:"Ctrl + N" },
|
||||
"New Folder",
|
||||
{ text:"Open", helptext:"Ctrl + O" },
|
||||
{ text:"Open With...", submenu: { id:"applications", itemdata: [
|
||||
"Application 1",
|
||||
"Application 2",
|
||||
"Application 3",
|
||||
"Application 4"
|
||||
] }
|
||||
},
|
||||
{ text:"Print", helptext: "Ctrl + P" }
|
||||
|
||||
] }
|
||||
|
||||
},
|
||||
|
||||
{ text:"Edit", submenu:{ id: "editmenu", itemdata: [
|
||||
|
||||
[
|
||||
{ text:"Undo", helptext: "Ctrl + Z" },
|
||||
{ text:"Redo", helptext: "Ctrl + Y", disabled: true }
|
||||
],
|
||||
|
||||
[
|
||||
{ text:"Cut", helptext: "Ctrl + X", disabled: true },
|
||||
{ text:"Copy", helptext: "Ctrl + C", disabled: true },
|
||||
{ text:"Paste", helptext: "Ctrl + V" },
|
||||
{ text:"Delete", helptext: "Del", disabled: true }
|
||||
],
|
||||
|
||||
[ { text:"Select All", helptext: "Ctrl + A" } ],
|
||||
|
||||
[
|
||||
{ text:"Find", helptext: "Ctrl + F" },
|
||||
{ text:"Find Again", helptext: "Ctrl + G" }
|
||||
]
|
||||
|
||||
] }
|
||||
|
||||
},
|
||||
|
||||
"View",
|
||||
|
||||
"Favorites",
|
||||
|
||||
"Tools",
|
||||
|
||||
"Help",
|
||||
|
||||
{ text:"Examples Home", url:"index.html" }
|
||||
|
||||
];
|
||||
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("menubar", { itemdata:aItemData });
|
||||
|
||||
|
||||
// Render the MenuBar instance and corresponding submenus
|
||||
|
||||
oMenuBar.render(document.body);
|
||||
|
||||
|
||||
var oPanel = new YAHOO.widget.SimpleDialog(
|
||||
"exampleinfo",
|
||||
{
|
||||
constraintoviewport: true,
|
||||
fixedcenter:true,
|
||||
width:"400px",
|
||||
zIndex:1
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
oPanel.setHeader("Application Menubar Example");
|
||||
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
|
||||
|
||||
oPanel.render(document.body);
|
||||
|
||||
oPanel.show();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Add a "load" handler for the window
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
527
www/extras/yui/examples/menu/contextmenu.html
Normal file
527
www/extras/yui/examples/menu/contextmenu.html
Normal file
|
|
@ -0,0 +1,527 @@
|
|||
<!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: Context Menu (YUI Library)</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">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
<style type="text/css">
|
||||
|
||||
h1 {
|
||||
|
||||
font-weight:bold;
|
||||
margin:0 0 1em 0;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
padding:1em;
|
||||
|
||||
}
|
||||
|
||||
p, ul {
|
||||
|
||||
margin:1em 0;
|
||||
|
||||
}
|
||||
|
||||
h1 em,
|
||||
p em,
|
||||
#operainstructions li em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
#operainstructions {
|
||||
|
||||
list-style-type:square;
|
||||
margin-left:2em;
|
||||
|
||||
}
|
||||
|
||||
#clones {
|
||||
|
||||
background:#99cc66 url(img/grass.png);
|
||||
|
||||
/* Hide the alpha PNG from IE 6 */
|
||||
_background-image:none;
|
||||
|
||||
width:450px;
|
||||
height:400px;
|
||||
overflow:auto;
|
||||
|
||||
}
|
||||
|
||||
#clones li {
|
||||
|
||||
float:left;
|
||||
display:inline;
|
||||
border:solid 1px #000;
|
||||
background-color:#fff;
|
||||
margin:10px;
|
||||
text-align:center;
|
||||
zoom:1;
|
||||
|
||||
}
|
||||
|
||||
#clones li img {
|
||||
|
||||
border:solid 1px #000;
|
||||
margin:5px;
|
||||
|
||||
}
|
||||
|
||||
#clones li cite {
|
||||
|
||||
display:block;
|
||||
text-align:center;
|
||||
margin:0 0 5px 0;
|
||||
padding:0 5px;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../build/animation/animation.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">
|
||||
|
||||
// "load" event handler for the "window" object
|
||||
|
||||
YAHOO.example.onWindowLoad = function(p_oEvent) {
|
||||
|
||||
|
||||
var oClones = document.getElementById("clones");
|
||||
|
||||
// Clone the first ewe so that we can create more later
|
||||
|
||||
var oLI = oClones.getElementsByTagName("li")[0];
|
||||
var oClone = oLI.cloneNode(true);
|
||||
|
||||
|
||||
// Renames an "Ewe"
|
||||
|
||||
function EditEweName(p_oLI) {
|
||||
|
||||
var oCite = p_oLI.lastChild;
|
||||
|
||||
if(oCite.nodeType != 1) {
|
||||
|
||||
oCite = oCite.previousSibling;
|
||||
|
||||
}
|
||||
|
||||
var oTextNode = oCite.firstChild;
|
||||
|
||||
var sName =
|
||||
window.prompt(
|
||||
"Enter a new name for ",
|
||||
oTextNode.nodeValue
|
||||
);
|
||||
|
||||
if(sName && sName.length > 0) {
|
||||
|
||||
oTextNode.nodeValue = sName;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Clones an "Ewe"
|
||||
|
||||
function CloneEwe(p_oLI, p_oMenu) {
|
||||
|
||||
p_oMenu.cfg.setProperty("trigger", null);
|
||||
|
||||
var oClone = p_oLI.cloneNode(true);
|
||||
|
||||
p_oLI.parentNode.appendChild(oClone);
|
||||
|
||||
p_oMenu.cfg.setProperty("trigger", oClones.childNodes);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Deletes an "Ewe"
|
||||
|
||||
function DeleteEwe(p_oLI) {
|
||||
|
||||
var oUL = p_oLI.parentNode;
|
||||
|
||||
oUL.removeChild(p_oLI);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Returns the LI instance that is the parent node of the target
|
||||
of a "contextmenu" event
|
||||
*/
|
||||
|
||||
function GetListItemFromEventTarget(p_oNode) {
|
||||
|
||||
var oLI;
|
||||
|
||||
if(p_oNode.tagName == "LI") {
|
||||
|
||||
oLI = p_oNode;
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
/*
|
||||
If the target of the event was a child of an LI,
|
||||
get the parent LI element
|
||||
*/
|
||||
|
||||
do {
|
||||
|
||||
if(p_oNode.tagName == "LI") {
|
||||
|
||||
oLI = p_oNode;
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
while((p_oNode = p_oNode.parentNode));
|
||||
|
||||
}
|
||||
|
||||
return oLI;
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "click" event handler for each item in the ewe context menu
|
||||
|
||||
function onEweContextMenuClick(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
var oItem = p_aArgs[1];
|
||||
|
||||
if(oItem) {
|
||||
|
||||
var oLI = GetListItemFromEventTarget(this.contextEventTarget);
|
||||
|
||||
switch(oItem.index) {
|
||||
|
||||
case 0: // Edit name
|
||||
|
||||
EditEweName(oLI);
|
||||
|
||||
break;
|
||||
|
||||
|
||||
case 1: // Clone
|
||||
|
||||
CloneEwe(oLI, this);
|
||||
|
||||
break;
|
||||
|
||||
|
||||
case 2: // Delete
|
||||
|
||||
DeleteEwe(oLI);
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "keydown" event handler for the ewe context menu
|
||||
|
||||
function onEweContextMenuKeyDown(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
var oDOMEvent = p_aArgs[0];
|
||||
|
||||
if(oDOMEvent.shiftKey) {
|
||||
|
||||
var oLI = GetListItemFromEventTarget(this.contextEventTarget);
|
||||
|
||||
switch(oDOMEvent.keyCode) {
|
||||
|
||||
case 69: // Edit name
|
||||
|
||||
EditEweName(oLI);
|
||||
|
||||
this.hide();
|
||||
|
||||
break;
|
||||
|
||||
case 67: // Clone
|
||||
|
||||
CloneEwe(oLI, this);
|
||||
|
||||
this.hide();
|
||||
|
||||
break;
|
||||
|
||||
case 68: // Delete
|
||||
|
||||
DeleteEwe(oLI);
|
||||
|
||||
this.hide();
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "render" event handler for the ewe context menu
|
||||
|
||||
function onContextMenuRender(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
// Add a "click" event handler to the ewe context menu
|
||||
|
||||
this.clickEvent.subscribe(onEweContextMenuClick, oEweContextMenu, true);
|
||||
|
||||
|
||||
// Add a "keydown" event handler to the ewe context menu
|
||||
|
||||
this.keyDownEvent.subscribe(onEweContextMenuKeyDown,oEweContextMenu,true);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "click" event handler for the field context menu
|
||||
|
||||
function onFieldMenuClick(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
// Get a reference to the item in the menu that was clicked
|
||||
|
||||
var oItem = p_aArgs[1];
|
||||
|
||||
|
||||
if(oItem) {
|
||||
|
||||
switch(oItem.index) {
|
||||
|
||||
case 1:
|
||||
|
||||
oClones.innerHTML = "";
|
||||
|
||||
oEweContextMenu.cfg.setProperty("target", null);
|
||||
|
||||
oItem.cfg.setProperty("disabled", true);
|
||||
|
||||
break;
|
||||
|
||||
case 2:
|
||||
|
||||
var oLI = this.clone.cloneNode(true);
|
||||
|
||||
oClones.appendChild(oLI);
|
||||
|
||||
this.getItem(1).cfg.setProperty("disabled", false);
|
||||
|
||||
oEweContextMenu.cfg.setProperty("trigger", oClones.childNodes);
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "click" event handler for the field colors submenu
|
||||
|
||||
function onFieldColorsClick(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
// Get a reference to the item in the menu that was clicked
|
||||
|
||||
var oItem = p_aArgs[1];
|
||||
|
||||
|
||||
if(oItem && this.checkedItem != oItem) {
|
||||
|
||||
YAHOO.util.Dom.setStyle("clones", "backgroundColor", oItem.value);
|
||||
|
||||
oItem.cfg.setProperty("checked", true);
|
||||
|
||||
|
||||
this.checkedItem.cfg.setProperty("checked", false);
|
||||
|
||||
this.checkedItem = oItem;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "render" event handler for the field colors submenu
|
||||
|
||||
function onFieldColorsRender(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
this.checkedItem = this.getItem(0);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "render" event handler for the field context menu
|
||||
|
||||
function onFieldMenuRender(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
// Get a reference to the field colors submenu
|
||||
|
||||
var oFieldColors = this.getItem(0).cfg.getProperty("submenu");
|
||||
|
||||
|
||||
// Add a "render" event handler to the field colors submenu
|
||||
|
||||
oFieldColors.renderEvent.subscribe(onFieldColorsRender, oFieldColors, true);
|
||||
|
||||
|
||||
// Add a "render" event handler to the field colors submenu
|
||||
|
||||
oFieldColors.clickEvent.subscribe(onFieldColorsClick, oFieldColors, true);
|
||||
|
||||
|
||||
// Add a "click" event handler to the field context menu
|
||||
|
||||
this.clickEvent.subscribe(onFieldMenuClick, this, true);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Define the items for the ewe context menu
|
||||
|
||||
var aMenuItems = [
|
||||
{ text: "Edit Name", helptext: "Shift + E" },
|
||||
{ text: "Clone", helptext: "Shift + C" },
|
||||
{ text: "Delete", helptext: "Shift + D" }
|
||||
];
|
||||
|
||||
|
||||
// Create the ewe context menu
|
||||
|
||||
var oEweContextMenu = new YAHOO.widget.ContextMenu(
|
||||
"ewecontextmenu",
|
||||
{
|
||||
trigger: oClones.childNodes,
|
||||
itemdata: aMenuItems,
|
||||
lazyload: true,
|
||||
effect:{
|
||||
effect:YAHOO.widget.ContainerEffect.FADE,
|
||||
duration:0.25
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// Add a "render" event handler to the ewe context menu
|
||||
|
||||
oEweContextMenu.renderEvent.subscribe(onContextMenuRender, oEweContextMenu, true);
|
||||
|
||||
|
||||
// Define the items for the field context menu
|
||||
|
||||
var oFieldContextMenuItemData = [
|
||||
|
||||
{
|
||||
text:"Field color",
|
||||
submenu: { id:"fieldcolors", itemdata: [
|
||||
{ text:"Light Green", value:"#99cc66", checked: true },
|
||||
{ text:"Medium Green", value:"#669933" },
|
||||
{ text:"Dark Green", value:"#336600" }
|
||||
] }
|
||||
},
|
||||
"Delete all",
|
||||
"New Ewe"
|
||||
|
||||
];
|
||||
|
||||
|
||||
// Create a context menu for the field the ewes live in
|
||||
|
||||
var oFieldContextMenu = new YAHOO.widget.ContextMenu(
|
||||
"fieldcontextmenu",
|
||||
{
|
||||
trigger: "clones",
|
||||
itemdata: oFieldContextMenuItemData,
|
||||
lazyload: true,
|
||||
effect:{
|
||||
effect:YAHOO.widget.ContainerEffect.FADE,
|
||||
duration:0.1
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
oFieldContextMenu.clone = oClone;
|
||||
|
||||
|
||||
// Add a "render" event handler to the field context menu
|
||||
|
||||
oFieldContextMenu.renderEvent.subscribe(onFieldMenuRender, oFieldContextMenu, true);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Assign a "load" event handler to the window
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Context Menu (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<p>This example features two context menus. There is one for each ewe that is created and one for the green field that the ewes graze in. You can use the ewe context menu to rename, clone or delete Dolly. The field's context menu allows you to delete all the ewes from the field, add a new ewe and modify the color of the grass.</p>
|
||||
|
||||
<p><em>Please Note:</em> Opera users will need to do the following to use this example:</p>
|
||||
|
||||
<ul id="operainstructions">
|
||||
<li><em>Opera for Windows:</em> Hold down the control key and click with the left mouse button.</li>
|
||||
<li><em>Opera for OS X:</em> Hold down the command key (⌘) and click with the left mouse button.</li>
|
||||
</ul>
|
||||
|
||||
<ul id="clones">
|
||||
<li><a href="http://en.wikipedia.org/wiki/Dolly_%28clone%29"><img src="img/dolly.jpg" width="100" height="100" alt="Dolly, a ewe, the first mammal to have been successfully cloned from an adult cell."></a><cite>Dolly</cite></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
115
www/extras/yui/examples/menu/example01.html
Normal file
115
www/extras/yui/examples/menu/example01.html
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
<!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: Basic Menu From Markup (YUI Library)</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">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
div.yuimenu {
|
||||
|
||||
position:absolute;
|
||||
visibility:hidden;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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.onMenuAvailable = function(p_oEvent) {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
|
||||
|
||||
oMenu.render();
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.onAvailable("basicmenu", YAHOO.example.onMenuAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Basic Menu From Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>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>.</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
<div id="basicmenu" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
106
www/extras/yui/examples/menu/example02.html
Normal file
106
www/extras/yui/examples/menu/example02.html
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<!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: Basic Menu From JavaScript (YUI Library)</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">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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) {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
|
||||
|
||||
oMenu.addItems([
|
||||
|
||||
{ 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" }
|
||||
|
||||
]);
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Basic Menu From JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>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>.</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
127
www/extras/yui/examples/menu/example03.html
Normal file
127
www/extras/yui/examples/menu/example03.html
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<!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: Grouped Menu Items Using Markup (YUI Library)</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">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
div.yuimenu {
|
||||
|
||||
position:absolute;
|
||||
visibility:hidden;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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.onMenuAvailable = function(p_oEvent) {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
|
||||
|
||||
oMenu.render();
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.onAvailable("menuwithgroups", YAHOO.example.onMenuAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Grouped Menu Items Using Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>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>.</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
<div id="menuwithgroups" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Yahoo! Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Yahoo! Maps</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Yahoo! Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Yahoo! Shopping</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">Yahoo! 360</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Yahoo! Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Yahoo! Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
126
www/extras/yui/examples/menu/example04.html
Normal file
126
www/extras/yui/examples/menu/example04.html
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<!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: Grouped Menu Items Using JavaScript (YUI Library)</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">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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) {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
|
||||
|
||||
oMenu.addItems([
|
||||
|
||||
[
|
||||
{ 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:"Yahoo! Local", url:"http://local.yahoo.com" },
|
||||
{ text:"Yahoo! Maps", url:"http://maps.yahoo.com" },
|
||||
{ text:"Yahoo! Travel", url:"http://travel.yahoo.com" },
|
||||
{ text:"Yahoo! Shopping", url:"http://shopping.yahoo.com" }
|
||||
|
||||
],
|
||||
|
||||
[
|
||||
|
||||
{ text:"Yahoo! Messenger", url:"http://messenger.yahoo.com" },
|
||||
{ text:"Yahoo! 360", url:"http://360.yahoo.com" },
|
||||
{ text:"Yahoo! Groups", url:"http://groups.yahoo.com" },
|
||||
{ text:"Yahoo! Photos", url:"http://photos.yahoo.com" }
|
||||
|
||||
]
|
||||
|
||||
]);
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Grouped Menu Items Using JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>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>.</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
130
www/extras/yui/examples/menu/example05.html
Normal file
130
www/extras/yui/examples/menu/example05.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<!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: Grouped Menu Items With Titles From Markup (YUI Library)</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">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
div.yuimenu {
|
||||
|
||||
position:absolute;
|
||||
visibility:hidden;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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.onMenuAvailable = function(p_oEvent) {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
|
||||
|
||||
oMenu.render();
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.onAvailable("menuwithgroups", YAHOO.example.onMenuAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Grouped Menu Items With Titles From Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>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>.</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
<div id="menuwithgroups" class="yuimenu">
|
||||
<div class="bd">
|
||||
<h6 class="first-of-type">Yahoo! PIM</h6>
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
<h6>Yahoo! Search</h6>
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Yahoo! Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Yahoo! Maps</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Yahoo! Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Yahoo! Shopping</a></li>
|
||||
</ul>
|
||||
<h6>Yahoo! Communications</h6>
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">Yahoo! 360</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Yahoo! Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Yahoo! Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
130
www/extras/yui/examples/menu/example06.html
Normal file
130
www/extras/yui/examples/menu/example06.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<!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: Grouped Menu Items With Titles From JavaScript (YUI Library)</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">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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) {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
|
||||
|
||||
oMenu.addItems([
|
||||
|
||||
[
|
||||
{ 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:"Yahoo! Local", url:"http://local.yahoo.com" },
|
||||
{ text:"Yahoo! Maps", url:"http://maps.yahoo.com" },
|
||||
{ text:"Yahoo! Travel", url:"http://travel.yahoo.com" },
|
||||
{ text:"Yahoo! Shopping", url:"http://shopping.yahoo.com" }
|
||||
|
||||
],
|
||||
|
||||
[
|
||||
|
||||
{ text:"Yahoo! Messenger", url:"http://messenger.yahoo.com" },
|
||||
{ text:"Yahoo! 360", url:"http://360.yahoo.com" },
|
||||
{ text:"Yahoo! Groups", url:"http://groups.yahoo.com" },
|
||||
{ text:"Yahoo! Photos", url:"http://photos.yahoo.com" }
|
||||
|
||||
]
|
||||
|
||||
]);
|
||||
|
||||
oMenu.setItemGroupTitle("Yahoo! PIM", 0);
|
||||
oMenu.setItemGroupTitle("Yahoo! Search", 1);
|
||||
oMenu.setItemGroupTitle("Yahoo! Communications", 2);
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Grouped Menu Items With Titles From JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>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>.</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
201
www/extras/yui/examples/menu/example07.html
Normal file
201
www/extras/yui/examples/menu/example07.html
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
<!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: Multi-tiered Menu From Markup (YUI Library)</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">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
div.yuimenu {
|
||||
|
||||
position:absolute;
|
||||
visibility:hidden;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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.onMenuAvailable = function(p_oEvent) {
|
||||
|
||||
// Instantiate and render the menu bar and corresponding submenus
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter:true, visible:true });
|
||||
|
||||
oMenu.render();
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available
|
||||
|
||||
YAHOO.util.Event.onAvailable("productsandservices", YAHOO.example.onMenuAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Multi-tiered Menu From Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>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>.</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
<div id="productsandservices" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a href="http://weather.yahoo.com">Weather</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
167
www/extras/yui/examples/menu/example08.html
Normal file
167
www/extras/yui/examples/menu/example08.html
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<!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: Multi-tiered Menu From JavaScript (YUI Library)</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">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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) {
|
||||
|
||||
var aItems = [
|
||||
|
||||
{ text: "communications", submenu: { id: "communications", itemdata: [
|
||||
|
||||
{ text: "360", url: "http://360.yahoo.com" },
|
||||
{ text: "Alerts", url: "http://alerts.yahoo.com" },
|
||||
{ text: "Avatars", url: "http://avatars.yahoo.com" },
|
||||
{ text: "Groups", url: "http://groups.yahoo.com " },
|
||||
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
|
||||
{ text: "PIM", submenu: { id: "pim", itemdata: [
|
||||
|
||||
{ text: "Yahoo! Mail", url:"http://mail.yahoo.com" },
|
||||
{ text: "Yahoo! Address Book", url:"http://addressbook.yahoo.com" },
|
||||
{ text: "Yahoo! Calendar", url:"http://calendar.yahoo.com" },
|
||||
{ text: "Yahoo! Notepad", url:"http://notepad.yahoo.com" }
|
||||
|
||||
] }
|
||||
|
||||
},
|
||||
{ text: "Member Directory", url: "http://members.yahoo.com" },
|
||||
{ text: "Messenger", url: "http://messenger.yahoo.com" },
|
||||
{ text: "Mobile", url: "http://mobile.yahoo.com" },
|
||||
{ text: "Photos", url: "http://photos.yahoo.com" },
|
||||
|
||||
] } },
|
||||
|
||||
{ text: "shopping", submenu: { id: "shopping", itemdata: [
|
||||
|
||||
{ text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
|
||||
{ text: "Autos", url: "http://autos.yahoo.com" },
|
||||
{ text: "Classifieds", url: "http://classifieds.yahoo.com" },
|
||||
{ text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
|
||||
{ text: "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" }
|
||||
|
||||
] } },
|
||||
|
||||
{ text: "entertainment", submenu: { id: "entertainment", itemdata: [
|
||||
|
||||
{ text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
|
||||
{ text: "Games", url: "http://games.yahoo.com" },
|
||||
{ text: "Kids", url: "http://www.yahooligans.com" },
|
||||
{ text: "Music", url: "http://music.yahoo.com" },
|
||||
{ text: "Movies", url: "http://movies.yahoo.com" },
|
||||
{ text: "Radio", url: "http://music.yahoo.com/launchcast" },
|
||||
{ text: "Travel", url: "http://travel.yahoo.com" },
|
||||
{ text: "TV", url: "http://tv.yahoo.com" }
|
||||
|
||||
] } },
|
||||
|
||||
{ text: "information", submenu: { id: "information", itemdata: [
|
||||
|
||||
{ text: "Downloads", url: "http://downloads.yahoo.com" },
|
||||
{ text: "Finance", url: "http://finance.yahoo.com" },
|
||||
{ text: "Health", url: "http://health.yahoo.com" },
|
||||
{ text: "Local", url: "http://local.yahoo.com" },
|
||||
{ text: "Maps & Directions", url: "http://maps.yahoo.com" },
|
||||
{ text: "My Yahoo!", url: "http://my.yahoo.com" },
|
||||
{ text: "News", url: "http://news.yahoo.com" },
|
||||
{ text: "Search", url: "http://search.yahoo.com" },
|
||||
{ text: "Small Business", url: "http://smallbusiness.yahoo.com" },
|
||||
{ text: "Weather", url: "http://weather.yahoo.com" }
|
||||
|
||||
] } }
|
||||
|
||||
];
|
||||
|
||||
var oProductsServicesMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter: true });
|
||||
|
||||
oProductsServicesMenu.addItems(aItems);
|
||||
|
||||
oProductsServicesMenu.render(document.body);
|
||||
|
||||
oProductsServicesMenu.show();
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oProductsServicesMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Multi-tiered Menu From JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>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>.</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
197
www/extras/yui/examples/menu/example09.html
Normal file
197
www/extras/yui/examples/menu/example09.html
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
<!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: Handling Menu Click Events (YUI Library)</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">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
#logs {
|
||||
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
|
||||
}
|
||||
|
||||
.example9 {
|
||||
|
||||
background-color:#9c9;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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) {
|
||||
|
||||
// "click" event handler for the menu
|
||||
|
||||
function onMenuClick(p_sType, p_aArgs, p_oValue) {
|
||||
|
||||
this.show();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "click" event handler for each menu item
|
||||
|
||||
function onMenuItemClick(p_sType, p_aArgs, 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");
|
||||
|
||||
oMenu.addItems(["Item One","Item Two","Item Three"]);
|
||||
|
||||
|
||||
oMenu.getItem(0).clickEvent.subscribe(onMenuItemClick);
|
||||
|
||||
|
||||
/*
|
||||
Register a "click" event handler for the first item,
|
||||
passing a string arguemnt ("foo") to the event handler.
|
||||
*/
|
||||
|
||||
oMenu.getItem(1).clickEvent.subscribe(onMenuItemClick, "foo");
|
||||
|
||||
|
||||
/*
|
||||
Register a "click" event handler for the third item and
|
||||
passing and array as an argument to the event handler.
|
||||
*/
|
||||
|
||||
oMenu.getItem(2).clickEvent.subscribe(onMenuItemClick, ["foo", "bar"]);
|
||||
|
||||
|
||||
oMenu.clickEvent.subscribe(onMenuClick, oMenu, true);
|
||||
|
||||
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");
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
|
||||
/*
|
||||
Add a "mousedown" event handler to prevent the menu from
|
||||
hiding when the user mouses down on the logger.
|
||||
*/
|
||||
|
||||
function onLogsMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("logs", "mousedown", onLogsMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Handling Menu Click Events (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>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.com/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.</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
247
www/extras/yui/examples/menu/example10.html
Normal file
247
www/extras/yui/examples/menu/example10.html
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
<!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: Listening For Menu Events (YUI Library)</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">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
p em {
|
||||
|
||||
text-decoration:underline;
|
||||
|
||||
}
|
||||
|
||||
#logs {
|
||||
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
|
||||
}
|
||||
|
||||
.example10 {
|
||||
|
||||
background-color:#9c9;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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">
|
||||
|
||||
// "load" event handler for the window
|
||||
|
||||
YAHOO.example.onWindowLoad = function(p_oEvent) {
|
||||
|
||||
// Generic event handler for the menu 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 the menu item 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 menu item
|
||||
|
||||
oMenu.getItem(0).focus();
|
||||
|
||||
|
||||
// Disable the third menu item instance
|
||||
|
||||
oMenu.getItem(2).cfg.setProperty("disabled", true);
|
||||
|
||||
|
||||
// Subscribe to the menu's 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");
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
|
||||
/*
|
||||
Add a "mousedown" event handler to prevent the menu from
|
||||
hiding when the user mouses down on the logger.
|
||||
*/
|
||||
|
||||
function onLogsMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("logs", "mousedown", onLogsMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Listening For Menu Events (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to listen for DOM-related events. Interaction with the Menu will result in event information being output to the console. <em>Please note</em>: Disabled MenuItem instances do not fire DOM events. This is demonstrated with the MenuItem named "MenuItem 2."</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
124
www/extras/yui/examples/menu/example11.html
Normal file
124
www/extras/yui/examples/menu/example11.html
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<!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: MenuItem Configuration Properties (YUI Library)</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">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
li.yuimenuitem a em {
|
||||
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
li.yuimenuitem strong {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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">
|
||||
|
||||
// "load" event handler for the window
|
||||
|
||||
YAHOO.example.onWindowLoad = function(p_oEvent) {
|
||||
|
||||
// Create a menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true } );
|
||||
|
||||
oMenu.addItems([
|
||||
|
||||
{ text: "Selected MenuItem", selected: true },
|
||||
{ text: "Disabled MenuItem", disabled: true },
|
||||
{ text: "MenuItem With Help Text", helptext: "Help Me!" },
|
||||
{ text: "MenuItem With A URL", url: "http://www.yahoo.com!" },
|
||||
{ text: "MenuItem With Emphasis", emphasis: true },
|
||||
{ text: "MenuItem With Strong Emphasis", strongemphasis: true },
|
||||
{ text: "Checked MenuItem", checked: true }
|
||||
|
||||
]);
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: MenuItem Configuration Properties (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to set configuration properties when instantiating a MenuItem instance.</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
223
www/extras/yui/examples/menu/example12.html
Normal file
223
www/extras/yui/examples/menu/example12.html
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<!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: Setting Menu Configuration Properties At Runtime (YUI Library)</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">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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">
|
||||
|
||||
// "load" event handler for the window
|
||||
|
||||
YAHOO.example.onWindowLoad = function(p_oEvent) {
|
||||
|
||||
// "config change" event handler for each menu item
|
||||
|
||||
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"),
|
||||
|
||||
// Define the items for 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");
|
||||
|
||||
|
||||
function onMenuToggleMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
oMenu.show();
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
|
||||
|
||||
|
||||
/*
|
||||
Add a "mousedown" event handler to prevent the menu from
|
||||
hiding when the user mouses down on the logger.
|
||||
*/
|
||||
|
||||
function onLogsMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("logs", "mousedown", onLogsMouseDown);
|
||||
|
||||
}
|
||||
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Setting Menu Configuration Properties At Runtime (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to set MenuItem configuration properties at runtime and listen for the changes through the "configChangedEvent."</p>
|
||||
<p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
276
www/extras/yui/examples/menu/example13.html
Normal file
276
www/extras/yui/examples/menu/example13.html
Normal file
|
|
@ -0,0 +1,276 @@
|
|||
<!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: Customizing Menu Image Paths (YUI Library)</title>
|
||||
|
||||
|
||||
<!-- Standard reset, fonts and grids -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
<style type="text/css">
|
||||
|
||||
div.yui-b p {
|
||||
|
||||
margin:0 0 .5em 0;
|
||||
color:#999;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p strong {
|
||||
|
||||
font-weight:bold;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p em {
|
||||
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-weight:bold;
|
||||
margin:0 0 1em 0;
|
||||
padding:.25em .5em;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
#productsandservices {
|
||||
|
||||
margin:0 0 10px 0;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<!-- 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">
|
||||
|
||||
|
||||
/*
|
||||
Change the root path for all menu item images to point to the
|
||||
images in the "assets" directory.
|
||||
*/
|
||||
|
||||
YAHOO.widget.MenuItem.prototype.IMG_ROOT = "../../build/menu/assets/";
|
||||
|
||||
|
||||
// Change the path to the submenu indicator images for each menu item
|
||||
|
||||
YAHOO.widget.MenuItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH = "menuarorght8_nrm_1.gif";
|
||||
YAHOO.widget.MenuItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH = "menuarorght8_hov_1.gif";
|
||||
YAHOO.widget.MenuItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH = "menuarorght8_dim_1.gif";
|
||||
|
||||
|
||||
// Change the path to the checkmark images for each menu item
|
||||
|
||||
YAHOO.widget.MenuItem.prototype.CHECKED_IMAGE_PATH = "menuchk8_nrm_1.gif";
|
||||
YAHOO.widget.MenuItem.prototype.SELECTED_CHECKED_IMAGE_PATH = "menuchk8_hov_1.gif";
|
||||
YAHOO.widget.MenuItem.prototype.DISABLED_CHECKED_IMAGE_PATH = "menuchk8_dim_1.gif";
|
||||
|
||||
|
||||
// Change the path to the submenu images for each menu bar item
|
||||
|
||||
YAHOO.widget.MenuBarItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH = "menuarodwn8_nrm_1.gif";
|
||||
YAHOO.widget.MenuBarItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH = "menuarodwn8_hov_1.gif";
|
||||
YAHOO.widget.MenuBarItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH = "menuarodwn8_dim_1.gif";
|
||||
|
||||
|
||||
YAHOO.example.onMenuBarAvailable = function(p_oEvent) {
|
||||
|
||||
// Instantiate and render the menu bar
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, showdelay:250, hidedelay:750, lazyload:true });
|
||||
|
||||
oMenuBar.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("productsandservices", YAHOO.example.onMenuBarAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="yahoo-com">
|
||||
|
||||
<div id="doc" class="yui-t1">
|
||||
<div id="hd">
|
||||
<!-- start: your content here -->
|
||||
|
||||
<h1>Example: Customizing Menu Image Paths (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<!-- end: your content here -->
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<!-- start: primary column from outer template -->
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<!-- start: stack grids here -->
|
||||
|
||||
<div id="productsandservices" class="yuimenubar">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenubaritem first-of-type"><a href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a href="http://weather.yahoo.com">Weather</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="note"><strong>NOTE:</strong> <em>This example demonstrates how to modify the paths for all images used by the YUI Menu components.</em></p>
|
||||
|
||||
<form name="example">
|
||||
<select name="test">
|
||||
<option value="one">One</option>
|
||||
<option value="two">Two</option>
|
||||
<option value="three">Three</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<!-- end: stack grids here -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end: primary column from outer template -->
|
||||
|
||||
<!-- start: secondary column from outer template -->
|
||||
<div class="yui-b">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
<!-- end: secondary column from outer template -->
|
||||
</div>
|
||||
<div id="ft">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
www/extras/yui/examples/menu/img/dolly.jpg
Normal file
BIN
www/extras/yui/examples/menu/img/dolly.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
www/extras/yui/examples/menu/img/grass.png
Normal file
BIN
www/extras/yui/examples/menu/img/grass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
84
www/extras/yui/examples/menu/index.html
Normal file
84
www/extras/yui/examples/menu/index.html
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<!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>Examples: Menu (YUI Library)</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="../../docs/assets/examples.css">
|
||||
<style type="text/css">
|
||||
|
||||
ul,ol {
|
||||
margin:0 40px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
li a {
|
||||
font:85% verdana;
|
||||
}
|
||||
|
||||
li a:link {
|
||||
color:#666;
|
||||
}
|
||||
|
||||
ol, ol li {
|
||||
list-style-type:decimal;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="hd">
|
||||
<img src="../../docs/assets/logo.gif" alt="Yahoo!">
|
||||
<h1>Examples: Menu (YUI Library)</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<h2>Fundamentals</h2>
|
||||
<ol>
|
||||
<li><a href="example01.html">Basic Menu From Markup</a></li>
|
||||
<li><a href="example02.html">Basic Menu From JavaScript</a></li>
|
||||
<li><a href="example03.html">Grouped Menu Items Using Markup</a></li>
|
||||
<li><a href="example04.html">Grouped Menu Items Using JavaScript</a></li>
|
||||
<li><a href="example05.html">Grouped Menu Items With Titles From Markup</a></li>
|
||||
<li><a href="example06.html">Grouped Menu Items With Titles From JavaScript</a></li>
|
||||
<li><a href="example07.html">Multi-tiered Menu From Markup</a></li>
|
||||
<li><a href="example08.html">Multi-tiered Menu From JavaScript</a></li>
|
||||
<li><a href="example09.html">Handling Menu Click Events</a></li>
|
||||
<li><a href="example10.html">Listening For Menu Events</a></li>
|
||||
<li><a href="example11.html">MenuItem Configuration Properties</a></li>
|
||||
<li><a href="example12.html">Setting Menu Configuration Properties At Runtime</a></li>
|
||||
<li><a href="example13.html">Customizing Menu Image Paths</a></li>
|
||||
</ol>
|
||||
|
||||
<h2>Website Navigation Using Menu</h2>
|
||||
<ul>
|
||||
|
||||
<li><a href="leftnavfrommarkup.html">Website Left Nav With Submenus Built From Markup</a></li>
|
||||
<li><a href="leftnavfromjs.html">Website Left Nav With Submenus From JavaScript</a></li>
|
||||
<li><a href="topnavfrommarkup.html">Website Top Nav With Submenus Built From Markup</a></li>
|
||||
<li><a href="topnavfromjs.html">Website Top Nav With Submenus From JavaScript</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Using Menu With Animation</h2>
|
||||
<ul>
|
||||
<li><a href="leftnavfrommarkupwithanim.html">Website Left Nav Using Animation With Submenus Built From Markup</a></li>
|
||||
<li><a href="leftnavfromjswithanim.html">Website Left Nav Using Animation With Submenus From JavaScript</a></li>
|
||||
<li><a href="topnavfrommarkupwithanim.html">Website Top Nav Using Animation With Submenus Built From Markup</a></li>
|
||||
<li><a href="topnavfromjswithanim.html">Website Top Nav Using Animation With Submenus From JavaScript</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Operating-System-Style Menus</h2>
|
||||
<ul>
|
||||
<li><a href="contextmenu.html">Context Menu</a></li>
|
||||
<li><a href="programsmenu.html">OS-Style Programs Menu</a></li>
|
||||
<li><a href="applicationmenubar.html">Application Menubar</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
232
www/extras/yui/examples/menu/leftnavfromjs.html
Normal file
232
www/extras/yui/examples/menu/leftnavfromjs.html
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Website Left Nav With Submenus From JavaScript (YUI Library)</title>
|
||||
|
||||
|
||||
<!-- Standard reset, fonts and grids -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
div.yui-b p {
|
||||
|
||||
margin:0 0 .5em 0;
|
||||
color:#999;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p strong {
|
||||
|
||||
font-weight:bold;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p em {
|
||||
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-weight:bold;
|
||||
margin:0 0 1em 0;
|
||||
padding:.25em .5em;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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.onMenuAvailable = function(p_oEvent) {
|
||||
|
||||
// "beforerender" event handler for the menu
|
||||
|
||||
function onMenuBeforeRender(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
var oSubmenuData = {
|
||||
|
||||
"communication": [
|
||||
|
||||
{ text: "360", url: "http://360.yahoo.com" },
|
||||
{ text: "Alerts", url: "http://alerts.yahoo.com" },
|
||||
{ text: "Avatars", url: "http://avatars.yahoo.com" },
|
||||
{ text: "Groups", url: "http://groups.yahoo.com " },
|
||||
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
|
||||
{ text: "PIM", submenu: { id: "pim", itemdata: [
|
||||
|
||||
{ text: "Yahoo! Mail", url:"http://mail.yahoo.com" },
|
||||
{ text: "Yahoo! Address Book", url:"http://addressbook.yahoo.com" },
|
||||
{ text: "Yahoo! Calendar", url:"http://calendar.yahoo.com" },
|
||||
{ text: "Yahoo! Notepad", url:"http://notepad.yahoo.com" }
|
||||
|
||||
] }
|
||||
|
||||
},
|
||||
{ text: "Member Directory", url: "http://members.yahoo.com" },
|
||||
{ text: "Messenger", url: "http://messenger.yahoo.com" },
|
||||
{ text: "Mobile", url: "http://mobile.yahoo.com" },
|
||||
{ text: "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" }
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.getItem(0).cfg.setProperty("submenu", { id:"communication", itemdata: oSubmenuData["communication"] });
|
||||
this.getItem(1).cfg.setProperty("submenu", { id:"shopping", itemdata: oSubmenuData["shopping"] });
|
||||
this.getItem(2).cfg.setProperty("submenu", { id:"entertainment", itemdata: oSubmenuData["entertainment"] });
|
||||
this.getItem(3).cfg.setProperty("submenu", { id:"information", itemdata: oSubmenuData["information"] });
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Instantiate and render the menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("productsandservices", { position:"static", showdelay:250, hidedelay:750, lazyload:true });
|
||||
|
||||
|
||||
// Subscribe to the "beforerender" event
|
||||
|
||||
oMenu.beforeRenderEvent.subscribe(onMenuBeforeRender, oMenu, true);
|
||||
|
||||
oMenu.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("productsandservices", YAHOO.example.onMenuAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="yahoo-com">
|
||||
|
||||
<div id="doc" class="yui-t1">
|
||||
<div id="hd">
|
||||
<!-- start: your content here -->
|
||||
|
||||
<h1>Example: Website Left Nav With Submenus From JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<!-- end: your content here -->
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<!-- start: primary column from outer template -->
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<!-- start: stack grids here -->
|
||||
|
||||
<p><strong>NOTE:</strong> <em>This example demonstrates how to add submenus via JavaScript to a menu built from existing markup. 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 items in 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>.</em></p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<!-- end: stack grids here -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end: primary column from outer template -->
|
||||
|
||||
<!-- start: secondary column from outer template -->
|
||||
<div class="yui-b">
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<!-- end: secondary column from outer template -->
|
||||
</div>
|
||||
<div id="ft">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
249
www/extras/yui/examples/menu/leftnavfromjswithanim.html
Normal file
249
www/extras/yui/examples/menu/leftnavfromjswithanim.html
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)</title>
|
||||
|
||||
|
||||
<!-- Standard reset, fonts and grids -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
div.yui-b p {
|
||||
|
||||
margin:0 0 .5em 0;
|
||||
color:#999;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p strong {
|
||||
|
||||
font-weight:bold;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p em {
|
||||
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-weight:bold;
|
||||
margin:0 0 1em 0;
|
||||
padding:.25em .5em;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../build/animation/animation.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.onMenuAvailable = function(p_oEvent) {
|
||||
|
||||
// "beforerender" event handler for the menu
|
||||
|
||||
function onMenuBeforeRender(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
var oSubmenuData = {
|
||||
|
||||
"communication": [
|
||||
|
||||
{ text: "360", url: "http://360.yahoo.com" },
|
||||
{ text: "Alerts", url: "http://alerts.yahoo.com" },
|
||||
{ text: "Avatars", url: "http://avatars.yahoo.com" },
|
||||
{ text: "Groups", url: "http://groups.yahoo.com " },
|
||||
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
|
||||
{ text: "PIM", submenu: { id: "pim", itemdata: [
|
||||
|
||||
{ text: "Yahoo! Mail", url:"http://mail.yahoo.com" },
|
||||
{ text: "Yahoo! Address Book", url:"http://addressbook.yahoo.com" },
|
||||
{ text: "Yahoo! Calendar", url:"http://calendar.yahoo.com" },
|
||||
{ text: "Yahoo! Notepad", url:"http://notepad.yahoo.com" }
|
||||
|
||||
] }
|
||||
|
||||
},
|
||||
{ text: "Member Directory", url: "http://members.yahoo.com" },
|
||||
{ text: "Messenger", url: "http://messenger.yahoo.com" },
|
||||
{ text: "Mobile", url: "http://mobile.yahoo.com" },
|
||||
{ text: "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" }
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.getItem(0).cfg.setProperty("submenu", { id:"communication", itemdata: oSubmenuData["communication"] });
|
||||
this.getItem(1).cfg.setProperty("submenu", { id:"shopping", itemdata: oSubmenuData["shopping"] });
|
||||
this.getItem(2).cfg.setProperty("submenu", { id:"entertainment", itemdata: oSubmenuData["entertainment"] });
|
||||
this.getItem(3).cfg.setProperty("submenu", { id:"information", itemdata: oSubmenuData["information"] });
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Instantiate and render the menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu(
|
||||
"productsandservices",
|
||||
{
|
||||
position:"static",
|
||||
showdelay:250,
|
||||
hidedelay:750,
|
||||
lazyload:true,
|
||||
effect:{
|
||||
effect:YAHOO.widget.ContainerEffect.FADE,
|
||||
duration:0.25
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// Subscribe to the "beforerender" event
|
||||
|
||||
oMenu.beforeRenderEvent.subscribe(onMenuBeforeRender, oMenu, true);
|
||||
|
||||
|
||||
// Render the menu
|
||||
|
||||
oMenu.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("productsandservices", YAHOO.example.onMenuAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="yahoo-com">
|
||||
|
||||
<div id="doc" class="yui-t1">
|
||||
<div id="hd">
|
||||
<!-- start: your content here -->
|
||||
|
||||
<h1>Example: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<!-- end: your content here -->
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<!-- start: primary column from outer template -->
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<!-- start: stack grids here -->
|
||||
|
||||
<p><strong>NOTE:</strong> <em>This example demonstrates how to add animation effects to a menu with submenus built using JavaScript. You can also add animation to menus built <a href="leftnavfrommarkupwithanim.html">using existing markup</a>.</em></p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<!-- end: stack grids here -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end: primary column from outer template -->
|
||||
|
||||
<!-- start: secondary column from outer template -->
|
||||
<div class="yui-b">
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<!-- end: secondary column from outer template -->
|
||||
</div>
|
||||
<div id="ft">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
238
www/extras/yui/examples/menu/leftnavfrommarkup.html
Normal file
238
www/extras/yui/examples/menu/leftnavfrommarkup.html
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Website Left Nav With Submenus Built From Markup (YUI Library)</title>
|
||||
|
||||
|
||||
<!-- Standard reset, fonts and grids -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
div.yui-b p {
|
||||
|
||||
margin:0 0 .5em 0;
|
||||
color:#999;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p strong {
|
||||
|
||||
font-weight:bold;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p em {
|
||||
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-weight:bold;
|
||||
margin:0 0 1em 0;
|
||||
padding:.25em .5em;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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.onMenuAvailable = function(p_oEvent) {
|
||||
|
||||
// Instantiate and render the menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu(
|
||||
"productsandservices",
|
||||
{
|
||||
position:"static",
|
||||
showdelay:250,
|
||||
hidedelay:750,
|
||||
lazyload:true
|
||||
}
|
||||
);
|
||||
|
||||
oMenu.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("productsandservices", YAHOO.example.onMenuAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="yahoo-com">
|
||||
|
||||
<div id="doc" class="yui-t1">
|
||||
<div id="hd">
|
||||
<!-- start: your content here -->
|
||||
|
||||
<h1>Example: Website Left Nav With Submenus Built From Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<!-- end: your content here -->
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<!-- start: primary column from outer template -->
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<!-- start: stack grids here -->
|
||||
|
||||
<p><strong>NOTE:</strong> <em>This example demonstrates how to add submenus to a menu using existing markup. Alternatively, you can <a href="leftnavfromjs.html">add submenus to a menu using JavaScript</a>.</em></p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<!-- end: stack grids here -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end: primary column from outer template -->
|
||||
|
||||
<!-- start: secondary column from outer template -->
|
||||
<div class="yui-b">
|
||||
|
||||
<div id="productsandservices" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem first-of-type"><a href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a href="http://weather.yahoo.com">Weather</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end: secondary column from outer template -->
|
||||
</div>
|
||||
<div id="ft">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
244
www/extras/yui/examples/menu/leftnavfrommarkupwithanim.html
Normal file
244
www/extras/yui/examples/menu/leftnavfrommarkupwithanim.html
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Website Left Nav Using Animation With Submenus Built From Markup (YUI Library)</title>
|
||||
|
||||
|
||||
<!-- Standard reset, fonts and grids -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
div.yui-b p {
|
||||
|
||||
margin:0 0 .5em 0;
|
||||
color:#999;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p strong {
|
||||
|
||||
font-weight:bold;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p em {
|
||||
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-weight:bold;
|
||||
margin:0 0 1em 0;
|
||||
padding:.25em .5em;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../build/animation/animation.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.onMenuAvailable = function(p_oEvent) {
|
||||
|
||||
// Instantiate and render the menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu(
|
||||
"productsandservices",
|
||||
{
|
||||
position:"static",
|
||||
showdelay:250,
|
||||
hidedelay:750,
|
||||
lazyload:true,
|
||||
effect:{
|
||||
effect:YAHOO.widget.ContainerEffect.FADE,
|
||||
duration:0.25
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
oMenu.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("productsandservices", YAHOO.example.onMenuAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="yahoo-com">
|
||||
|
||||
<div id="doc" class="yui-t1">
|
||||
<div id="hd">
|
||||
<!-- start: your content here -->
|
||||
|
||||
<h1>Example: Website Left Nav Using Animation With Submenus Built From Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<!-- end: your content here -->
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<!-- start: primary column from outer template -->
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<!-- start: stack grids here -->
|
||||
|
||||
<p><strong>NOTE:</strong> <em>This example demonstrates how to add animation effects to a menu with submenus built using existing markup. You can also add animation to menus built <a href="leftnavfromjswithanim.html">using JavaScript</a>.</em></p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<!-- end: stack grids here -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end: primary column from outer template -->
|
||||
|
||||
<!-- start: secondary column from outer template -->
|
||||
<div class="yui-b">
|
||||
|
||||
<div id="productsandservices" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem first-of-type"><a href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a href="http://weather.yahoo.com">Weather</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end: secondary column from outer template -->
|
||||
</div>
|
||||
<div id="ft">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
402
www/extras/yui/examples/menu/programsmenu.html
Normal file
402
www/extras/yui/examples/menu/programsmenu.html
Normal file
|
|
@ -0,0 +1,402 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: OS-Style Programs Menu (YUI Library)</title>
|
||||
|
||||
<!-- 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">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/container/assets/container.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html {
|
||||
|
||||
overflow:hidden;
|
||||
|
||||
}
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
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.com/us.yimg.com/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.com/us.yimg.com/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.com/us.yimg.com/i/nt/ic/ut/bsc/fldr16_1.gif);
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li#help {
|
||||
|
||||
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/hlp16_1.gif);
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li#search {
|
||||
|
||||
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/srch16_1.gif);
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li#goto {
|
||||
|
||||
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/arorght16_1.gif);
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li#examples {
|
||||
|
||||
background-image:url(http://us.i1.yimg.com/us.yimg.com/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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onMenuAvailable = 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({ text: "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);
|
||||
|
||||
|
||||
// "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();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("yproducts", YAHOO.example.onMenuAvailable);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><a id="yahoo" href="http://www.yahoo.com">Yahoo!</a></h1>
|
||||
|
||||
<div id="yproducts">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li>Products
|
||||
<div id="products">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li><a href="http://calendar.yahoo.com">Yahoo! Calender</a></li>
|
||||
<li><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
<li><a href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
|
||||
<li><a href="http://360.yahoo.com">Yahoo! 360</a></li>
|
||||
<li><a href="http://photos.yahoo.com">Yahoo! Photos</a></li>
|
||||
<li><a href="http://finance.yahoo.com/">Finance</a></li>
|
||||
<li><a href="http://entertainment.yahoo.com/">Entertainment</a>
|
||||
<div id="entertainmentproducts">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li><a href="http://music.yahoo.com/">Yahoo! Music</a></li>
|
||||
<li><a href="http://movies.yahoo.com/">Yahoo! Movies</a></li>
|
||||
<li><a href="http://tv.yahoo.com/">Yahoo! TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="search"><a href="http://search.yahoo.com/">Search</a>
|
||||
<div id="searchproducts">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li><a href="http://images.search.yahoo.com/images">Yahoo! Image Search</a></li>
|
||||
<li><a href="http://dir.yahoo.com/">Yahoo! Directory</a></li>
|
||||
<li><a href="http://local.yahoo.com">Yahoo! Local</a></li>
|
||||
<li><a href="http://news.search.yahoo.com/news">Yahoo! News Search</a></li>
|
||||
<li><a href="http://search.yahoo.com/people">Yahoo! People Search</a></li>
|
||||
<li><a href="http://search.yahoo.com/products">Yahoo! Product Search</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="help"><a href="http://help.yahoo.com/">Help</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
252
www/extras/yui/examples/menu/topnavfromjs.html
Normal file
252
www/extras/yui/examples/menu/topnavfromjs.html
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Website Top Nav With Submenus From JavaScript (YUI Library)</title>
|
||||
|
||||
|
||||
<!-- Standard reset, fonts and grids -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
div.yui-b p {
|
||||
|
||||
margin:0 0 .5em 0;
|
||||
color:#999;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p strong {
|
||||
|
||||
font-weight:bold;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p em {
|
||||
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-weight:bold;
|
||||
margin:0 0 1em 0;
|
||||
padding:.25em .5em;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
#productsandservices {
|
||||
|
||||
margin:0 0 10px 0;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<!-- 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.onMenuBarAvailable = function(p_oEvent) {
|
||||
|
||||
// "beforerender" event handler for the menu bar
|
||||
|
||||
function onMenuBarBeforeRender(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
var oSubmenuData = {
|
||||
|
||||
"communication": [
|
||||
|
||||
{ text: "360", url: "http://360.yahoo.com" },
|
||||
{ text: "Alerts", url: "http://alerts.yahoo.com" },
|
||||
{ text: "Avatars", url: "http://avatars.yahoo.com" },
|
||||
{ text: "Groups", url: "http://groups.yahoo.com " },
|
||||
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
|
||||
{ text: "PIM", submenu: { id: "pim", itemdata: [
|
||||
|
||||
{ text: "Yahoo! Mail", url:"http://mail.yahoo.com" },
|
||||
{ text: "Yahoo! Address Book", url:"http://addressbook.yahoo.com" },
|
||||
{ text: "Yahoo! Calendar", url:"http://calendar.yahoo.com" },
|
||||
{ text: "Yahoo! Notepad", url:"http://notepad.yahoo.com" }
|
||||
|
||||
] }
|
||||
|
||||
},
|
||||
{ text: "Member Directory", url: "http://members.yahoo.com" },
|
||||
{ text: "Messenger", url: "http://messenger.yahoo.com" },
|
||||
{ text: "Mobile", url: "http://mobile.yahoo.com" },
|
||||
{ text: "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" }
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.getItem(0).cfg.setProperty("submenu", { id:"communication", itemdata: oSubmenuData["communication"] });
|
||||
this.getItem(1).cfg.setProperty("submenu", { id:"shopping", itemdata: oSubmenuData["shopping"] });
|
||||
this.getItem(2).cfg.setProperty("submenu", { id:"entertainment", itemdata: oSubmenuData["entertainment"] });
|
||||
this.getItem(3).cfg.setProperty("submenu", { id:"information", itemdata: oSubmenuData["information"] });
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Instantiate and render the menu bar
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, showdelay:250, hidedelay:750, lazyload:true });
|
||||
|
||||
|
||||
// Subscribe to the "beforerender" event
|
||||
|
||||
oMenuBar.beforeRenderEvent.subscribe(onMenuBarBeforeRender, oMenuBar, true);
|
||||
|
||||
|
||||
// Render the menu bar
|
||||
|
||||
oMenuBar.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("productsandservices", YAHOO.example.onMenuBarAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="yahoo-com">
|
||||
|
||||
<div id="doc" class="yui-t1">
|
||||
<div id="hd">
|
||||
<!-- start: your content here -->
|
||||
|
||||
<h1>Example: Website Top Nav With Submenus From JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<!-- end: your content here -->
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<!-- start: primary column from outer template -->
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<!-- start: stack grids here -->
|
||||
|
||||
<div id="productsandservices" class="yuimenubar">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenubaritem first-of-type"><a href="http://communication.yahoo.com">Communication</a></li>
|
||||
<li class="yuimenubaritem"><a href="http://shopping.yahoo.com">Shopping</a></li>
|
||||
<li class="yuimenubaritem"><a href="http://entertainment.yahoo.com">Entertainment</a></li>
|
||||
<li class="yuimenubaritem">Information</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><strong>NOTE:</strong> <em>This example demonstrates how to add submenus via JavaScript to a menu bar built from existing markup. The menu bar is constructed using markup and enables the user to navigate to different landing pages for each product category. If JavaScript is enabled, submenus are constructed and appended to the items in the menu bar. This allows the user to skip the product landing pages and proceed directly to a given property. Alternatively, you can <a href="topnavfrommarkup.html">add submenus to a menu bar using markup</a>.</em></p>
|
||||
|
||||
<form name="example">
|
||||
<select name="test">
|
||||
<option value="one">One</option>
|
||||
<option value="two">Two</option>
|
||||
<option value="three">Three</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<!-- end: stack grids here -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end: primary column from outer template -->
|
||||
|
||||
<!-- start: secondary column from outer template -->
|
||||
<div class="yui-b">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
<!-- end: secondary column from outer template -->
|
||||
</div>
|
||||
<div id="ft">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
364
www/extras/yui/examples/menu/topnavfromjswithanim.html
Normal file
364
www/extras/yui/examples/menu/topnavfromjswithanim.html
Normal file
|
|
@ -0,0 +1,364 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Website Top Nav Using Animation With Submenus From JavaScript (YUI Library)</title>
|
||||
|
||||
|
||||
<!-- Standard reset, fonts and grids -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
div.yui-b p {
|
||||
|
||||
margin:0 0 .5em 0;
|
||||
color:#999;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p strong {
|
||||
|
||||
font-weight:bold;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p em {
|
||||
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-weight:bold;
|
||||
margin:0 0 1em 0;
|
||||
padding:.25em .5em;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
#productsandservices {
|
||||
|
||||
margin:0 0 10px 0;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../build/animation/animation.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.onMenuBarAvailable = function(p_oEvent) {
|
||||
|
||||
|
||||
// Animation object
|
||||
|
||||
var oAnim;
|
||||
|
||||
|
||||
// Utility function used to setup animation for submenus
|
||||
|
||||
function setupMenuAnimation(p_oMenu) {
|
||||
|
||||
if(!p_oMenu.animationSetup) {
|
||||
|
||||
var aItems = p_oMenu.getItemGroups();
|
||||
|
||||
if(aItems && aItems[0]) {
|
||||
|
||||
var i = aItems[0].length - 1;
|
||||
var oSubmenu;
|
||||
|
||||
do {
|
||||
|
||||
oSubmenu = p_oMenu.getItem(i).cfg.getProperty("submenu");
|
||||
|
||||
if(oSubmenu) {
|
||||
|
||||
oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu, true);
|
||||
oSubmenu.showEvent.subscribe(onMenuShow, oSubmenu, true);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
while(i--);
|
||||
|
||||
}
|
||||
|
||||
p_oMenu.animationSetup = true;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "beforeshow" event handler for each submenu of the menu bar
|
||||
|
||||
function onMenuBeforeShow(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
if(oAnim && oAnim.isAnimated()) {
|
||||
|
||||
oAnim.stop();
|
||||
oAnim = null;
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Dom.setStyle(this.element, "overflow", "hidden");
|
||||
YAHOO.util.Dom.setStyle(this.body, "marginTop", ("-" + this.body.offsetHeight + "px"));
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "show" event handler for each submenu of the menu bar
|
||||
|
||||
function onMenuShow(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
oAnim = new YAHOO.util.Anim(
|
||||
this.body,
|
||||
{ marginTop: { to: 0 } },
|
||||
.5,
|
||||
YAHOO.util.Easing.easeOut
|
||||
);
|
||||
|
||||
oAnim.animate();
|
||||
|
||||
var me = this;
|
||||
|
||||
function onTween() {
|
||||
|
||||
me.cfg.refireEvent("iframe");
|
||||
|
||||
}
|
||||
|
||||
function onAnimationComplete() {
|
||||
|
||||
YAHOO.util.Dom.setStyle(me.body, "marginTop", ("0px"));
|
||||
YAHOO.util.Dom.setStyle(me.element, "overflow", "visible");
|
||||
|
||||
setupMenuAnimation(me);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Refire the event handler for the "iframe"
|
||||
configuration property with each tween so that the
|
||||
size and position of the iframe shim remain in sync
|
||||
with the menu.
|
||||
*/
|
||||
|
||||
if(this.cfg.getProperty("iframe") == true) {
|
||||
|
||||
oAnim.onTween.subscribe(onTween);
|
||||
|
||||
}
|
||||
|
||||
oAnim.onComplete.subscribe(onAnimationComplete);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "beforerender" event handler for the menu bar
|
||||
|
||||
function onMenuBeforeRender(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
var oSubmenuData = {
|
||||
|
||||
"communication": [
|
||||
|
||||
{ text: "360", url: "http://360.yahoo.com" },
|
||||
{ text: "Alerts", url: "http://alerts.yahoo.com" },
|
||||
{ text: "Avatars", url: "http://avatars.yahoo.com" },
|
||||
{ text: "Groups", url: "http://groups.yahoo.com " },
|
||||
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
|
||||
{ text: "PIM", submenu: { id: "pim", itemdata: [
|
||||
|
||||
{ text: "Yahoo! Mail", url:"http://mail.yahoo.com" },
|
||||
{ text: "Yahoo! Address Book", url:"http://addressbook.yahoo.com" },
|
||||
{ text: "Yahoo! Calendar", url:"http://calendar.yahoo.com" },
|
||||
{ text: "Yahoo! Notepad", url:"http://notepad.yahoo.com" }
|
||||
|
||||
] }
|
||||
|
||||
},
|
||||
{ text: "Member Directory", url: "http://members.yahoo.com" },
|
||||
{ text: "Messenger", url: "http://messenger.yahoo.com" },
|
||||
{ text: "Mobile", url: "http://mobile.yahoo.com" },
|
||||
{ text: "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" }
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.getItem(0).cfg.setProperty("submenu", { id:"communication", itemdata: oSubmenuData["communication"] });
|
||||
this.getItem(1).cfg.setProperty("submenu", { id:"shopping", itemdata: oSubmenuData["shopping"] });
|
||||
this.getItem(2).cfg.setProperty("submenu", { id:"entertainment", itemdata: oSubmenuData["entertainment"] });
|
||||
this.getItem(3).cfg.setProperty("submenu", { id:"information", itemdata: oSubmenuData["information"] });
|
||||
|
||||
setupMenuAnimation(this);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize the root menu bar
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, hidedelay:750, lazyload:true });
|
||||
|
||||
|
||||
// Subscribe to the "beforerender" event
|
||||
|
||||
oMenuBar.beforeRenderEvent.subscribe(onMenuBeforeRender, oMenuBar, true);
|
||||
|
||||
|
||||
// Render the menu bar
|
||||
|
||||
oMenuBar.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("productsandservices", YAHOO.example.onMenuBarAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="yahoo-com">
|
||||
|
||||
<div id="doc" class="yui-t1">
|
||||
<div id="hd">
|
||||
<!-- start: your content here -->
|
||||
|
||||
<h1>Example: Website Top Nav Using Animation With Submenus From JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<!-- end: your content here -->
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<!-- start: primary column from outer template -->
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<!-- start: stack grids here -->
|
||||
|
||||
<div id="productsandservices" class="yuimenubar">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenubaritem first-of-type"><a href="http://communication.yahoo.com">Communication</a></li>
|
||||
<li class="yuimenubaritem"><a href="http://shopping.yahoo.com">Shopping</a></li>
|
||||
<li class="yuimenubaritem"><a href="http://entertainment.yahoo.com">Entertainment</a></li>
|
||||
<li class="yuimenubaritem">Information</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="note"><strong>NOTE:</strong> <em>This example demonstrates how to add animation effects to a menu bar with submenus built using JavaScript. You can also add animation to submenus built <a href="topnavfrommarkupwithanim.html">using existing markup</a>.</em></p>
|
||||
|
||||
<form name="example">
|
||||
<select name="test">
|
||||
<option value="one">One</option>
|
||||
<option value="two">Two</option>
|
||||
<option value="three">Three</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<!-- end: stack grids here -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end: primary column from outer template -->
|
||||
|
||||
<!-- start: secondary column from outer template -->
|
||||
<div class="yui-b">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
<!-- end: secondary column from outer template -->
|
||||
</div>
|
||||
<div id="ft">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
247
www/extras/yui/examples/menu/topnavfrommarkup.html
Normal file
247
www/extras/yui/examples/menu/topnavfrommarkup.html
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Website Top Nav With Submenus Built From Markup (YUI Library)</title>
|
||||
|
||||
|
||||
<!-- Standard reset, fonts and grids -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
div.yui-b p {
|
||||
|
||||
margin:0 0 .5em 0;
|
||||
color:#999;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p strong {
|
||||
|
||||
font-weight:bold;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p em {
|
||||
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-weight:bold;
|
||||
margin:0 0 1em 0;
|
||||
padding:.25em .5em;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
#productsandservices {
|
||||
|
||||
margin:0 0 10px 0;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<!-- 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.onMenuBarAvailable = function(p_oEvent) {
|
||||
|
||||
// Instantiate and render the menu bar
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, showdelay:250, hidedelay:750, lazyload:true });
|
||||
|
||||
oMenuBar.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("productsandservices", YAHOO.example.onMenuBarAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="yahoo-com">
|
||||
|
||||
<div id="doc" class="yui-t1">
|
||||
<div id="hd">
|
||||
<!-- start: your content here -->
|
||||
|
||||
<h1>Example: Website Top Nav With Submenus Built From Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<!-- end: your content here -->
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<!-- start: primary column from outer template -->
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<!-- start: stack grids here -->
|
||||
|
||||
<div id="productsandservices" class="yuimenubar">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenubaritem first-of-type"><a href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a href="http://weather.yahoo.com">Weather</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="note"><strong>NOTE:</strong> <em>This example demonstrates how to add submenus to a menu bar using existing markup. Alternatively, you can <a href="topnavfromjs.html">add submenus to a menu bar using JavaScript</a>.</em></p>
|
||||
|
||||
<form name="example">
|
||||
<select name="test">
|
||||
<option value="one">One</option>
|
||||
<option value="two">Two</option>
|
||||
<option value="three">Three</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<!-- end: stack grids here -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end: primary column from outer template -->
|
||||
|
||||
<!-- start: secondary column from outer template -->
|
||||
<div class="yui-b">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
<!-- end: secondary column from outer template -->
|
||||
</div>
|
||||
<div id="ft">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
370
www/extras/yui/examples/menu/topnavfrommarkupwithanim.html
Normal file
370
www/extras/yui/examples/menu/topnavfrommarkupwithanim.html
Normal file
|
|
@ -0,0 +1,370 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Website Top Nav Using Animation With Submenus Built From Markup (YUI Library)</title>
|
||||
|
||||
|
||||
<!-- Standard reset, fonts and grids -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
div.yui-b p {
|
||||
|
||||
margin:0 0 .5em 0;
|
||||
color:#999;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p strong {
|
||||
|
||||
font-weight:bold;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
div.yui-b p em {
|
||||
|
||||
color:#000;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-weight:bold;
|
||||
margin:0 0 1em 0;
|
||||
padding:.25em .5em;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
#productsandservices {
|
||||
|
||||
margin:0 0 10px 0;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../build/animation/animation.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.onMenuBarAvailable = function(p_oEvent) {
|
||||
|
||||
// Animation object
|
||||
|
||||
var oAnim;
|
||||
|
||||
|
||||
// Utility function used to setup animation for submenus
|
||||
|
||||
function setupMenuAnimation(p_oMenu) {
|
||||
|
||||
if(!p_oMenu.animationSetup) {
|
||||
|
||||
var aItems = p_oMenu.getItemGroups();
|
||||
|
||||
if(aItems && aItems[0]) {
|
||||
|
||||
var i = aItems[0].length - 1;
|
||||
var oSubmenu;
|
||||
|
||||
do {
|
||||
|
||||
oSubmenu = p_oMenu.getItem(i).cfg.getProperty("submenu");
|
||||
|
||||
if(oSubmenu) {
|
||||
|
||||
oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu, true);
|
||||
oSubmenu.showEvent.subscribe(onMenuShow, oSubmenu, true);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
while(i--);
|
||||
|
||||
}
|
||||
|
||||
p_oMenu.animationSetup = true;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "beforeshow" event handler for each submenu of the menu bar
|
||||
|
||||
function onMenuBeforeShow(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
if(oAnim && oAnim.isAnimated()) {
|
||||
|
||||
oAnim.stop();
|
||||
oAnim = null;
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Dom.setStyle(this.element, "overflow", "hidden");
|
||||
YAHOO.util.Dom.setStyle(this.body, "marginTop", ("-" + this.body.offsetHeight + "px"));
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "show" event handler for each submenu of the menu bar
|
||||
|
||||
function onMenuShow(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
oAnim = new YAHOO.util.Anim(
|
||||
this.body,
|
||||
{ marginTop: { to: 0 } },
|
||||
.5,
|
||||
YAHOO.util.Easing.easeOut
|
||||
);
|
||||
|
||||
oAnim.animate();
|
||||
|
||||
var me = this;
|
||||
|
||||
function onTween() {
|
||||
|
||||
me.cfg.refireEvent("iframe");
|
||||
|
||||
}
|
||||
|
||||
function onAnimationComplete() {
|
||||
|
||||
YAHOO.util.Dom.setStyle(me.body, "marginTop", ("0px"));
|
||||
YAHOO.util.Dom.setStyle(me.element, "overflow", "visible");
|
||||
|
||||
setupMenuAnimation(me);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Refire the event handler for the "iframe"
|
||||
configuration property with each tween so that the
|
||||
size and position of the iframe shim remain in sync
|
||||
with the menu.
|
||||
*/
|
||||
|
||||
if(this.cfg.getProperty("iframe") == true) {
|
||||
|
||||
oAnim.onTween.subscribe(onTween);
|
||||
|
||||
}
|
||||
|
||||
oAnim.onComplete.subscribe(onAnimationComplete);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "render" event handler for the menu bar
|
||||
|
||||
function onMenuRender(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
setupMenuAnimation(p_oMenu);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Instantiate and render the menu bar
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, hidedelay:750, lazyload:true });
|
||||
|
||||
|
||||
// Subscribe to the "beforerender" event
|
||||
|
||||
oMenuBar.renderEvent.subscribe(onMenuRender, oMenuBar, true);
|
||||
|
||||
oMenuBar.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("productsandservices", YAHOO.example.onMenuBarAvailable);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="yahoo-com">
|
||||
|
||||
<div id="doc" class="yui-t1">
|
||||
<div id="hd">
|
||||
<!-- start: your content here -->
|
||||
|
||||
<h1>Example: Website Top Nav Using Animation With Submenus Built From Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<!-- end: your content here -->
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<!-- start: primary column from outer template -->
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<!-- start: stack grids here -->
|
||||
|
||||
<div id="productsandservices" class="yuimenubar">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenubaritem first-of-type"><a href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a href="http://weather.yahoo.com">Weather</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="note"><strong>NOTE:</strong> <em>This example demonstrates how to add animation effects to a menu bar with submenus built using existing markup. You can also add animation to submenus built <a href="topnavfromjswithanim.html">using JavaScript</a>.</em></p>
|
||||
|
||||
<form name="example">
|
||||
<select name="test">
|
||||
<option value="one">One</option>
|
||||
<option value="two">Two</option>
|
||||
<option value="three">Three</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<!-- end: stack grids here -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end: primary column from outer template -->
|
||||
|
||||
<!-- start: secondary column from outer template -->
|
||||
<div class="yui-b">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
<!-- end: secondary column from outer template -->
|
||||
</div>
|
||||
<div id="ft">
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue