linkを設定したい

Question

ハンバーガーメニューの実装をしたのですが、リンクを押したらメニューが表示されるようにしたいと思っています。しかし、ハンバーガーメニューをクリックしても、

http://localhost:3000/#

となるだけで、何も表示されません。

仮説

      %section.hamburger
        %a.nav-button{:href => "#"}
          %span
          %span
          %span
        %ul.menu
          %li 
            フロントエンド
            %ul.sub
              %li
                = link_to "①HTML", card_category_path(:card_id ,1)
              %li
                = link_to "②CSS", card_category_path(:card_id, 2)
              %li
                = link_to "③Javascript", card_category_path(:card_id, 3)
          %li
            バックエンド
            %ul.sub
              %li
                = link_to "④Java", card_category_path(:card_id, 4)
              %li
                = link_to "⑤PHP", card_category_path(:card_id, 5)
              %li
                = link_to "⑥Python", card_category_path(:card_id, 6)
              %li
                = link_to "⑦Ruby", card_category_path(:card_id, 7)
          = form_with(url: search_cards_path, local: true, method: :get, class: "search-top") do |f|
            = f.text_field :keyword, placeholder: "検索", class: "search-top"
            = f.submit "検索", class: "search-top"

このコードの

%a.nav-button{:href => "#"}

リンクが”＃”いなっているからという原因はわかるのですが、どのようにしたらいいでしょうか？

実装したいことはハンバーガーメニューからフロントエンド、バックエンドが表示されるようにしたいです。

scssはこのようにしてハンバーガーメニューを実装しています。

@media screen and (max-width: 1199px) {
  .hamburger {
    display: block;
    position: absolute;
    right: 10px;
    top: 30%;
    width: 50px;
    height: 26px;
    cursor: pointer;
  }

  .Main__header__nav ul {
    display: none; //ブラウザが縮小した時に消去
  }
  
  .nav-button {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 26px;

    span {
      display: inline-block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 4px;
      background-color: #fff;

      &:nth-of-type(1) {
        top: 0;
      }

      &:nth-of-type(2) {
        top: 11px;
      }

      &:nth-of-type(3) {
        bottom: 0;
      }
    }
  }
}

Comments

[m.ts10806]

href=#は画面遷移するわけではないので関係ないかと思います。
ただ、
>フロントエンド、バックエンドが表示されるように
どういう意図でこの2つの用語を使っていますか？
バックエンドは表示されるものではないですよ。

[退会済みユーザー]

ハンバーガーメニューをクリックすると、menuが表示できるようにしたいと思っています。
こちらのmenuとは、フロントエンド、バックエンドのことを指しています。

[m.ts10806]

了解です。
ただ、CSSやJavaScriptはなしですか？HTMLだけで実現はできません。

[退会済みユーザー]

Javascriptは使用していません。宜しくお願い致します。
```rubu:/index.scss
@media screen and (max-width: 1199px) {
.hamburger {
display: block;
position: absolute;
right: 10px;
top: 30%;
width: 50px;
height: 26px;
cursor: pointer;
}

.Main__header__nav ul {
display: none; //ブラウザが縮小した時に消える
}

.nav-button {
display: inline-block;
position: relative;
width: 30px;
height: 26px;

span {
display: inline-block;
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #fff;

&:nth-of-type(1) {
top: 0;
}

&:nth-of-type(2) {
top: 11px;
}

&:nth-of-type(3) {
bottom: 0;
}
}
}
}
```

現在このようにしてハンバーガーメニューを実装できました。

[m.ts10806]

質問は編集できます。
本文に追記してください。

[m.ts10806]

「押したら」
ならやはりJavaScriptはあったほうが良いでしょうね。

[退会済みユーザー]

追記しました。ご指摘ありがとうございます。

どのようにしたらいいでしょうか？

[siruku6]

唯一の解決策ではないですが、たとえば
「javascript 要素の表示非表示」
などと検索すれば山ほど方法は出てくるとは思います。

ただ、個人的にはbootstrapやmaterial-uiなどのテンプレートを使用してハンバーガーメニューを表示させる方が簡単です。

よほどデザインにこだわりがない限りは、今回のようにCSSやjavascriptを自作してまで実装する必要はないと思います。