CSSでドロップダウンメニューを作る

こんにちは、グッチと申します。

今回は、アプリ開発中にCSSだけでドロップダウンメニューを実装したのですが、そこまで難しくなかったので、簡単にですが方法を書いていこうと思います。

私が作ったのはMENUにカーソルを乗せると下に編集と削除ボタンが出てくるというもので、HTMLはこんな感じ

<ul class="menu">

　<li class="menu_single">

　　<span>MENU</span>

　　<ul class="menu_second-level">

　　　<li class="menu_edit_button"><%= link_to '編集', %></li>

　　　<li class="menu_delete_button"><%= link_to '削除', %></li>

　　</ul>

　</li>

</ul>

CSSは全て載せると分かりにくいので、ドロップダウンに関係する所だけですが

.menu_single {

　position: relative;

　&:hover .menu_second-level {

　　display: block;

　}

　　.menu_second-level {

　　　position: absolute;

　　　left: 80px;

　　　display: none;

　 }

　}

まず編集・削除ボタンを入れた ulタグ "menu_second-level"をdisplay: none; で見えなくして、MENUと書かれた "menu_single"にカーソルが乗った際に :hoverで"menu_second-level"にdisplay: block;を当てる事で display: none;が上書きされて、ボタンが出てくるという仕組みです。

出てくる位置は、position: absolute; で調整が出来るので今回は左に出しましたが、top:で下に出す事も出来るみたいです。

実際の画像 ↓

始めから沢山のボタンがあると情報量が多く、利用者が使いにくいのでこういったドロップダウンメニューは適切に使えばとても有効だと思います。

今度は多階層のメニューにも挑戦したいです。

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）