※自分用メモです
① PC時アイコン＋メニュー スマホ時アイコン＋ドロワーメニュー(left,right,top,bottom４方向対応)
<!--### header --><divid="headerWrapper"class="headerWrapper"><divclass="inner headerFlexWrapper"><pclass="headerIconWrapper d-block d-lg-none"><imgclass="headerIcon"src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg"alt=""></p><pid="toggleButtonWrapper"class="toggleButtonWrapper"><spanclass="toggleButton"></span><spanclass="toggleButton"></span><spanclass="toggleButton"></span></p></div><navid="global_nav"class="global_nav inner"><pclass="headerIconWrapper d-none d-lg-block"><imgclass="headerIcon"src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg"alt=""></p><ulclass="headrMenu"><liclass="headrMenuItem descriptionMd"><ahref="#">※トップ</a></li><liclass="headrMenuItem descriptionMd"><ahref="#">※概要</a></li><liclass="headrMenuItem descriptionMd"><ahref="#">※特集</a></li><liclass="headrMenuItem descriptionMd"><ahref="#">※アクセス</a></li><liclass="headrMenuItem descriptionMd"><ahref="#">※お問い合わせ</a></li></ul></nav></div><!--End header -->.headerWrapper{background-color:cyan;height:56px;//headerの高さを調整position:fixed;//画面上部で固定する場合width:100%;}.headerFlexWrapper{display:flex;justify-content:space-between;//PC時アイコンとメニューを左右端寄せalign-items:center;//高さ中央寄せ}.headerIconWrapper{width:56px;height:56px;//headerの高さと合わせる}.headerIcon{height:100%;width:100%;object-fit:contain;}.global_nav{display:flex;justify-content:space-between;$drower_Menu_Width:300px;//ドロワーメニューwidth設定(px,%)$drower_Menu_Direction:right;//ドロワーメニューが出てくる方向の位置設定(left,right,top,bottom)@includemq('tab_sm'){position:fixed;//初期位置を固定padding-top:50px;background:#333;z-index:2;//headerを手前に見せるtransition:all400ms;//アニメーション設定@if$drower_Menu_Direction==leftor$drower_Menu_Direction==right{top:0;//上合わせ#{$drower_Menu_Direction}:-$drower_Menu_Width;width:$drower_Menu_Width;height:100%;//高さは画面いっぱいに}@elseif$drower_Menu_Direction==topor$drower_Menu_Direction==bottom{#{$drower_Menu_Direction}:-100%;width:$drower_Menu_Width;height:100%;//高さは画面いっぱいに// right: 0;//右側から出したい場合}&.open{#{$drower_Menu_Direction}:0px;transition:all400ms;//アニメーション設定}}@includemq('sp_lg'){position:fixed;//初期位置を固定padding-top:50px;background:#333;z-index:2;//headerを手前に見せるtransition:all400ms;//アニメーション設定@if$drower_Menu_Direction==leftor$drower_Menu_Direction==right{top:0;//上合わせ#{$drower_Menu_Direction}:-$drower_Menu_Width;width:$drower_Menu_Width;height:100%;//高さは画面いっぱいに}@elseif$drower_Menu_Direction==topor$drower_Menu_Direction==bottom{#{$drower_Menu_Direction}:-100%;width:$drower_Menu_Width;height:100%;//高さは画面いっぱいに// right: 0;//右側から出したい場合}&.open{#{$drower_Menu_Direction}:0px;transition:all400ms;//アニメーション設定}}@includemq('sp_sm'){position:fixed;//初期位置を固定padding-top:50px;background:#333;z-index:2;//headerを手前に見せるtransition:all400ms;//アニメーション設定@if$drower_Menu_Direction==leftor$drower_Menu_Direction==right{top:0;//上合わせ#{$drower_Menu_Direction}:-$drower_Menu_Width;width:$drower_Menu_Width;height:100%;//高さは画面いっぱいに}@elseif$drower_Menu_Direction==topor$drower_Menu_Direction==bottom{#{$drower_Menu_Direction}:-100%;width:$drower_Menu_Width;height:100%;//高さは画面いっぱいに// right: 0;//右側から出したい場合}&.open{#{$drower_Menu_Direction}:0px;transition:all400ms;//アニメーション設定}}}.headrMenu{display:flex;justify-content:flex-end;//PC時右よせ@includemq('tab_sm'){display:block;//タブレット以下flex解除width:100%;}@includemq('sp_lg'){display:block;width:100%;}@includemq('sp_sm'){display:block;width:100%;}}.headrMenuItem{padding:20px28px;@includemq('tab_sm'){display:block;//タブレット以下縦1列（ドロワーメニューの中）}@includemq('sp_lg'){display:block;}@includemq('sp_sm'){display:block;}}.headrMenuItema{text-decoration:none;color:#333;@includemq('tab_sm'){color:#ddd;}@includemq('sp_lg'){color:#ddd;}@includemq('sp_sm'){color:#ddd;}}/* /////////// *//* ###【トグルボタンのスタイル】 *//* /////////// */.toggleButtonWrapper{display:none;@includemq('tab_sm'){display:block;width:30px;height:24px;z-index:3;cursor:pointer;transition:all400ms;//アニメーション設定}@includemq('sp_lg'){display:block;width:30px;height:24px;z-index:3;cursor:pointer;transition:all400ms;//アニメーション設定}@includemq('sp_sm'){display:block;width:30px;height:24px;z-index:3;cursor:pointer;transition:all400ms;//アニメーション設定}}.toggleButton{position:absolute;//どんなにスクロールしても位置固定width:30px;height:2px;background:#666;border-radius:10px;transition:all400ms;//アニメーション設定&:nth-of-type(1){top:20px;//個別で調整可能}&:nth-of-type(2){top:30px;//個別で調整可能}&:nth-of-type(3){top:40px;//個別で調整可能}&.open{background:#fff;transition:all400ms;//アニメーション設定&:nth-of-type(1){top:20px;//個別で調整可能transform:translateY(10px)rotate(45deg);}&:nth-of-type(2){display:none;}&:nth-of-type(3){top:40px;//個別で調整可能transform:translateY(-10px)rotate(-45deg);}}}/* /////////// *//* End【トグルボタンのスタイル】 *//* /////////// */$(function(){$("#toggleButtonWrapper").on('click',function(){if($(this).hasClass("open")){//閉じる$(this).removeClass("open");$("#global_nav").removeClass("open");$(".toggleButton").removeClass("open");}else{//開ける$(this).addClass("open");$("#global_nav").addClass("open");$(".toggleButton").addClass("open");}});});