2

全幅サブメニューのナビゲーションがありますが、ドロップダウンが難しすぎます。イージングでスライドダウンのようにしたいこれは私のフィドルです

http://jsfiddle.net/cancerian73/bK9mF/

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;
 }
4

1 に答える 1

1

display:none;display:none は要素を非表示にし、スペースを占有しないため、最初に可視性と不透明度を置き換える必要があります。要素は非表示になり、要素が存在しないかのようにページが表示されます。

CSS3 プロパティの代わりに jQuery を使用することをお勧めしますtransition。これは、Internet Explorer 9 以前のバージョンと Chrome 25 以前のバージョンではサポートされておらず、接頭辞が必要であり、-webkit-Opera Mini などの他のブラウザーでは移行がサポートされていないためです。[ソース: http://caniuse.com/css-transitions ]

.slideToggle()ドロップダウン メニューをアニメーション化するには、jquery メソッドを使用する必要があります。

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-26T10:41:23.063 に答える