ハンバーガーメニュー　リンク

現在このようにしてフロントエンド、バックエンドと分けて、
フロントエンドやバックエンドにカーソルが乗ると①HTMLなどが表示できるようにしています。

ruby:/index.html.haml
1.Main
2  .Main__header
3    .Main__header__nav
4      %h1 エンジニアのための本
5      %section.hamburger
6        %a.nav-button{:href => "#"}
7          %span
8          %span
9          %span
10      %nav
11        %ul.menu
12          %li 
13            フロントエンド
14            %ul.sub
15              %li
16                = link_to "①HTML", card_category_path(:card_id ,1)
17              %li
18                = link_to "②CSS", card_category_path(:card_id, 2)
19              %li
20                = link_to "③Javascript", card_category_path(:card_id, 3)
21          %li
22            バックエンド
23            %ul.sub
24              %li
25                = link_to "④Java", card_category_path(:card_id, 4)
26              %li
27                = link_to "⑤PHP", card_category_path(:card_id, 5)
28              %li
29                = link_to "⑥Python", card_category_path(:card_id, 6)
30              %li
31                = link_to "⑦Ruby", card_category_path(:card_id, 7)
32          = form_with(url: search_cards_path, local: true, method: :get, class: "search-top") do |f|
33            = f.text_field :keyword, placeholder: "検索", class: "search-top"
34            = f.submit "検索", class: "search-top"

それを画面の大きさが小さくなるとハンバーガーメニューを出すようにしています。
こちらがscssになります

ruby:/index.scss
1@media screen and (max-width: 1199px) {
2  .hamburger {
3    display: block;
4    position: absolute;
5    right: 10px;
6    top: 30%;
7    width: 50px;
8    height: 26px;
9    cursor: pointer;
10  }
11
12  nav {
13    display: none; //ブラウザが縮小した時に消去
14  }
15  
16  .nav-button {
17    display: inline-block;
18    position: relative;
19    width: 30px;
20    height: 26px;
21
22    span { //三本線の幅など
23      display: inline-block;
24      position: absolute;
25      left: 0;
26      width: 100%;
27      height: 4px;
28      background-color: #fff;
29
30      &:nth-of-type(1) {
31        top: 0;
32      }
33
34      &:nth-of-type(2) {
35        top: 11px;
36      }
37
38      &:nth-of-type(3) {
39        bottom: 0;
40      }
41    }
42  }
43}