| 
     
  
 
<!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>Example 1: Basic Menu From Existing Markup</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"> 
 
        <!-- CSS for Menu --> 
        <link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css"> 
  
        <!-- Page-specific styles --> 
        <style type="text/css"> 
 
            body { margin:.5em; } 
 
        </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> 
 
        <!-- Container source file --> 
        <script type="text/javascript" src="./build/container/container_core.js"></script> 
 
        <!-- Menu source file --> 
        <script type="text/javascript" src="./build/menu/menu.js"></script> 
 
        <!-- Page-specific script --> 
        <script type="text/javascript"> 
 
            YAHOO.example.onWindowLoad = function(p_oEvent) { 
 
                var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true }); 
 
                oMenu.render(); 
 
                oMenu.show(); 
              
            } 
 
 
            YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad); 
             
        </script> 
 
    </head> 
    <body> 
 
        <h1>Example 1: Basic Menu From Existing Markup <em>[<a href="index.html">Examples Home</a>]</em></h1> 
        <p>This example demonstrates how to create a basic menu using existing markup on the page.  The Menu API also supports building a menu like this <a href="example02.html">using nothing but JavaScript</a>.</p> 
 
        <div id="basicmenu" class="yuimenu"> 
            <div class="bd"> 
                <ul class="first-of-type"> 
                    <li class="yuimenuitem"><a href="http://www.java2s.com">A</a></li> 
                    <li class="yuimenuitem"><a href="http://www.java2s.com">B</a></li> 
                    <li class="yuimenuitem"><a href="http://www.java2s.com">C</a></li> 
                    <li class="yuimenuitem"><a href="http://www.java2s.com">D</a></li> 
                </ul>             
            </div> 
        </div> 
 
    </body> 
</html> 
            
          
   
    
    |