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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

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

受付中

ハンバーガーメニューで、「ページ内リンクをクリック」で閉じる

d.milito
d.milito

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

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

1回答

0評価

0クリップ

1081閲覧

投稿2020/04/01 12:51

編集2022/01/12 10:55

前提・実現したいこと

WordPressのテーマ「BusinessPress」を使用して簡単なレスポンシブのコーポレートサイトを作成しました。
テーマに、もともとハンバーガーメニューが用意されているのですが、一枚物のページのため、メニューはアンカーリンクに設定しました。

スマホ表示の際に、ハンバーガーメニュー内のリンクをクリックすると該当箇所まで移動はしますが、ハンバーガーメニューが閉じずに開いたままになってしまいます。

ハンバーガーメニュー内のリンクをクリックで、ハンバーガーメニューが閉じるよう改善したいと思っています。

HTML

<div class="main-header main-header-original drawer-opened"> <div class="main-header-content"> <div class="site-branding"> <div class="site-logo"><a href="https://www.sixbrothers.co.jp/" rel="home"><img alt="合同会社sixbrothers/sixbrothers Corp" src="https://www.sixbrothers.co.jp/wp-content/uploads/2020/03/header_logo-1.png" width="200"></a></div> <h1 class="site-title"><a href="https://www.sixbrothers.co.jp/" rel="home">合同会社sixbrothers/sixbrothers Corp</a></h1> <div class="site-description">「地域社会の発展に貢献し、全世界へ幸せを届ける」をミッションに掲げ、地域活性化・コンサルティング・デザイン/制作・コミュニティ創生を中心とした事業を展開しています。</div> </div><!-- .site-branding --> <nav class="main-navigation"> <div class="menu-toggle-container"> <ul id="menu-toggle" class="menu"> <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-18 current_page_item menu-item-80"><a href="https://www.sixbrothers.co.jp/" aria-current="page">TOP</a></li> <li id="menu-item-81" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-81"><a href="https://www.sixbrothers.co.jp/#service" aria-current="page">事業内容</a></li> <li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-82"><a href="https://www.sixbrothers.co.jp/#company" aria-current="page">会社概要</a></li> <li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-83"><a href="https://www.sixbrothers.co.jp/#contact" aria-current="page">お問い合わせ</a></li> </ul> </div> </nav><!-- .main-navigation --> <button class="drawer-hamburger"> <span class="screen-reader-text">メニュー</span> <span class="drawer-hamburger-icon"></span> </button> </div><!-- .main-header-content --> <div class="drawer-overlay"></div> <div class="drawer-navigation"> <div class="drawer-navigation-content"> <nav class="main-navigation"> <div class="menu-toggle-container"> <ul id="menu-toggle-1" class="menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-18 current_page_item menu-item-80"><a href="https://www.sixbrothers.co.jp/" aria-current="page">TOP</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-81"><a href="https://www.sixbrothers.co.jp/#service" aria-current="page">事業内容</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-82"><a href="https://www.sixbrothers.co.jp/#company" aria-current="page">会社概要</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-83"><a href="https://www.sixbrothers.co.jp/#contact" aria-current="page">お問い合わせ</a></li> </ul> </div> </nav><!-- .main-navigation --> </div><!-- .drawer-navigation-content --> </div><!-- .drawer-navigation --> </div>

CSS 一部抜粋

