具有展開效果的下拉引導菜單

我試圖使展開效果的引導菜單下拉菜單處於懸停狀態。具有展開效果的下拉引導菜單

現在我有這個JavaScript，使之下拉列表懸停與滑動效果：

// dropdown hover effect 
$('.navbar .dropdown').hover(function() { 
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
}, function() { 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp() 
});

這個行之有效的桌面版本，但無法在手機上，並沒有展開的效果。

達到此目的的最佳方法是什麼？通過JavaScript或CSS？

謝謝！

來源

2016-01-04 Johhan Santana

查看[this JSFiddle]（https://jsfiddle.net/htya5d3n/），瞭解適用於移動設備的CSS解決方案。 – GAntoine

是的，你是正確的在桌面上的代碼效果很好，因爲桌面版支持懸停事件，但移動版本不支持。手機版應該使用點擊事件來處理。

來源

2016-01-04 18:35:48 amitguptageek

我能做到這樣的效果：

// dropdown hover effect 
if($(window).width() > 768) { 
    $('.navbar .dropdown').hover(function() { 
    $(this).addClass('open'); 
    }, function() { 
    $(this).removeClass('open'); 
    }); 
};

和css：

@media (min-width: 768px) { 
    .dropdown .dropdown-menu { 
     -webkit-transition: all 0.5s; 
     -moz-transition: all 0.5s; 
     -ms-transition: all 0.5s; 
     -o-transition: all 0.5s; 
     transition: all 0.5s; 

     max-height: 0; 
     display: block; 
     overflow: hidden; 
     opacity: 0; 
     -webkit-transform: perspective(200px) rotateX(-90deg); 
     -moz-transform: perspective(200px) rotateX(-90deg); 
     transform: perspective(200px) rotateX(-90deg); 
    } 

    .dropdown.open .dropdown-menu { 
     max-height: 250px; 
     opacity: 1; 
     -webkit-transform: perspective(200px) rotateX(0deg); 
     -moz-transform: perspective(200px) rotateX(0deg); 
     transform: perspective(200px) rotateX(0deg); 
     transform-origin: center top; 
    } 
}

的max-height將取決於你有多少按鈕有在下拉列表中，你越有，更高的高度。

來源

2016-01-05 18:19:35

請記住，您無法在觸摸屏移動設備上使用懸停事件 –

具有展開效果的下拉引導菜單

回答

相關問題