1

微妙な遷移を伴うドロップダウン ナビゲーション バーを作成しようとしています。height:0 > height:autoトランジションでは機能しないため、コンテンツを非表示にすることはできません。使用してみmax-height:0 > max-height:5000pxましたが、コンテンツは実際にはまだ に隠されているようopacityです。「見えない」コンテンツにカーソルを合わせると、実際には想定されていない場合でも表示されるため、問題が発生します。

ここにデモがあります：

http://codepen.io/ajrdesign/pen/cabGx

HTML:

    <ul class="nav">
  <li><a href="">Home</a></li>
  <li class="has-dropdown">
    <a href="">Products
    </a>
    <div class="dropdown-content">
      <ul class="nav">
        <li><a href="#">Some</a></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Links</a></li>
      </ul>
    </div>
  </li>
  <li><a href="">Solutions</a></li>
  <li><a href="">More</a></li>
</ul>

CSS

ul {
  list-style:none;
}
li {
  display:inline-block;
}
.has-dropdown{
    position: relative;
}
.dropdown-content{
    opacity:0;
    max-height: 0;
    -webkit-transition: opacity 200ms ease-in-out 350ms;
    -moz-transition: opacity 200ms ease-in-out 350ms;
    -ms-transition: opacity 200ms ease-in-out 350ms;
    -o-transition: opacity 200ms ease-in-out 350ms;
    transition: opacity 200ms ease-in-out 350ms;
    position: absolute;
    z-index: 1000;
}

.has-dropdown:hover .dropdown-content{
    display:block;
    opacity: 1;
    max-height: 5000px;
}

ハングアップは何ですか？max-height:0本来あるべきように実際に機能していないのはなぜですか？

4

1 に答える 1

1

これを解決する方法は次のとおりです: アイデアは、要素の可視性を切り替えてフェードインすることです。これを逆にすると、マウスを離すと、サブメニューがフェードアウトし、可視性が再び非表示に設定されますが、今回は遅延があります、要素がフェードアウトを完了した後に行われるように:

CSS

.dropdown-content {
    visibility: hidden;
    opacity:0;
    position: absolute;        
    transition: opacity 0.2s 0.35s ease-in-out, visibility 0s 0.55s linear;
}

.has-dropdown:hover .dropdown-content{
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s 0.35s ease-in-out, visibility 0s 0s linear;
}

デモ

購入前にお試しください

于 2013-09-30T20:06:21.497 に答える