造轮子之商业下拉菜单

ranh>越来越觉得分享才是巩固知识的好方法，把自己的学习过程一点一点地记录下来，开启我的造轮子之旅，目前都是把懒人之家的代码拷贝下来，自己再参考把他们都实现并总结。。。。

商业菜单

实现过程

开始我以为很复杂，很高大上。结果。。。，好吧其实不怕麻烦的话肯定可以自己一点一点地做出来，

nav

<li>  <div class="submenu">    <div class="submenu_bg">//下拉菜单背景      <div class="submenu_main">//下拉菜单容器        <div class="submenu_li">          <div class="submenu_txt">            //这里就是各种你想的了，等于外面是框架          </div>        </div>        <div class="submenu_li">          <div class="submenu_txt">            //这里就是各种你想的了，等于外面是框架          </div>        </div>      </div>          </div>  </div></li>

看完之后我也是醉了，平时我的代码太过追求于精简化了，
然后就是display:none;js控制了，下面是js代码

$(function(){    dropmenu(".drop-menu-effect");});function dropmenu(_this){    $(_this).each(function(){//each遍历        var $this = $(this);//$(this)属于jquery的对象，不含有title等属性和js的this是不一样的，百度一下查看区别，        var theMenu = $this.find(".submenu");        var tarHeight = theMenu.height();        theMenu.css({height:0});        $this.hover(//这里我很纳闷为什么要用这种方式，使用其他jquery动画效果不是更简单吗？还有为什么要通过height来实现。            function(){                $(this).addClass("mj_hover_menu");                theMenu.stop().show().animate({height:tarHeight},400);            },            function(){                $(this).removeClass("mj_hover_menu");                theMenu.stop().animate({height:0},400,function(){                    $(this).css({display:"none"});                });            }        );    });}

综上，自己写一个，下面是demo

$(function(){    dropmenu(".drop-menu-effect");  });  function dropmenu(_this){    $(_this).each(function(){      var $this=$(this);      var theMenu=$this.find(".submenu");      $this.hover(function(){        theMenu.stop().slideToggle();      });    });  }