2

私は自分のサイトで純粋に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 に答える