我如何給全寬子菜單下滑效果

我有一個全寬子菜單導航，但下拉太難了。我希望它像一個滑下與緩和這是我的小提琴我如何給全寬子菜單下滑效果

body { 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
} 
/* not very relevant styling */ 
    h1 { 
font-size: 20px; 
padding-top: 20px; 
} 
.container { 
position: relative; 
margin: 20px auto 0 auto; 
width: 75%; 
} 
.header { 
background: #eee; 
} 
.nav { 
background: #ccc; 
} 
/* relevant styling */ 
    body { 
overflow-x: hidden; 
} 
/* trick from css-tricks comments */ 

/* FIRST LEVEL */ 
    .nav > ul > li { 
display: inline-block; 
position: relative; 
padding: 3px 10px 3px 0; 
z-index: 100; 
} 
/* SECOND LEVEL */ 
    .nav > ul > li > ul { 
position: absolute; 
left: 0; 
top: 100%; 
padding: 0 1000em; 
/* trick from css-tricks comments */ 
margin: 0 -1000em; 
/* trick from css-tricks comments */ 
z-index: 101; 
visibility: hidden; 
opacity: 0; 
background: rgba(255, 240, 240, 0.8); 
} 
.nav > ul > li:hover > ul { 
visibility: visible; 
opacity: 1; 
} 
.nav > ul > li > ul > li { 
padding: 3px 0; 
}

來源

2013-09-26 San

你可以發佈一個鏈接到一個真正的jsfiddle請... – pbenard

對不起，因爲我忘了添加小提琴。 – San

你需要自己嘗試，只有當你遇到**特定**問題時才能得到我們的幫助 – Itay

首先你需要，因爲顯示器display:none;取代的知名度和透明度的：沒有隱藏的元素，它會不佔用任何空間。該元素將被隱藏，並且該頁面將顯示爲該元素不存在。

我建議您使用jQuery而不是CSS3 transition屬性，因爲它不受Internet Explorer 9支持，而且早期版本和Chrome 25及更早版本需要前綴-webkit-，Opera Mini等其他瀏覽器不支持過渡。 [源代碼：http://caniuse.com/css-transitions]

您必須使用jquery .slideToggle()方法爲下拉菜單設置動畫。

function deactivateAll(item) { 
    $("li").not(item).each(function(index, elem) { 
     if ($(elem).hasClass("active")) { 
      toggle(elem); 
     } 
    }); 
} 

function toggle(elem) { 
    $(elem).find("ul.submenu").stop(true, true).slideToggle("fast"); 
    $(elem).toggleClass("active"); 
} 

$(".container li").on("hover", function(e) { 
    deactivateAll(this); 
    toggle(this); 
});

jsFiddle。

來源

2013-09-26 10:41:23

我如何給全寬子菜單下滑效果

回答

相關問題