Q&A
前提・実現したいこと
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="" rel="home"><img alt="" src="" width="200"></a></div> <h1 class="site-title"><a href="" rel="home">テキスト</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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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 );
回答1件
0
removeClassを使って、aタグをクリックしたときにtoggled-onクラスを取り除く
という処理だといかがでしょうか?
以下、イメージです。removeClasしなければならない要素がほかにもあるかもしれません。
/* aタグをクリックしたとき */ container.find( 'a' ).click( function( e ) { var _this = $( this ), screenReaderSpan = _this.find( '.screen-reader-text' ); e.preventDefault(); _this.toggleClass( 'toggled-on' ); /* クラスを取り除く */ _this.next( '.children, .sub-menu' ).removeClass( 'toggled-on' ); });
投稿2020/04/01 13:07
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/01 13:16