デザイン自由自在のdivドロップダウンメニューをCSSのみで実現 コピペで使えるHTML+CSS

スポンサーリンク
LINEで送る
Pocket

リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。Chrome、Edge、Opera、Firefoxで確認済。実際に実装する際はスマートフォン向けに@mediaを使って低解像度向けにwidthを狭く指定するか、又は%を指定する方法を検討してください。

ドロップダウンメニューサンプル

 

 

解説とコード

boxに当たるdiv内のアイテムについては、画像やyoutube埋め込みなど、何を入れても構わない。

HTML

<nav id="div-menu-nav">
  <div class="menu-tab menu-hover1"><a>プルダウン1</a></div><div class="menu-tab menu-hover2"><a>プルダウン2</a></div>
  <div class="box1">
    <div><a>アイテム1-1</a></div>
    <div><a>アイテム1-2</a></div>
    <div><a>アイテム1-3</a></div>
    <div><a>アイテム1-4</a></div>
    <div><a>アイテム1-5</a></div>
  </div>
  <div class="box2">
    <div><a>アイテム2-1</a></div>
    <div><a>アイテム2-2</a></div>
    <div><a>アイテム2-3</a></div>
  </div>
</nav>

スタイルシート

#div-menu-nav{
  position: relative; /* 子要素においてabsoluteを用いるため指定する */
  font-size:14px;
  z-index:9999; /* 最上位に表示する 一部の見出しがプルダウンの上に表示されてしまうことの対策 */
}
#div-menu-nav .menu-tab{
  display: inline-block; /* メニュータブを横並びにする */
  width:140px;
}
#div-menu-nav a{
  display: block; 
  padding: 10px 0px; 
  width: 100%; 
  color: #343434; 
  text-decoration: none;
  background-color: #fafafa;
  border-bottom: solid 1px #67b44a; 
}
#div-menu-nav a:hover{
  background-color:#ffe6e6;
  border-bottom: solid 1px #dd5656; 
}
#div-menu-nav a::before{ /* タブの左側のアクセントの変化の指定 ↓ */
  display: inline-block;
  content: "■"; 
  color: #67b44a; 
  transform: scaleX(0.4); /* 長方形を表示するにはborder 4pxなどの方法もありますが■をX方向に縮小する方法が楽です */
}
#div-menu-nav a:hover::before{
  content: ">"; 
  color: #dd5656; 
}
#div-menu-nav .menu-tab a::before{
  display: inline-block;
  content: ">"; 
  font-weight:900;
  color: #67b44a; 
  transform: scale(0.7,0.5) rotate(90deg); /* transformはまとめて書かないとうまく表示されないことがある */
}                  /* >を90度傾けて下に向けます */
#div-menu-nav .menu-tab a:hover::before{
  color: #dd5656; 
}                          /* アクセント指定ここまで */
#div-menu-nav .box1{
  position: absolute; 
  background-color: #ffffff;
  display: none;
  left:10px; /* 左から10pxで表示 */
}
#div-menu-nav .box2{
  position: absolute;
  left:150px; /*左から 10+140=150pxで表示 */
  display: none; 
}
#div-menu-nav .menu-hover1:hover ~ .box1{ /* メニューをhoverすれば box1を表示 */
  display: block;
}
#div-menu-nav .box1:hover{  /* 表示されたbox1をhoverすればそのままbox1を表示し続ける */
  display: block;           /* これがなければbox1が消えてしまう */
}
#div-menu-nav .box1 div{ /*各アイテムについて */
  background-color: #ffffff;
  width:130px;
}
#div-menu-nav .menu-hover2:hover ~ .box2{ /* box2についても同様 */
  display: block;
}
#div-menu-nav .box2:hover{
  display: block;
}
#div-menu-nav .box2 div{
  background-color: #ffffff;
  width:130px;
}

まとめ

  • divドロップダウンメニュー
    • メニューをhoverした際、対応するboxが表示されるよう、:hover ~ .boxを使ってdisplay:block;とする。
    • 続けてdivにhoverした際、対応するboxが消えないよう、boxについてdisplay:block;とする
    • 端末によってwidthを変更する場合は、@mediaを用いる(省略)

関連するCSS

transform 要素を変形するコピペで使えるHTML+CSS
要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
@mediaを使って解像度に応じてデザインを切り替える コピペで使えるHTML+CSS
CSS規則のひとつ、@mediaを使って解像度に応じてデザインを切り替える手法サンプル交えて紹介します。この実装によって、スマートフォンとパソコンでデザインの違いや、段組みやサイドバーの表示非表示の切り替えを実現できます。
三角形や不等号、記号の向きを変える コピペで使えるHTML+CSS
三角の▲、不等号の>といった記号の表示向きを変えます。見出しや、文の初めなどに配置して文章にアクセントを加えます。 ▲の向きを変える ▲を右向きにする...
LINEで送る
Pocket

タイトルとURLをコピーしました