应用Prototype.js构建导航下拉菜单（一）

导航下拉菜单是网站的一个常见应用，主要出现在网站内容较多，只能将内容分为多级栏目来呈现。

这个应用的原理也是层的显示和隐藏，而我使用Prototype.js写了一个代码极其简单的导航下拉菜单，这其中的重点在于利用事件冒泡机制。

特点仍然是实现网站前端结构层，样式层，行为层完全分离，代码封装，可扩展性，自定义性良好。

Multi-level navigation menu is a common application which is often used when web sites have too many contents.

The theory of this app is still the show-hide of the div. I wrote a very simple example with Prototype.js. The emphasis is to use event bubble mechanism.

Its features are the separation of structure, style and behavior on web front-end. The code is easily reuse, high expansibility and customize in encapsulation.

演示 | Demo:
http://www.kxbd.com/mylab/080519dropdownmenu/

结构层代码：
程序代码 程序代码

<ul id="nav">
            <li class="nav_li"><a class="nav_a" href="javascript:void(0);">首　页</a>
                <ul class="nav_sub" style="display: none;">
                    <li><a href="#">新　　闻</a></li>
                    <li><a href="#">职位信息</a></li>
                </ul>
            </li>
            <li class="nav_li"><a class="nav_a" href="javascript:void(0);">产　品</a>
                <ul class="nav_sub" style="display: none;">
                    <li><a href="#">关于橡胶</a></li>
                    <li><a href="#">产品特性</a></li>
                    <li><a href="#">橡胶地板</a></li>
                    <li><a href="#">楼梯止滑板及附件</a></li>
                    <li><a href="#">导 盲 砖</a></li>
                    <li><a href="#">特殊定制</a></li>
                    <li><a href="#">质量保证</a></li>
                </ul>
            </li>
</ul>


行为层：
程序代码 程序代码

var dropDownMenu = Class.create();
dropDownMenu.prototype = {
    initialize:function(cls){
        this.cls = cls;
        this.init();
    },
    
    init:function(){
        $$(this.cls).each(function(o){
            o.observe("mouseover",function(){o.down(1).show()});
            o.observe("mouseout",function(){o.down(1).hide()});
        });
    }
};

document.observe("dom:loaded",function(){
    var newMenu = new dropDownMenu(".nav_li");
});