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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

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

Q&A

解決済

1回答

7667閲覧

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

mamitannyan

総合スコア15

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

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

0グッド

0クリップ

投稿2019/07/18 10:41

スマホ用ハンバーガーメニュー固定で、ページ内リンク時に開いたままなので、自動で閉じるようにしたい

Wordpressのasridというテーマをカスタマイズしています。
タブレットとスマホ時は最上部に固定でnaviを入れることにしたところ、ページ内リンク時にメニューが開いたままでコンテンツが隠れてしまうので、クリックすると自動的に閉じるようにしたいと思っています。

https://demo.athemes.com/astrid/

該当のソースコード

html

1<div class="btn-menu col-md-8 col-sm-6 col-xs-12"><i class="fa fa-navicon"></i></div> 2 3<nav id="mainnav" class="main-navigation"> 4<div class="menu-container"> 5<ul id="primary-menu" class="menu"> 6<li class="menu-item"><a href="#about">ABOUT<br>会社紹介</a></li> 7<li class="menu-item"><a href="#service">SERVICE<br>事業内容</a></li> 8<li class="menu-item menu-item-has-children"><a href="#works">WORKS<br>制作実績</a> 9<ul class="sub-menu"> 10<li class="menu-item"><a href="<?php echo esc_url( home_url('past') ); ?>">過去の実績</a></li> 11</ul> 12</li> 13<li class="menu-item"><a href="#company">COMPANY<br>会社概要</a></li> 14</ul></div> 15</nav><!-- #site-navigation -->

css

1/*-------------------------------------------------------------- 2## Menus 3--------------------------------------------------------------*/ 4.main-navigation { 5 display: block; 6} 7 8.main-navigation ul { 9 list-style: none; 10 margin: 0; 11 padding-left: 0; 12} 13 14.main-navigation li { 15 text-align:center; line-height:150%; 16 position: relative; 17 padding: 10px 20px; 18 font-size: 14px; 19 letter-spacing: 1px; 20} 21 22.main-navigation a { 23 display: inline-block; 24 text-decoration: none; 25 color: #515151; 26 position: relative; 27 padding: 3px 0; 28 z-index: 11; 29 font-weight:bold; 30} 31.main-navigation a:hover { color:#818181 !important;} 32 33.main-navigation li a::before, 34.main-navigation li a::after { 35 width: 0; 36 content: ''; 37 position: absolute; 38 bottom: 0; 39 z-index: -1; 40 height: 100%; 41 -webkit-transition: width 0.5s; 42 transition: width 0.5s; 43} 44.main-navigation li a::before { 45 right: 0; 46 border-top: 1px solid #fcd088; 47} 48.main-navigation ul ul ul { 49 top: 0 !important; 50} 51.main-navigation li a::after { 52 left: 0; 53 border-bottom: 1px solid #fcd088; 54} 55.main-navigation li a:hover::before, 56.main-navigation li a:hover::after { 57 width: 100%; 58} 59.main-navigation ul ul { 60 float: left; 61 position: absolute; 62 top: 160%; 63 left: -999em; 64 z-index: 99999; 65 background-color: #D6D6D6; 66} 67 68.submenu-visible { 69 top: 100% !important; 70 transition: all 0.4s; 71 -webkit-transition: all 0.4s; 72} 73 74.main-navigation ul ul ul { 75 left: -999em; 76 top: 0; 77} 78 79.main-navigation ul ul a { 80 width: 100px; 81 padding: 0; 82} 83.main-navigation ul ul a::before, 84.main-navigation ul ul a::after { 85 display: none; 86} 87 88.main-navigation a:hover, 89.main-navigation li.focus > a { 90 color: #fcd088; 91} 92 93.main-navigation ul li:hover > ul, 94.main-navigation ul li.focus > ul { 95 left: auto; 96} 97 98.main-navigation ul ul li:hover > ul, 99.main-navigation ul ul li.focus > ul { 100 left: 100%; 101} 102 103 104/* Mobile menu */ 105 106.btn-menu { 107 display: none; 108 text-align: right; 109 font-size: 28px; 110 color: #515151; 111 line-height: 1; 112 cursor: pointer; 113 -webkit-transition: all 0.3s ease-out; 114 transition: all 0.3s ease-out; margin-bottom:10px; 115} 116 117.btn-menu .fa { 118 cursor: pointer; 119} 120.btn-submenu { 121 position: relative; 122 top: 3px; 123 font-family: "FontAwesome"; 124 font-size: 20px; 125 text-align: left; 126 cursor: pointer; 127 padding: 10px; 128 margin-left: 10px; 129} 130.btn-submenu:before { 131 content: "\f107"; 132 color: #fff; 133} 134.btn-submenu.active:before { 135 content: "\f106" 136} 137#mainnav-mobi { 138 position: absolute; 139 top: 100%; 140 left: 0; 141 width: 40%; 142 background-color: #D6D6D6; 143 padding-left: 0px; 144 padding-right: 0; 145} 146#mainnav-mobi a { 147 padding-left: 15px; 148 padding-right: 15px; 149 width: auto; 150} 151#mainnav-mobi li { 152 display: block; 153 width: 100%; 154 clear: both; 155 text-align: left; 156 float: none; 157 padding-left: 20px; 158 padding-right: 0; 159 border-bottom: 1px solid rgba(255, 255, 255, 0.05); 160} 161#mainnav-mobi li a::after, 162#mainnav-mobi li a::before{ 163 display: none; 164} 165#mainnav-mobi ul { 166 float: none; 167} 168#mainnav-mobi ul ul { 169 position: relative; 170 top: 11px; 171 left: 0; 172 background-color: #fff; width:80%;} 173 174@media only screen and (max-width: 1024px) { 175 .main-navigation { 176 display: none; 177 } 178 .mobile-nav, 179 .btn-menu { 180 display: block; 181 } 182} 183@media only screen and (max-width: 1024px) { 184 .main-navigation, 185 .header-clone, 186 .large-header { 187 display: none; 188 } 189 .mobile-nav, 190 .small-header { 191 display: block; 192 width:100%; 193 }

試したこと

cssでfocus-withinの指定をすると良いと見つけましたが、やり方がどうもわかりませんでした。

このへんかなぁとも思いましたが

css

1#mainnav-mobi li a::after, 2#mainnav-mobi li a::before{ 3 display: none; 4}

cssでbefore、after、focusあたりが苦手でわからなくなってしまいました(泣)

https://teratail.com/questions/173001
こちらのようにjsで制御できるのかな、と思いましたが同じやり方ではだめなようでした。

どうかご教示いただけますとたいへん助かります。宜しくお願いいたします。

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

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

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

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

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

Lhankor_Mhy

2019/07/19 02:14

『同じやり方ではだめなようでした』とのこと、どのようなコードを書いて、具体的にはどのようにダメだったのかをご提示ください。
mamitannyan

2019/07/19 02:45

<script> $(function() { $('.btn-menu').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('#mainnav').addClass('active'); } else { $('#mainnav').removeClass('active'); } }); });</script> とフッター(</body>直前)に入れてみましたが効かないようでした。 宜しくお願いいたします。
Lhankor_Mhy

