402 lines
No EOL
13 KiB
HTML
402 lines
No EOL
13 KiB
HTML
<!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> |