質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

493閲覧

ハンバーガーメニュー閉じない

SENTIA

総合スコア1

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2022/08/17 10:38

編集2022/08/18 13:30
コード< HTML > <header class="header"> <div class="header__inner"> <nav class="header__nav nav" id="js-nav"> <ul class="nav__items nav-items"> <li class="nav-items__item"><a href="#service">メニュー</a></li> <li class="nav-items__item"><a href="">メニュー</a></li> <li class="nav-items__item"><a href="">メニュー</a></li> <li class="nav-items__item"><a href="">メニュー</a></li> </ul> </nav> <button class="header__hamburger hamburger" id="js-hamburger"> <span></span> <span></span> <span></span> </button> </div> </header> ``````ここに言語を入力 < css > .header__hamburger { width: 50px; height: 100%; } .hamburger { background-color: transparent; border-color: transparent; z-index: 9999; span { width: 100%; height: 2px; background-color: #0A42CE; position: relative; transition: ease .4s; display: block; } } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { margin: 8px 0; } .hamburger span:nth-child(3) { top: 0; } /* ハンバーガーメニュークリック後のスタイル */ #js-nav.active { transform: translateX(0); } .hamburger.active span:nth-child(1) { top: 5px; transform: rotate(45deg); background-color: #fff; } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { top: -13px; transform: rotate(-45deg); background-color: #fff; } ```ここに言語を入力 コード

< javaScript >
// ハンバーガーメニューの開閉
const fix = document.documentElement;
const ham = document.querySelector('#js-hamburger');
const nav = document.querySelector('#js-nav');

ham.addEventListener('click', function () {
if (!this.classList.contains('active')) {
this.classList.add('active');
fix.classList.add('fixed');
nav.classList.add('active');
} else {
this.classList.remove('active');
fix.classList.remove('fixed');
nav.classList.remove('active');
}
});
link.addEventListenerAll('click', function() {
ham.classList.remove('active');
fix.classList.remove('active');
nav.classList.remove('active');
});

質問 初心者です 現在、ハンバーガーメニューのページ内リンクをクリックした時にメニュー画面を閉じたいのですが開いたままリンク先に移動してしまいます。 ### 実現したいこと ページ内リンクをクリックした時にメニュー画面を閉じてリンク先に移動 ### 発生している問題・エラーメッセージ

エラーメッセージ

### 該当のソースコード ```ここに言語名を入力 ソースコード

試したこと

ページ内リンクのa タグの href 属性をクリックしたら#js-navと#js-hamburger
のactiveをremoveするというコードを追加してみたのですが一つ目のページ内リンク
には反応するようになったのですがその他の時にはリンク位置までスクロールするだけでメニューは閉じませんでした。

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

こういうことでしょうか・・・?

https://codepen.io/riafeed/pen/MWVZEgp

投稿2022/08/18 05:28

RiaFeed

総合スコア2701

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問