2019/07/19 02:53

それは、ご提示の https://teratail.com/questions/173001 の質問のコードのようです。 回答のコードは違いますよね? ご提示の質問は、「このように書いたけど動かなかった」というものでありますから、その質問のコードを参考にしても動かないのは当然ではないかな、と個人的には思うのですが、いかがでしょうか。
mamitannyan

2019/07/19 04:31

失礼いたしました。誤った記載をいたしました。 <script> $('#primary-menu a[href]').on('click', function(event) { $('.btn-menu').trigger('click'); });</script> と <script> $('#mainnav a[href]').on('click', function(event) { $('.btn-menu').trigger('click'); });</script> 2つ試してみましたがだめでした。何卒宜しくお願いいたします。
Lhankor_Mhy

2019/07/19 04:49 編集

「だめ」とは具体的には何が起きましたか? エラーメッセージなどをご提示ください。 エラーメッセージをどうやって見たらいいのかわからないようであれば、その旨お知らせください。
mamitannyan

2019/07/19 04:53

すみません、エラーメッセージはどうやって見たら良いのでしょうか。 こちらは、ハンバーガーメニューを開きページ内リンクしてもそのままメニューが開いたままという現象が変わりません。 宜しくお願いいたします。
mamitannyan

2019/07/19 06:10

ありがとうございます。Chromeのデベロッパーツール見てみました。 Uncaught TypeError: $ is not a function at (index):765 クリックすると↓こちら1行がマークされていました。 $('#primary-menu a[href]').on('click', function(event) {
Lhankor_Mhy

2019/07/19 06:30

なるほど。 もしかして、jQuery を使っていないのですか?
mamitannyan

2019/07/19 07:22

はじめに記載させていただいた通り、WordpressのテーマastridのデフォルトGvaviをそのまま使って見た目のカスタマイズをしています。 demoページのソースでなにかわかるようでしたらご教示いただけますと助かります。 https://demo.athemes.com/astrid/ この場合、Gnaviの制御がjqueryなのかcssなのか、私の方ではちょっとわかりかねてしまっています。 知識が浅く申し訳ありません。
Lhankor_Mhy

2019/07/19 07:57

ああ、ハンバーガーメニューはご自分で書いたものではないのですね。了解しました。 デモページを見てみます。
guest

回答1

0

ベストアンサー

$は使えないようですが、jQueryはあるようですね。
(function($){})(jQuery)で囲んだら動作しそうな気がします。
また、$('.btn-menu')にはイベントがついていないようでした。$('.btn-menu i')をクリックする必要があります。

つまり、こんな感じじゃないでしょうか。

js

1(function($){ 2 $('#primary-menu a[href]').on('click', function(event) { 3 $('.btn-menu i').trigger('click'); 4 }); 5})(jQuery)

投稿2019/07/19 08:15

Lhankor_Mhy

総合スコア35871

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

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

mamitannyan

2019/07/19 08:34

ありがとうございます、ばっちり動作して感動しています! まだまだ勉強中なのでどうぞこれからもご指導のほど宜しくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問