/* Drawer Button */ .drawer-hamburger { background-color: transparent; box-sizing: content-box; display: block; margin-right: -5px; outline: 0; padding: 12px 5px; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); width: 21px; min-width: 21px; z-index: 102; } .drawer-hamburger:hover, .drawer-hamburger:focus { background-color: transparent; } .drawer-hamburger-icon { position: relative; display: block; } .drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { background-color: #111; height: 2px; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); width: 100%; } .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { position: absolute; left: 0; content: ' '; } .drawer-hamburger-icon:before { top: -6px; } .drawer-hamburger-icon:after { top: 6px; } .drawer-opened .drawer-hamburger-icon { background-color: transparent; } .drawer-opened .drawer-hamburger-icon:before, .drawer-opened .drawer-hamburger-icon:after { top: 0; } .drawer-opened .drawer-hamburger-icon:before { transform: rotate(45deg); } .drawer-opened .drawer-hamburger-icon:after { transform: rotate(-45deg); } @media screen and (min-width: 782px) { .drawer-hamburger { padding: 15px 5px; } .drawer-hamburger-icon:before { top: -7px; } .drawer-hamburger-icon:after { top: 7px; } } /* Drawer Navigation */ .drawer-overlay { display: none; height: 100vh; left: 0; position: fixed; top: 0; width: 100%; z-index: 100; } .drawer-navigation { background: #fff; height: 100vh; overflow-y: auto; position: fixed; right: 0; top: 0; transform: translateX(100%); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); width: 90%; z-index: 101; -webkit-overflow-scrolling: touch; } .drawer-navigation-content { box-sizing: border-box; height: 100%; overflow-y: auto; padding: 60px 75px 60px 40px; width: 100%; } .drawer-opened .drawer-overlay { display: block; } .drawer-opened .drawer-navigation { box-shadow: 0 0 90px rgba(0, 0, 0, 0.2); transform: translateX(0); } @media screen and (min-width: 540px) { .drawer-navigation { width: 70%; } .drawer-navigation-content { padding: 75px 90px 75px 50px; } } @media screen and (min-width: 782px) { .drawer-navigation { width: 55%; } .drawer-navigation-content { padding: 90px 105px 90px 60px; } } /* Drawer Content */ .drawer-navigation ul { list-style: none; margin-bottom: 45px; margin-left: 0; } .drawer-navigation ul li { padding-bottom: 12px; padding-top: 14px; position: relative; } .drawer-navigation ul ul { margin-bottom: 0; margin-left: 1em; margin-top: 12px; } .drawer-navigation ul li li { padding-bottom: 10px; padding-top: 12px; } .drawer-navigation ul li li:last-child { padding-bottom: 0; } .drawer-navigation a { color: inherit; text-decoration: none; } .drawer-navigation a:hover { color: #111; } .drawer-navigation .page_item_has_children > a, .drawer-navigation .menu-item-has-children > a { display: inline-block; padding-right: 20px; } .drawer-navigation .dropdown-toggle { background-color: transparent; outline: 0; padding: 10px; position: absolute; right: -10px; top: 7px; } .drawer-navigation .dropdown-toggle:after { content: "\f107"; color: #333; display: inline-block; font: normal 18px/1 FontAwesome; -webkit-font-smoothing: antialiased; position: relative; } .drawer-navigation .dropdown-toggle.toggled-on:after { content: "\f106"; } .drawer-navigation .sub-menu { display: none; } .drawer-navigation .sub-menu.toggled-on { display: block; } .drawer-navigation .current_page_item > a, .drawer-navigation .current-menu-item > a { color: #111; font-weight: 700; } @media screen and (min-width: 782px) { .drawer-navigation .header-social-link { display: none; } }

js

(function( $ ) { "use strict"; function initMainNavigation( container ) { // Add dropdown toggle that displays child menu items. var dropdownToggle = $( '<button />', { 'class': 'dropdown-toggle', 'aria-expanded': false }) .append( $( '<span />', { 'class': 'screen-reader-text', text: businesspressScreenReaderText.expand }) ); container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle ); // Set the active submenu dropdown toggle button initial state. container.find( '.current-menu-ancestor > button' ) .addClass( 'toggled-on' ) .attr( 'aria-expanded', 'true' ) .find( '.screen-reader-text' ) .text( businesspressScreenReaderText.collapse ); // Set the active submenu initial state. container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' ); container.find( '.dropdown-toggle' ).click( function( e ) { var _this = $( this ), screenReaderSpan = _this.find( '.screen-reader-text' ); e.preventDefault(); _this.toggleClass( 'toggled-on' ); _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' ); _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' ); screenReaderSpan.text( screenReaderSpan.text() === businesspressScreenReaderText.expand ? businesspressScreenReaderText.collapse : businesspressScreenReaderText.expand ); }); } initMainNavigation( $( '.drawer-navigation .main-navigation' ) ); })( jQuery );

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

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