BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

html+cssでメニューバーのスロードロップダウン効果を実現するコード例

2022-01-21 07:21:12

目標：html+cssを使って、マウスをメニューバーに移動させるとメニューバーがゆっくり表示される効果を実現する。

この問題を解決するには、次の2つの方法があります。

方法1：遷移（トランジション）

フォーラムをオンにする-1 Absolute positioning (絶対)であるため、内側の li を親要素の外に出すと、それ以降のコンテンツが右側に圧迫されるため、親要素の外にある overflow: hidden のように、高さを0に設定し、マウスオーバー後にそれに応じて高さを設定します。 

.code .forum-1{
  /* Enable absolute positioning */
  position: absolute;
  overflow: hidden;
  height: 0;
  transition-duration: 0.5s;
}

htmlのコードは以下の通りです。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href=". /css/index.css">
  <link rel="stylesheet" href=". /css/reset.css">
  <title>Menu bar slow drop down</title>
</head>
<body>
  <ul class="code">
    <li><a href="#">blog</a></li>
    <li class="forum"><a href="#">forum</a>
      <ul class="forum-1">
        <li><a href="#">css</a></li>
        <li class="vue"><a href="#">vue</a></li>
        <li><a href="#">python</a></li>
      </ul>
    </li>
    <li><a href="#">live</a></li>
  </ul>
</body>
</html>

cssのスタイルコードは以下の通りです。 

a{
  display: block;
  text-decoration: none;
  color: #333;
}
.code{
  width: 390px;
  height: 50px;
  line-height: 50px;
  background-color:#bfa;
  margin: 5px auto;
}
.code li{
  float: left;
  width: 130px;
  height: 50px;
  background-color: #bfa;
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
}
.code > li:last-child{
  margin-right: 0;
}
.code > li:hover{
  background-color: #f8f192;
}
.forum{
  position: relative;
  margin: auto 90px;
}
.code .forum-1{
  /* enable absolute positioning */
  position: absolute;
  overflow: hidden;
  height: 0;
  transition-duration: 0.5s;
}
.forum:hover .forum-1{
  /* mouseover to release height */
  height: 150px;
}

いろいろ試した結果、transitionはdisplay属性に対応していないので、display:noneでメニューバーを隠すことはできないことがわかりました

方法2：アニメーション

まず、CSSアニメーションを作成します。 

@keyframes frames{
  from{
    height: 0px;
  }
  to{
    height: 150px;
  }
}

次に、メニュースタイルを隠すために display:none を設定し、それを forum-1 セレクタにバインドし、アニメーション名を animation にバインドし、デュレーションを設定します。 

.forum-1{
  position: absolute;
  display: none;
  overflow: hidden;
  /* Bind the animation name and set the duration */
  animation-name: frames;
  animation-duration: 0.5s;
}

マウスオーバー時にブロックするようにdisplayプロパティを設定するだけです。 

.forum:hover .forum-1{
  display: block;
}

注意点としては、この場合、マウスオーバー直後にセカンダリメニューバーが自動的に引っ込むという問題が発生することです。この問題を回避するには、forum-1 セレクタの中に次のようなコードを追加すればよいでしょう。 

.forum-1{
	animation-fill-mode: forwards;
}

残りのコードは方法1と同じなので、ここでは割愛します

レンダリングは次のようになります。

メニューバーのサンプルコードの遅いプルダウン効果を達成するためにHTML + CSSの使用に関するこの記事は、これに導入され、より関連するHTML + CSSメニューバー遅いプルダウンの内容は、以前の記事のスクリプトのホームを検索したり、次の関連記事を閲覧し続け、私はあなたが将来的にはよりスクリプトのホームをサポートして願っています！この記事では、メニューバーのサンプルコードの遅いプルダウンの効果を達成するために、HTML + CSSの使用に関するこの記事は、以前の記事のスクリプトのホームを検索し続け、以下の関連記事の閲覧し続け、私はあなたが将来のスクリプトのホームをサポートしています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します