4

親がホバーされたときにドロップダウンがうまくフェードインする CSS3 を使用したドロップダウン メニューを実装しましたli。ただし、ドロップダウンはフェードアウトしません。その理由は次のとおりです。表示プロパティを遷移できないため、不透明度を遷移させることでフェードを実現します。不透明度だけが移行されるため、サブulを邪魔にならないように移動する必要があります。そうしないと、ホバーしたときに非表示のサブメニューが表示されます。

これを示す JS Fiddle を作成しました。left:1000px;ルール onul#mainNav li ulがなければ、問題なくフェードアウトします。ただし、非表示のメニューにカーソルを合わせることができます。- http://jsfiddle.net/YZvdm/

では、誤ってホバリングできないようにすることなく、フェードアウトするにはどうすればよいでしょうか。height:0;フェードアウトも排除されるため、これはオプションではありません。

4

6 に答える 6

21

これを機能させるための鍵は、visibility:hidden代わりにdisplay:nonea を使用し、後が 0 になるtransition-delayまで可視性を使用することです。opacity

.nav li ul {
  visibility: hidden;
  opacity: 0;
  -prefixes-transition-property: opacity, visibility;
  -prefixes-transition-duration: .4s, 0s;
  -prefixes-transition-delay: 0s, .4s;
}

.nav li:hover ul {
  visibility: visible;
  opacity: 1;
  -prefixes-transition-delay: 0s, 0s;
}

フィドル: http://jsfiddle.net/YZvdm/29/

于 2014-02-17T17:19:16.473 に答える
3

次のように、jQuery のフェードインとフェードアウトを単純に実装することが、私にとってはるかに優れたソリューションであることが判明しました。

$(function() {

    $('#topNav ul').find('ul').show().hide();
    $('#topNav > ul > li').hover(function() {
        $(this).children('ul').stop().fadeIn(300);
    }, function() {
        $(this).children('ul').stop().fadeOut('fast');
    });

}
于 2012-10-01T17:33:40.977 に答える
3

これは、フェードインとフェードアウトを備えたすべての CSS ドロップダウンへの Github です。Javascript でできることはすべてできるはずです。

http://github.com/jmeas/CSS3-Dropdown-With-Fade

于 2012-10-07T19:03:05.480 に答える
0

Codepen でデモを作成しましたが、これは Firefox などで動作します。

http://codepen.io/hayatbiralem/pen/Gdfie

お役に立てれば。

スクリーンショット

于 2014-04-30T07:01:20.987 に答える
0

私はこのパーティーに遅れましたが、同様の見込み客に直面した結果は次のとおりです。

フィドル: https://jsbin.com/bibokaqumi/1/edit?html,css,output

マークアップ:

<nav>
  <ul>
    <li>Link One</li>
    <li class="sub">Link Two
      <ul>
        <li>Sub-Link One</li>
        <li>Sub-Link Two</li>
      </ul>
    </li>
    <li>Link Three</li>
  </ul>
</nav>

CSS3:

nav li {
    list-style: none;
}

nav > ul > li {
    height: 100px;
    padding-right: 50px;
    float: left;
}

    nav > ul > li.sub {
        position: relative;
    }

        nav > ul > li.sub ul {
            position: absolute;
            top: 20px;
            width: 200px;
            visibility: hidden;
        }

        nav > ul > li.sub ul {
            opacity: 0;
            transition-property: opacity;
            transition-duration: 0.3s;
        }

        nav > ul > li.sub:hover ul {
            opacity: 1;
            transition-delay: 0.1s;
            visibility: visible;
        }
于 2016-03-08T17:47:39.687 に答える
0

これを実際にテストしたことはありませんが、独自の特別な「遅延」アニメーションを定義し、それをサブメニューに適用することで回避できるはずです。

#mainNav > li > ul {  
    -moz-animation-duration: 3s;  
    -moz-animation-name: delaySlide;     
}  

@-moz-keyframes delaySlide {  
    from {  
      height: auto;  
    }  

    95% {  
       height: auto;
    }  
    to {  
      height: 0;  
    }     
}

そうすることで、適切なタイミングで、フェードアウト後にメニューの高さのアニメーションが発生するはずです。

https://developer.mozilla.org/en/CSS/CSS_animations#Defining_the_animation_sequence_using_keyframesから取得したサンプル コード

于 2012-04-23T17:48:14.837 に答える