造轮子之商业下拉菜单

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();
});
});
}