<DAY191>ハンバーガーメニュの作り方

●8/31(土)
●学習日数 191日
●学習時間(本日)1時間
●累計学習時間 821.0時間
●一日あたりの平均学習時間 4.34時間

前提

railsでアプリ作成
hamlを使用
bootstrap4を使用している

何ができるか？

手順1

app/view/対象ファイル

 .NavMenu
        %ul 
          %li
            =form_tag search_tweets_path,method: :get do
              = text_field :page,:name, placeholder:"問題を検索",class:"from-serach"
              = button_tag do
                =fa_icon("search search-icon")
          - if user_signed_in?
            %li
              =link_to "マイページ",users_path,class:"dropdown-item"
            %li
              =link_to "問題の投稿",new_tweet_path,class:"dropdown-item"
          - else
            %li
              =link_to "新規登録",new_user_registration_path,class:"dropdown-item"
            %li
              =link_to "ログイン",new_user_session_path,class:"dropdown-item"
      / ハンバーガーメニュー部分
      .Toggle
        %span
        %span
        %span

手順2

csssに以下を追加

/*ナビメニューのスタイルを指定*/
.NavMenu{
  position: fixed; /*表示位置を固定*/
  z-index: 2; /*重ね順を変更*/
  top: 0; /*表示位置を指定*/
  left: 0; /*表示位置を指定*/
  background: #fff;/*背景を白にする*/
  color: #000; /*文字色を黒にする*/
  text-align: center; /*テキストを中央揃え*/
  width: 100%; /*全幅表示*/
  transform: translateY(-100%); /*ナビを上に隠す*/
  transition: all 1.0s; /*アニメーションの時間を指定*/
}
  
  .NavMenu ul{
   background: #ccc; /*背景をグレーにする*/
   width: 100%;
   margin: 0 auto;
   padding: 0;
  }
  
  .NavMenu ul li{
   font-size: 1.1em;
   list-style-type: none;
   padding: 0;
   width: 100%;
   border-bottom: 1px dotted #333;
  }
  
  .NavMenu ul li:last-child{
   padding-bottom: 0;
   border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
  }
  
  /*トグルボタンが押されたときに付与するクラス*/
.NavMenu.active{
  transform: translateY(0%); /*ナビを上に隠す*/
  }

  /*トグルボタンのスタイルを指定*/
.Toggle {
  display: block;
  position: fixed;    /* bodyに対しての絶対位置指定 */
  right: 43px;
  top: 42px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  z-index: 3;
}

.Toggle span {
  display: block;
  position: absolute;
  width: 30px;
  border-bottom: solid 3px #000;
  -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
  -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
  transition: .35s ease-in-out;			/*変化の速度を指定*/
  left: 6px;
}

.Toggle span:nth-child(1) {
  top: 9px;
  width: 50px;
}

.Toggle span:nth-child(2) {
  top: 18px;
  width: 50px;
}

.Toggle span:nth-child(3) {
  top: 27px;
  width: 50px;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
  top: 18px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

手順3

$(function() {
  $('.Toggle').click(function() {
    $(this).toggleClass('active');
    if ($(this).hasClass('active')) {
      $('.NavMenu').addClass('active');  //クラスを付与
    } else {
      $('.NavMenu').removeClass('active'); //クラスを外す
    }
    });
  });