プルダウンメニューをCSSのみで作る方法 コピペで使えるHTML+CSS

2021.01.28
スポンサーリンク

CSSのみでプルダウンメニュー、ドロップダウンメニューを実装します。li、ul要素、及び:hoverセレクタを使用して設計していきます。表示の切り替えにおいてはdisplay属性を使用します。各項目の見出しについて::beforeを用いて装飾します。

JavaScriptを用いないためAMPサイトでも利用できます。

li,ulを用いず、divで実現するデザイン自在型はこちら(下記の方法を推奨します)

デザイン自由自在のdivドロップダウンメニューをCSSのみで実現 コピペで使えるHTML+CSS
リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。Chrome、Edge、Opera、Firefoxで確認済。実際に実装する際はスマートフォン向けに@mediaを使って低解像度向けにwidthを狭く指定するか、又...
programming-cafe.com
HTML
<ul id="menu">
  <li class="menu-tab">
    <div class="menu-tab-div">くだもの</div>
    <ul>
      <li class="menu-item">バナナ</li>
      <li class="menu-item">りんご</li>
      <li class="menu-item">パイナップル</li>
    </ul>
  </li>
</ul>
<ul id="menu">
  <li class="menu-tab">
    <div class="menu-tab-div">菓子</div>
    <ul>
      <li class="menu-item">ポテトチップス</li>
      <li class="menu-item">かりんとう</li>
      <li class="menu-item">ビスケット</li>
    </ul>
  </li>
</ul>
<ul id="menu">
  <li class="menu-tab">
    <div class="menu-tab-div">飲み物</div>
    <ul>
      <li class="menu-item">紅茶</li>
      <li class="menu-item">コーヒー</li>
      <li class="menu-item">オレンジュ-ス</li>
      <li class="menu-item">ウーロン茶</li>
    </ul>
  </li>
</ul>
スタイルシート
#menu{
 list-style: none;/* リスト構造において、○などが表示されないように設定*/
 font-size:12px;
}
#menu .menu-tab{
  float:left; /* メニュータブを横並びに*/
  margin:0px;
  width:25%;
  background-color:#eaeaea;
  padding:8px 30px;
  text-align:center;
  position: relative;
  border-right:1px solid #ff0000;
}
#menu .menu-tab ul{
  display: none;
}
#menu .menu-tab:hover ul{ /* マウスが重なれば、リストが表示されます。 */
  display: block;
}
#menu .menu-tab-div{
  display: inline;
}
#menu .menu-tab-div::before, #menu .menu-item::before{ /* >マークの動作です 　無くても良い*/
  display: inline-block;
  content: "＞";  /* ■を指定してscaleXで長方形に変形することもできる */
  color: #67b44a; 
  transform: scaleX(0.4); /* >を横方向0.4倍縮小します */
}
#menu .menu-tab-div:hover::before, #menu .menu-item:hover::before{ /* 上記の続き　無くても良い */
  display: inline-block;
  content: "＞"; 
  color: #dd5656; 
  transform: scaleX(0.4);
}
#menu .menu-tab ul{ 
  position: absolute;
  right:10px; /* absolute配置として、右からの距離です。 */
  text-align: left;
  padding:10px 10px;
  background-color:#eaeaea;
}
#menu .menu-tab .menu-item{
 list-style: none;
  padding:4px;
}
スポンサーリンク