クリックするとトリガーが×になるドロワーメニュー

投稿日：2021/10/20 ｜最終更新：2021/10/23
JavaScript/jQuery
ドロワーメニュー

バーガーなどのトリガーに動きがあるとリッチな印象を与えるので、よく使うコードを置いておきます。

CSSだけでトリガーが変わるドロワーサンプル

案件によってはJavascriptが使えない場合もあるので、その場合は下記のようにチェックボックスのオン・オフでトリガーやメニューの開閉を切り替えます。

表示サンプル

HTML記述例

<div id="sample1">
    <input type="checkbox" id="sample1-trig" name="sample1-trig">
    <label for="sample1-trig">
        <u></u>
        <u></u>
        <u></u>
        <span>MENU</span>
        <div class="menu-list">
            <ul>
                <li>サンプル</li>
                <li>サンプル</li>
                <li>サンプル</li>
            </ul>
        </div>
    </label>
</div>

CSS記述例

#sample1 input{
    display: none;
}
#sample1 label{
    margin: 0;
    width: 50px;
    height: 50px;
    background: #eee;
    margin: 10px;
    padding: 5px 10px;
    text-align: center;
    cursor: pointer;
    position: relative;
}
#sample1 label u{
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 10px;
    margin: 5px auto;
    background: #000;
    transition: .5s all;
}
#sample1 input:checked + label u:nth-child(1){
    transform: translateY(8px) rotate(-45deg);
}
#sample1 input:checked + label u:nth-child(2){
    opacity: 0;
}
#sample1 input:checked + label u:nth-child(3){
    transform: translateY(-8px) rotate(45deg);
}
#sample1 span{
    font-size: 10px;
    line-height: 1;
    font-weight: bold;
    display: block;
}
#sample1 .menu-list{
    height: 0;
    width: 200px;
    overflow: hidden;
    background: #eee;
    transition: .5s all;
    z-index: -1;
    opacity: 0;
}
#sample1 input:checked + label .menu-list{
    height: auto;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 1;
    opacity: 1;
}

CSSとjQueryでトリガーが変わるドロワーサンプル

ドロワーの開閉をjQueryに頼っています。
トリガーの開閉はjQueryとCSSを利用しています。

jQueryが既に読み込まれている環境下でご利用ください。

表示サンプル

MENU

開閉サンプルはこちら

HTML記述例

<div id="sample2">
    <i id="sample2-trig">
        <u></u>
        <u></u>
        <u></u>
        <span>MENU</span>
    </i>
    <div id="sample2-menu" class="menu-list">
        <ul>
            <li>サンプル</li>
            <li>サンプル</li>
            <li>サンプル</li>
        </ul>
    </div>
</div>

CSS記述例

#sample2{
    position: relative;
}
#sample2-trig{
    margin: 0;
    display: block;
    width: 50px;
    height: 50px;
    background: #eee;
    margin: 10px;
    padding: 5px 10px;
    text-align: center;
    cursor: pointer;
    position: relative;
}
#sample2-trig u{
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 10px;
    margin: 5px auto;
    background: #000;
    transition: .5s all;
}
.open #sample2-trig u:nth-child(1){
    transform: translateY(8px) rotate(-45deg);
}
.open #sample2-trig u:nth-child(2){
    opacity: 0;
}
.open #sample2-trig u:nth-child(3){
    transform: translateY(-8px) rotate(45deg);
}
#sample2-trig span{
    font-size: 10px;
    line-height: 1;
    font-weight: bold;
    display: block;
}
#sample2 .menu-list{
    display: none;
    height: auto;
    width: 200px;
    background: #eee;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 1;
}

JS記述例

$(function() {
    $( '#sample2-trig' ).on( 'click', function(){
        $( '#sample2' ).toggleClass( 'open' );
        $( '#sample2-menu' ).slideToggle();
    });
});