ぬえさぶろうのAnimate放送部

解説

トグルメニューって、どういうときに使うもの

トグルメニューとは状態のON/OFFを切り替えるためのUIパーツです。

コンテンツのつくりかた

1. アイコンをクリックした時の処理を行う:click()メソッド
2. ナビゲーションメニューを開閉する:slideToggle()メソッド

HTML

<div class="toggle_class_btn"> 
<span></span> <span></span> <span></span> 
<!--/.toggle_class_btn--></div>

CSS

/*toggleボタン*/
.toggle_class_btn{
    position:absolute;
    top:2px;
    right:2px;
    width:40px;
    height:40px;
}
.toggle_class_btn:hover{
    background:#A5D4AD;
}
.toggle_class_btn span{
    background:#fff;
    display:block;
    width:36px;
    height:5px;
    transition:0.3s;
}
.toggle_class_btn span:nth-child(1){
    position:relative;
    top:6px;
    left:2px;
}
.toggle_class_btn span:nth-child(2){
    position:relative;
    top:12px;
    left:2px;
}
.toggle_class_btn span:nth-child(3){
    position:relative;
    top:18px;
    left:2px;
}
/*クリックした後に表示*/
/*スペースは入れない*/
 .open.toggle_class_btn span:nth-child(1){
    display:none;
}
 .open.toggle_class_btn span:nth-child(2){
    position:relative;
    top:18px;
    transform: rotate(45deg);
}
 .open.toggle_class_btn span:nth-child(3){
    position:relative;
    top:13px;
    transform: rotate(-45deg);
}

JS

JS

// トグルボタン
$(function(){
    $(".toggle_class_btn").click(function(){
        //クリック時の処理
        $(this).toggleClass("open");
        $(".code_ex").slideToggle(200);
    });
});