Example 7 : Menu 2 : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Menu 2 »

 

Example 7



<!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 7: Multi-tiered 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">
 
        <!-- 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 oProductsServicesMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter:true });

                oProductsServicesMenu.render();

                oProductsServicesMenu.show();
                
            }


            YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
            
        </script>

    </head>
    <body>

        <h1>Example 7: Multi-tiered Menu From Existing Markup</h1>
        <p>This example demonstrates how to create a multi-tiered menu using existing markup on the page.  The Menu API also supports building a menu like this <a href="example08.html">using nothing but JavaScript</a>.</p>

        <div id="productsandservices" class="yuimenu">
            <div class="bd">
                <ul class="first-of-type">
                    <li class="yuimenuitem"><a href="http://communication.yahoo.com">Communication</a>

                        <div id="communication" class="yuimenu">
                            <div class="bd">
                                <ul>
                                    <li class="yuimenuitem"><a href="http://360.yahoo.com">360&#176;</a></li>
                                    <li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
                                    <li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
                                    <li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
                                    <li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
                                    <li class="yuimenuitem">PIM
                                    
                                        <div id="pim" class="yuimenu">
                                            <div class="bd">
                                                <ul class="first-of-type">
                                                    <li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
                                                    <li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
                                                    <li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
                                                    <li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
                                                </ul>            
                                            </div>
                                        </div>                    
                                    
                                    </li>
                                    <li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
                                    <li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
                                    <li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
                                    <li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
                                </ul>
                            </div>
                        </div>                    
                    
                    </li>
                    <li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a>

                        <div id="shopping" class="yuimenu">
                            <div class="bd">                    
                                <ul>
                                    <li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
                                    <li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
                                    <li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
                                    <li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers &#38; Gifts</a></li>
                                    <li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
                                    <li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
                                    <li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
                                    <li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
                                    <li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
                                </ul>
                            </div>
                        </div>                    
                    
                    </li>
                    <li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a>

                        <div id="entertainment" class="yuimenu">
                            <div class="bd">                    
                                <ul>
                                    <li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
                                    <li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
                                    <li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
                                    <li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
                                    <li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
                                    <li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
                                    <li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
                                    <li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
                                </ul>                    
                            </div>
                        </div>                                        
                    
                    </li>
                    <li class="yuimenuitem">Information

                        <div id="information" class="yuimenu">
                            <div class="bd">                                        
                                <ul>
                                    <li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
                                    <li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
                                    <li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
                                    <li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
                                    <li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps &#38; Directions</a></li>
                                    <li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
                                    <li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
                                    <li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
                                    <li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
                                    <li class="yuimenuitem"><a href="http://weather.yahoo.com">Weather</a></li>
                                </ul>                    
                            </div>
                        </div>                                        
                    
                    </li>
                </ul>            
            </div>
        </div>
        
    </body>
</html>

           
       

Download : Download nav_yui.zip nav_yui.zip


-

Leave a Comment / Note


Vérification Refresh
  
Enter code
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

Navioo GUI Components
» Menu 2
Ajax Layer Ajax Layer
Data Type Data Type
Date Time Date Time
Development Development
Document Document
Event Event
Event onMethod Event onMethod
Form Control Form Control
GUI Components GUI Components
HTML HTML
Javascript CollectionsJavascript Collections
Javascript Objects Javascript Objects
Language Basics Language Basics
Node Operation Node Operation
Object Oriented Object Oriented
Page Components Page Components
Security Security
Style Layout Style Layout
Table Table
Utilities Utilities
Window Browser Window Browser