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

jiake0504

导航下拉菜单是网站的一个常见应用，主要出现在网站内容较多，只能将内容分为多级栏目来呈现。这个应用的原理也是层的显示和隐藏，而我使用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");});