AI（ChatGPT）を使って半自動で月5万稼ぐ？
実際にやってみて結果・・ >>

【CSSだけ】マウスオーバーでドロップダウンするナビゲーションメニュー３選(アニメーション)

今回はhover(マウスオーバー)するとドロップダウン表示するナビゲーションメニューを３つご紹介。それぞれに違ったアニメーションがついています。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

この記事の目次
マウスオーバーでドロップダウンするナビゲーションメニュー３選（アニメーション）

  1. マウスオーバーでドロップダウンするシンプルだけど洗練されたナビゲーションメニュー
  2. マウスオーバーでボタンが浮く！独特でかわいいナビゲーションメニュー
  3. マウスオーバーでドロップダウン！UIナビゲーションメニュー

 

１. マウスオーバーでドロップダウンするシンプルだけど洗練されたナビゲーションメニュー

動きは下の画像のような感じになります

実際の動きはこちら

 

コードはこちら
コードを見る
  <div class="navigation">
<!-- 階層に分けてナビゲーションの骨組みを作成 -->
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a>
        <ul>
          <li><a href="#">Website</a>
            <ul>
              <li><a href="#">Website1</a></li>
              <li><a href="#">Website2</a></li>
            </ul>
          </li>
          <li><a href="#">Web Application</a>
            <ul>
              <li><a href="#">Web Application1</a></li>
              <li><a href="#">Web Application2</a></li>
            </ul>
          </li>
          <li><a href="#">Web Design</a>
            <ul>
              <li><a href="#">Web Design1</a></li>
              <li><a href="#">Web Design2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Blog</a>
        <ul>
          <li><a href="#">Blog1</a></li>
          <li><a href="#">Blog2</a></li>
        </ul>
      </li>
    </ul>
  </div>
.navigation {
  /* flexboxで要素を真ん中に指定 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  width: 100%;
  padding: 0;
  margin: 0;
  height: 60px;
  /* ポジションを相対的な位置に指定 */
  position:relative;
}
.navigation ul {
  display: block;
  width: 100%;
  background: #fff;
  /* リストの無駄なスタイルを削除 */
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;
}
.navigation ul li {
  display: inline-block;
  border-top: 1px solid #888888;
  border-bottom: 1px solid #888888;
}
.navigation ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  /* リンク指定した要素のスタイルを削除 */
  text-decoration:none;
  float: left;
  height: 50px;
  line-height: 50px;
}
.navigation ul li:hover {
  /* ナビゲーションをマウスオーバーした際のアニメーションと速度を指定 */
  transition: .7s;
  background: #888888;
}
.navigation ul li:hover > a{
  /* ナビゲーションの文字をマウスオーバーした際のアニメーションと速度を指定 */
  transition: .5s;
  color:#fff;
}
.navigation ul li:hover > ul {
  display:block;
}
.navigation ul ul {
  background: #fff;
  padding:0;
  text-align: center;
  display:none;
  width: 100%;
  position: absolute;
  top: 50px;
  left: 0px;
}
ここがポイント！
  1. ul, liでナビゲーションの骨組みを作成
  2. flexboxでど真ん中に配置
  3. transitionで要素をマウスオーバー(hover)した際のアニメーションを指定
  4. .navigation ul li:hover > ulをdisplay:blockとすることでhover時のドロップダウンを実現

 

２. マウスオーバーでボタンが浮く！独特でかわいいナビゲーションメニュー

動きは下の画像のような感じになります

実際の動きはこちら

 

コードはこちら
コードを見る
  <div class="navigation">
    <!-- 階層に分けてナビゲーションの骨組みを作成 -->
    <ul>
      <li class="button">
        <p><a href="#">Home</a></p>
      </li>
      <li class="button">
        <p><a href="#">About</a></p>
      </li>
      <li class="button">
        <p><a href="#">Portfolio</a></p>
      </li>
      <li class="button">
        <p><a href="#">blog</a></p>
      </li>
    </ul>
  </div>

