2

我在我的网站中使用了一个 megamenu,它完全基于 css。缺点是,它没有任何动画。下拉菜单突然出现。所以我正在考虑将其转换为基于 jquery 的切换。这是当前代码。如何将其转换为基于 jQuery 的?

.dropdown-1column, 
.dropdown-2columns, 
.dropdown-3columns, 
.dropdown-4columns,
.dropdown-5columns {
   margin:-1px auto  0 -285px;
   float:left;
   position:absolute;
   text-align:left;
   padding:10px 5px 10px 5px;
   border:1px solid #dedede;
   background:#fff;
   z-index:999;
   display:none;    
}


.menu li:hover .dropdown-1column, 
.menu li:hover .dropdown-2columns, 
.menu li:hover .dropdown-3columns,
.menu li:hover .dropdown-4columns,
.menu li:hover .dropdown-5columns {
    display:block; 
}

这是代码http://jsfiddle.net/gsTNS/

4

1 回答 1

2

我认为这几乎可以满足您的需求。大概可以细化:

http://jsfiddle.net/gsTNS/5/

基本上,我为每个具有下拉列表的 LI 添加了一个“has-dropdown”类,并且我为每个下拉 DIV 添加了一个“下拉”类。

然后使用 jQuery 激活一个 slideToggle 函数:

jQuery("div#menu ul.menu li.has-dropdown").hover(
 function () {
   $(this).find("div.dropdown").slideToggle();
 },
 function () {
   $(this).find("div.dropdown").slideToggle();
 }
);
于 2012-11-09T16:50:12.713 回答