ドロップダウンリスト

投稿日：2017年7月26日

本日はヘッダーメニューとかで見られるドロップダウンリストについて。

bootstrapを使った方法は下記に。

通常のHTML+CSSで組む場合は以下のような感じ
HTML

<div id="nav_header">
    <ul>
　　     <li class="has-dropdown">
            <a href="#">ドロップダウンのヘッド的メニュー</a>
            <ul class="dropdown ">
                <li class="header_menu_drop_item">ドロップダウン1</li>
                <li class="header_menu_drop_item">ドロップダウン2</li>
                <li class="header_menu_drop_item">ドロップダウン3</li>
            </ul>
        </li>

        <li>通常のメニュー</li>
        <li>通常のメニュー</li>
        <li>通常のメニュー</li>
    </ul>

</div>

<ul>

<a href="#">ドロップダウンのヘッド的メニュー</a>

<li class="header_menu_drop_item">ドロップダウン1</li>

<li class="header_menu_drop_item">ドロップダウン2</li>

<li class="header_menu_drop_item">ドロップダウン3</li>

</ul>

</li>

<li>通常のメニュー</li>

</ul>

</div>

CSS

/** ヘッドメニュー **/
.has-dropdown{
  position:relative;
}

/** ヘッドメニューホバー時　ドロップダウンメニューをdisplay:blockにする**/
.has-dropdown:hover .dropdown {
  display: block;
}

/** ドロップダウン本体のCSS **/
.dropdown{
    padding-bottom:10px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /** 通常時はdisplay:none **/ 
    display:none;
    background:#000;
    color:#000;
    width:150px;
    /** ヘッドをrelativeにしてその基準点から**/
    position:absolute;
    /** 他のhtmlより前に出ないと隠れる可能性あり **/
    z-index: 1;
}

/** ヘッドメニュー **/

.has-dropdown{

position:relative;

}

/** ヘッドメニューホバー時　ドロップダウンメニューをdisplay:blockにする**/

.has-dropdown:hover .dropdown {

display: block;

}

/** ドロップダウン本体のCSS **/

.dropdown{

padding-bottom:10px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

/** 通常時はdisplay:none **/

display:none;

background:#000;

color:#000;

width:150px;

/** ヘッドをrelativeにしてその基準点から**/

position:absolute;

/** 他のhtmlより前に出ないと隠れる可能性あり **/

z-index: 1;

}