.navigation{
  /* flexboxで要素を真ん中に指定 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1300px;
}
.navigation ul {
  width: 100%;
}
.button{
  display: block;
  padding:10px;
  background:white;
  width:20%;
  float:left;
  border:1px solid #d6d6d6;
  box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
  transition:.2s all;
}
.button p {
  height: 10px;
  font-weight: 300;
}
.button a {
  color:#333333;
  /* リンク指定した要素のスタイルを削除 */
  text-decoration:none;
}
.navigation:hover .button{
  /* ナビゲーションをマウスオーバーした際のアニメーションと速度を指定 */
  filter:blur(3px);
  /* ボタンが全てぼやける */
  opacity:.5;
  /* ボタンが全て少し小さくなる */
  transform: scale(.98);
  box-shadow:none;
}
.navigation:hover .button:hover{
  transform:scale(1);
  /* hoverしたボタンだけ元の大きさに指定 */
  filter:blur(0px);
  /* hoverしたボタンだけぼやけない指定 */
  opacity:1;
  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
}
ここがポイント！
  1. ul, liでナビゲーションの骨組みを作成
  2. flexboxでど真ん中に配置
  3. transitionで要素をマウスオーバー(hover)した際のアニメーションを指定
  4. filter:blur()*ぼやけ・opacity*不透明度・ transform: scale()*拡大縮小をhover前、hover後に指定することでマウスオーバーしたボタンだけ浮き上がるデザインを実現

 

３. マウスオーバーでドロップダウン！UIナビゲーションメニュー

動きは下の画像のような感じになります

実際の動きはこちら

 

コードはこちら
コードを見る
  <div class="navigation">
    <!-- 階層に分けてナビゲーションの骨組みを作成 -->
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a>
        <ul>
          <li><a href="#">Website</a>
            <ul>
              <li><a href="#">Website1</a></li>
              <li><a href="#">Website2</a></li>
            </ul>
          </li>
          <li><a href="#">Web Application</a>
            <ul>
              <li><a href="#">Web Application1</a></li>
              <li><a href="#">Web Application2</a></li>
            </ul>
          </li>
          <li><a href="#">Web Design</a>
            <ul>
              <li><a href="#">Web Design1</a></li>
              <li><a href="#">Web Design2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Blog</a>
        <ul>
          <li><a href="#">Blog1</a></li>
          <li><a href="#">Blog2</a></li>
        </ul>
      </li>
    </ul>
  </div>

.navigation {
  /* flexboxで要素を真ん中に指定 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  width: 100%;
  padding: 0;
  margin: 0;
  height: 60px;
  /* ポジションを相対的な位置に指定 */
  position:relative;
}
.navigation ul {
  display: block;
  width: 100%;
  background: #fff;
  /* リストの無駄なスタイルを削除 */
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;
}
.navigation ul li {
  display: inline-block;
  display: block;
  padding:5px;
  background:white;
  width:25%;
  float:left;
  border:1px solid #d6d6d6;
/* box-shadowで少し影をつける */
  box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
  transition:.2s all;
}
.navigation ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  /* リンク指定した要素のスタイルを削除 */
  text-decoration:none;
  height: 35px;
  line-height: 35px;
}
.navigation ul li:hover {
  /* ナビゲーションをマウスオーバーした際のアニメーションと速度を指定 */
  transition: .7s;
  background: #888888;
}
.navigation ul li:hover > a{
  /* ナビゲーションの文字をマウスオーバーした際のアニメーションと速度を指定 */
  transition: .5s;
  color:#fff;
}
.navigation ul li:hover > ul {
  display:block;
}
.navigation ul ul {
  width: 100%;
  background: #fff;
  padding:0;
  text-align: center;
  display:none;
  width: 100%;
  position: absolute;
  top: 50px;
  left: 5%;
}
ここがポイント！
  1. ul, liでナビゲーションの骨組みを作成
  2. flexboxでど真ん中に配置
  3. transitionで要素をマウスオーバー(hover)した際のアニメーションを指定
  4. .navigation ul li:hover > ulをdisplay:blockとすることでhover時のドロップダウンを実現

 

追記

もっとナビゲーションのデザインやアニメーションが見たい方は
cssだけ。絶対失敗しないナビゲーションメニューサンプル３選(マテリアルデザイン)をご覧ください

今回のアニメーションメインのデザインとは一味違い本格的な実務で失敗しないマテリアルデザインとしてのナビゲーションメニューをご紹介してますので是非ご覧ください。

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ！

ふたご

未経験からWeb制作で月５０万稼げるようになったUdemy教材３選
  1. 未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
  2. [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
  3. 超Vue.js 2 完全パック – もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)
でもなあ、独学だと心配だしプログラミングスクールで学びたい！。かといってお金はかけたくないし。。
そんなあなたにはこれ！

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習＆サポートが無料！
  2. 誰もが知っている超優良企業への就職サポート付き！
  3. 学習言語：Java、PHP、HTML、CSSなど

 

 　　話だけ聞いてみる 　  

前の記事

hover×transitionのCSSボタンエフェクト9選【…

次の記事

【hover×transform完全網羅】CSSボタンアニメー…