"http://www.w3.org/TR/html4/strict.dtd">
OS-Style Programs Menu Example
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;
}
// "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);
Yahoo!
- Products
Yahoo! Mail
Yahoo! Address Book
Yahoo! Calender
Yahoo! Notepad
Yahoo! Messenger
Yahoo! 360
Yahoo! Photos
Finance
Entertainment
Yahoo! Music
Yahoo! Movies
Yahoo! TV