Application Menubar Example : Menu « GUI Components « JavaScript DHTML






Application Menubar 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>Application Menubar 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">

            body {
            
                background-color:#dfb8df;
            
            }


            /* Define a new style for each menubar */

            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) {


                // "click" event handler for each item in the root MenuBar instance
    
                function onMenuBarItemClick(p_sType, p_aArguments) {
                
                    this.parent.hasFocus = true;
    
                    var oActiveItem = this.parent.activeItem;
                
                
                    // Hide any other submenus that might be visible
                
                    if(oActiveItem && oActiveItem != this) {
                
                        this.parent.clearActiveItem();
                
                    }
                
                
                    // Select and focus the current MenuItem instance
                
                    this.cfg.setProperty("selected", true);
                    this.focus();
                
                
                    // Show the submenu for this instance
                
                    var oSubmenu = this.cfg.getProperty("submenu");
    
                    if(oSubmenu) {
                
                        if(oSubmenu.cfg.getProperty("visible")) {
                        
                            oSubmenu.hide();
                        
                        }
                        else {
                        
                            oSubmenu.show();                    
                        
                        }
                
                    }
    
                }
    
    
                // "mouseover" event handler for each item in the root MenuBar instance
    
                function onMenuBarItemMouseOver(p_sType, p_aArguments) {
                
                    var oActiveItem = this.parent.activeItem;
                
                
                    // Hide any other submenus that might be visible
                
                    if(oActiveItem && oActiveItem != this) {
                
                        this.parent.clearActiveItem();
                
                    }
                
                
                    // Select and focus the current MenuItem instance
                
                    this.cfg.setProperty("selected", true);
                    this.focus();
    
                    if(this.parent.hasFocus) {            
                
                        // Show the submenu for this instance
                    
                        var oSubmenu = this.cfg.getProperty("submenu");
        
                        if(oSubmenu) {
                    
                            if(oSubmenu.cfg.getProperty("visible")) {
                            
                                oSubmenu.hide();
                            
                            }
                            else {
                            
                                oSubmenu.show();                    
                            
                            }
                    
                        }
    
                    }
    
                }


                var oApplicationsMenu = new YAHOO.widget.Menu("applications");
                
                oApplicationsMenu.addItem("Application 1");
                oApplicationsMenu.addItem("Application 2");
                oApplicationsMenu.addItem("Application 3");
                oApplicationsMenu.addItem("Application 3");


                var oFileMenu = new YAHOO.widget.Menu("filemenu", { zIndex:2 });
                
                oFileMenu.addItem(new YAHOO.widget.MenuItem("New File", { helptext: "Ctrl + N" } ));
                oFileMenu.addItem("New Folder");
                oFileMenu.addItem(new YAHOO.widget.MenuItem("Open", { helptext: "Ctrl + O" }));
                oFileMenu.addItem(new YAHOO.widget.MenuItem("Open With...", { submenu: oApplicationsMenu }));
                oFileMenu.addItem(new YAHOO.widget.MenuItem("Print", { helptext: "Ctrl + P" }));


                var oEditMenu = new YAHOO.widget.Menu("edit", { zIndex:2 });

                oEditMenu.addItem(new YAHOO.widget.MenuItem("Undo", { helptext: "Ctrl + Z" }));
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Redo", { helptext: "Ctrl + Y", disabled: true }));
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Cut", { helptext: "Ctrl + X", disabled: true }), 1);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Copy", { helptext: "Ctrl + C", disabled: true }), 1);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Paste", { helptext: "Ctrl + V" }), 1);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Delete", { helptext: "Del", disabled: true }), 1);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Select All", { helptext: "Ctrl + A" }), 2);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Find", { helptext: "Ctrl + F" }), 3);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Find Again", { helptext: "Ctrl + G" }), 3);


                var oMenuBar = new YAHOO.widget.MenuBar("menubar");

                oMenuBar.addItem(new YAHOO.widget.MenuBarItem("File", { submenu: oFileMenu }));
                oMenuBar.addItem(new YAHOO.widget.MenuBarItem("Edit", { submenu: oEditMenu }));
                oMenuBar.addItem("View");
                oMenuBar.addItem("Favorites");
                oMenuBar.addItem("Tools");
                oMenuBar.addItem("Tools");
                oMenuBar.addItem("Help");
                oMenuBar.addItem(new YAHOO.widget.MenuBarItem("Examples Home", { url: "index.html" }));


                // Render the MenuBar instance and corresponding submenus

                oMenuBar.render(document.body);


                /*
                    Add a "click" and "mouseover" event handler to each item 
                    in the root MenuBar instnace
                */

                var i = oMenuBar.getItemGroups()[0].length - 1,
                    oMenuBarItem;

                do {

                    oMenuBarItem = oMenuBar.getItem(i);
                    
                    if(oMenuBarItem) {

                        oMenuBarItem.clickEvent.subscribe(
                                onMenuBarItemClick,
                                oMenuBarItem,
                                true
                            );

                        oMenuBarItem.mouseOverEvent.subscribe(
                                onMenuBarItemMouseOver,
                                oMenuBarItem,
                                true
                            );

                    }
                
                }
                while(i--);


                // "click" event handler for the document
    
                function onDocumentClick(p_oEvent) {
                
                    var oTarget = YAHOO.util.Event.getTarget(p_oEvent);

                    if(
                        oTarget != oMenuBar.element && 
                        !YAHOO.util.Dom.isAncestor(oMenuBar.element, oTarget)
                    ) {
        
                        oMenuBar.hasFocus = false;
                        
                        if(oMenuBar.activeItem) {
    
                            var oSubmenu = oMenuBar.activeItem.cfg.getProperty("submenu");

                            if(oSubmenu) {
                            
                                oSubmenu.hide();
                            
                            }

                            oMenuBar.clearActiveItem();
                            oMenuBar.activeItem.blur();
                        
                        }
                    
                    }

                }


                // Add a "click" handler for the document

                YAHOO.util.Event.addListener(
                        document, 
                        "click", 
                        onDocumentClick
                    );


                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 menubar using nothing by 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>
           
       








yui.zip( 3,714 k)

Related examples in the same category

1.[DOM Menu] :: Example 1 :: Horizontal Menu
2.[DOM Menu] :: Example 2 :: KDE Keramik Style Menu
3.[DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style Menu
4.[DOM Menu] Example 4: Vertical Menu
5.[DOM Menu] :: Example 5 :: Two Menus
6.[DOM Menu] :: Example 6 :: Flash Hiding
7.Menu bar for an inner fake window
8.Fly in Menu item
9.Not too fancy menu with toolbar
10.Custom Contextual Menu(content sensitive)
11.Drop-Down Menus
12.Menu with sound
13.Menu based on Javascript
14.popup menu (content sensitive menu)
15.Complete Source Code for the Menu
16.Slide out menu
17.Dynamic menu: fly in
18.Menu and submenu
19.Slide out menu with i18N
20.Menu: XP, win 98 style
21.Simple drop-down menu example with layer
22.Build a simple fancy menu
23.Add/delete menu items
24.Customizable layout: customize menu layout
25.Vertical layout menu
26.Easy skinable menu with CSS
27.Menu Item properties
28.Direct link menu
29.Context menu: popup menu
30.Black Menu
31.Dropdown menu