Using-The-Menu-ARIA-Plugin


            
        "http://www.w3.org/TR/html4/strict.dtd">

  
    Menu: Using The Menu ARIA Plugin
        
        
        
        
         
    
    
    
            /*
                Setting the "zoom" property to "1" triggers the "hasLayout" 
                property in IE.  This is necessary to fix a bug IE where 
                mousing mousing off a the text node of MenuItem instance's 
                text label, or help text without the mouse actually exiting the
                boundaries of the MenuItem instance will result in the losing  
                the background color applied when it is selected.
            */
            
            #filemenu.visible .yuimenuitemlabel,
            #editmenu.visible .yuimenuitemlabel {
                *zoom: 1;
            }
      /*
        Remove "hasLayout" from the submenu of the file menu.      
      */
            #filemenu.visible .yuimenu .yuimenuitemlabel {
                *zoom: normal;
            }
      /*
        The Menu ARIA Plugin removes the "href" attribute from the  element of each 
        MenuItem if the value of the "href" is set to "#", resulting in the focus outline 
        no longer be rendered in Gecko-based browsers when the  element is focused.  
        For this reason, it is necessary to restore the focus outline for the . 
      */
      a[role=menuitem]:focus {
        outline: dotted 1px #000;
      }
    
    
        
        
        
        
        
    
    
    
      (function () {
      
        var Event = YAHOO.util.Event,
          Dom = YAHOO.util.Dom,
          UA = YAHOO.env.ua,
          /*
             Define an array of object literals, each containing 
             the data necessary to create the items for a MenuBar.
          */
        
          aItemData = [
        
            { text: "File", submenu: {  id: "filemenu", itemdata: [
        
                { text: "New File", helptext: "Ctrl + N" },
                "New Folder",
                { text: "Open", helptext: "Ctrl + O" },
                { text: "Open With...", submenu: { id: "applications", itemdata: [
                    "Application 1", 
                    "Application 2", 
                    "Application 3", 
                    "Application 4"
                  ] } 
                },
                { text: "Print", helptext: "Ctrl + P" }
        
              ] }
            
            },
            
            { text: "Edit", submenu: { id: "editmenu", itemdata: [
        
                [ 
                  { text: "Undo", helptext: "Ctrl + Z" },
                  { text: "Redo", helptext: "Ctrl + Y" }
                ],
                
                [
                  { text: "Cut", helptext: "Ctrl + X" },
                  { text: "Copy", helptext: "Ctrl + C" },
                  { text: "Paste", helptext: "Ctrl + V" },
                  { text: "Delete", helptext: "Del" }
                ],
                
                [ { text: "Select All", helptext: "Ctrl + A" } ],
        
                [
                  { text: "Find", helptext: "Ctrl + F" },
                  { text: "Find Again", helptext: "Ctrl + G" }
                ]
            
              ] }
        
            }
        
          ];
        /*
           Initialize and render the MenuBar when the page's DOM is ready 
           to be scripted.
        */
  
        Event.onDOMReady(function () {
  
          /*
            Instantiate a MenuBar:  The first argument passed to the constructor
            is the id for the Menu element to be created, the second is an 
            object literal of configuration properties.
          */
        
          var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", { lazyload: true, itemdata: aItemData });
  
  
          /*
            Add a "show" event listener that keeps the left-most
            submenu against the left edge of the browser viewport.
          */
          
          function onSubmenuShow() {
          
            var oIFrame;
  
  
            if (this.id == "filemenu") {
              
              Dom.setX(this.element, 0);
  
              oIFrame = this.iframe;            
        
  
              if (oIFrame) {
          
                Dom.setX(oIFrame, 0);
          
              }
              
              this.cfg.setProperty("x", 0, true);
            
            }
            /*
              Need to set the width for submenus of submenus in IE to prevent the mouseout 
              event from firing prematurely when the user mouses off of a MenuItem's 
              text node.
            */
  
            if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
  
              oElement = this.element;
              nOffsetWidth = oElement.offsetWidth;
          
              /*
                Measuring the difference of the offsetWidth before and after
                setting the "width" style attribute allows us to compute the 
                about of padding and borders applied to the element, which in 
                turn allows us to set the "width" property correctly.
              */
              
              oElement.style.width = nOffsetWidth + "px";
              oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
            
            }
          
          }
          
  
          // Subscribe to the "show" event for each submenu
          
          oMenuBar.subscribe("show", onSubmenuShow);
          
        
          /*
             Since this MenuBar instance is built completely from 
             script, call the "render" method passing in a node 
             reference for the DOM element that its should be 
             appended to.
          */
          
          oMenuBar.render(document.body);
          
        });
      
      }());
    
    
  
  


   
   
yui_2.7.0b.zip( 4,431 k)
YUI Library JavaScript DHTML
