OS-Style Programs Menu Example : Menu 2 « GUI Components « JavaScript DHTML






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

1.Popup Menu
2.AtJsMenu Demo
3.Example 1: Basic Menu From Existing Markup
4.Example 2: Basic Menu From Pure JavaScript
5.Example 3: Grouped MenuItem Instances From Existing Markup
6.Example 4: Grouped MenuItem Instances Using Pure JavaScript
7.Example 5: Grouped MenuItem Instances With Titles From Existing Markup
8.Example 6: Grouped MenuItem Instances With Titles Using Pure JavaScript
9.Example 7: Multi-tiered Menu From Existing Markup
10.Example 8: Multi-tiered Menu From Pure JavaScript
11.Example 9: Handling Click Events
12.Example 10: Listening For DOM-Related Events
13.Example 11: MenuItem Configuration Properties
14.Example 12: Setting Configuration Properties At Runtime
15.Example 13: Multi-tiered Menu with Progressive Rendering of Submenus
16.Website Left Nav Example (with submenus built from JavaScript) 1
17.Website Left Nav Example (with submenus built from markup) 2
18.Website Top Nav (with submenus built from JavaScript) 3
19.Website Top Nav (with submenus built from markup) 4
20.Drop down menu and sub menu
21.Vertical menu and image menu
22.Emulate XP start menu
23.xmenu-xlayer-3
24.tree-menu
25.menu for applications