スマホ用ハンバーガーメニュー固定で、ページ内リンク時に開いたままなので、自動で閉じるようにしたい
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で制御できるのかな、と思いましたが同じやり方ではだめなようでした。
どうかご教示いただけますとたいへん助かります。宜しくお願いいたします。
回答1件
あなたの回答
tips
プレビュー