如何將css只megamenu轉換爲基於jquery

我在我的網站使用megamenu，這是純粹的基於CSS。缺點是，它沒有任何動畫。下拉菜單突然顯示。所以我想轉換爲基於jQuery的切換。這是當前的代碼。我如何將它轉換爲基於jQuery的？如何將css只megamenu轉換爲基於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/

來源

2012-11-09 user632347

動畫CSS3中存在，如果你不都對瀏覽器的兼容性太大的限制。你想要什麼動畫？ –

你能發佈你的HTML嗎？看到現有的功能將有所幫助 – AJak

下拉應與動畫一起顯示。就像jquery滑下去一樣。我嘗試了不透明度0和1的技巧。但它沒有奏效，因爲我的下拉菜單在左側使用了-285px。 – user632347

這幾乎做了你在找什麼，我認爲。也許可以細化：

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

基本上我已經添加了一類「有-下拉」到具有下拉每個L1和我添加了一個「下拉菜單」級到每個下拉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-09 16:50:12

絕對需要停止（）某處:) – Huangism

@Billy護城河：感謝它的作品像一個魔術。現在有什麼靈魂讓它可以用於非JavaScript的瀏覽器呢？ – user632347

@黃色：在哪裏添加？ – user632347

如何將css只megamenu轉換爲基於jquery

回答

相關問題