OS-Style Programs Menu Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>OS-Style Programs Menu Example</title>
<!-- 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;
}
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">
// "load" handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// "click" handler for the "Go to..." menu item
function onGotoClick() {
var sURL = window.prompt("Enter a URL:","");
if(sURL && sURL.length > 0) {
document.location = sURL;
}
}
var oH1 = document.getElementsByTagName("h1")[0];
/*
Apply the "ytoolbar" class to the H1 so that it is styled
like an application toolbar
*/
YAHOO.util.Dom.addClass(oH1, "ytoolbar");
function PositionToolbar() {
// Position the H1 "toolbar" to the bottom of the viewport
var nViewportHeight = YAHOO.util.Dom.getClientHeight(),
nToolbarHeight = oH1.offsetHeight;
oH1.style.top = (nViewportHeight - nToolbarHeight) + "px";
}
PositionToolbar();
// Instantiate the root menu and submenus
var oMenu = new YAHOO.widget.Menu(
"yproducts",
{ constraintoviewport:true, zIndex:2 }
);
// Add a link back to the examples index page
var oExamples = oMenu.addItem(
new YAHOO.widget.MenuItem(
"Examples",
{ url: "index.html" }
)
);
oExamples.element.id = "examples";
// Add a "Go to..." item to the root menu
var oGoTo = oMenu.addItem("Go to...");
oGoTo.element.id = "goto";
// Add a "click" event handler to the "Go to..." item
oGoTo.clickEvent.subscribe(onGotoClick);
// Render the root menu and submenus
oMenu.render();
/*
Position the bottom-left corner of the root menu to the
top-left corner of the "Yahoo!" anchor
*/
oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]);
// "click" event handler for "Yahoo!" button
function onYahooClick(p_oEvent) {
// Position and display the menu
oMenu.align("bl", "tl");
oMenu.show();
// Stop propagation and prevent the default "click" behavior
YAHOO.util.Event.stopEvent(p_oEvent);
}
/*
Assign a "click" event handler to the "Yahoo!" anchor that
will display the menu
*/
YAHOO.util.Event.addListener("yahoo", "click", onYahooClick);
// "click" event handler for the document
function onDocumentClick(p_oEvent) {
// Hide the menu
oMenu.hide();
}
/*
Assign a "click" event handler to the document that will
hide the menu
*/
YAHOO.util.Event.addListener(
document,
"click",
onDocumentClick
);
// "resize" handler for the window
function onWindowResize() {
PositionToolbar();
oMenu.align("bl", "tl");
}
/*
Add a "resize" event handler for the window that will
reposition the H1 "toolbar" to the bottom of the viewport
*/
YAHOO.util.Event.addListener(window, "resize", onWindowResize);
var oPanel = new YAHOO.widget.SimpleDialog(
"exampleinfo",
{
constraintoviewport: true,
fixedcenter:true,
width:"400px",
zIndex:1
}
);
oPanel.setHeader("OS-Style Programs Menu Example");
oPanel.setBody("This example demonstrates how to transform existing markup on the page into an operating-system-like menu.");
oPanel.render(document.body);
oPanel.show();
}
// Add a "load" event handler for the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</head>
<body>
<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>
yui.zip( 3,714 k)Related examples in the same category