実現したいこと
現状ハンバーガーメニューを実装しており、ハンバーガーメニューを押下するとナビゲーション欄が表示
ナビゲーションのリンク、またはバツ印を押下するとナビゲーション欄が非表示される実装をしています。
★部分にてナビゲーション欄が非表示という記述をしている事が原因で、
PC版にてリンクを押下すると非表示、または、SP版のナビゲーションのリンクを押下した後
PC版のサイズに戻すと非表示になってしまう状況です。
jQuery
1 $(".h-btn").click(function () { 2 $(this).toggleClass("active"); 3 $("header nav").fadeToggle(); 4 }); 5 $("nav a").click(function () { 6 $(".active").removeClass("active"); 7 ★$("header nav").fadeToggle(); 8 });
良い方法があれば是非お力添えを頂きたいです。
よろしくお願い致します。
試したこと
①画面幅を変数の中に格納し、その変数を使用して、if文の出し分けでPCサイズであれば再度ナビゲーション欄を表示、SPサイズであればjQuery記載のロジックを実行としたのですが、変数の中身をリアルタイム監視出来ないためやりたいことの実装ができませんでした。
②resize()イベントを使用したやり方も試してみましたが、何度も実行されてしまうためナビゲーションが非表示と表示を繰り返してしまいます。
該当のソースコード
html
1<header>2 <a href="#top"><img src="img/logo.svg" alt="Green Tree"></a>3 <div class="h-btn sp">4 <span></span>5 <span></span>6 <span></span>7 </div>8 <nav>9 <ul>10 <li>11 <a href="#about">12 <small>test</small>13 <strong>test</strong>14 </a>15 </li>16 <li>17 <a href="#trial">18 <small>test</small>19 <strong>test</strong>20 </a>21 </li>22 <li>23 <a href="#qa">24 <small>test</small>25 <strong>test</strong>26 </a>27 </li>28 </ul>29 </nav>30 </header>
css
1/* header */2header {3 display: flex;4 align-items: center;5 justify-content: space-between;6 border-bottom: solid 1px #707070;7 padding: 0 60px;8 height: 120px;9 position: fixed;10 top: 0;11 left: 0;12 width: 100%;13 z-index: 1000;14 background-color: #fff;15}16 17header > a img {18 width: 73.73px;19 height: 92.04px;20}21 22header nav ul {23 display: flex;24 gap: 0 40px;25}26 27header li small {28 display: block;29 font-size: 14px;30 margin-bottom: 10px;31}32 33header li strong {34 font-size: 18px;35}36 37@media screen and (max-width: 750px) {38 .pc {39 display: none;40 }41 42 .sp {43 display: block;44 }45 46 header {47 padding: 0 20px;48 }49 50 header nav {51 position: fixed;52 top: 120px;53 left: 0;54 width: 100%;55 padding: 40px 0;56 background-color: rgba(255, 255, 255, 0.9);57 display: none;58 }59 60 header nav ul {61 gap: 40px 0;62 flex-wrap: wrap;63 }64 65 header nav li {66 width: 100%;67 text-align: center;68 }69 70 .h-btn {71 width: 46px;72 height: 35px;73 position: relative;74 }75 76 .h-btn span {77 position: absolute;78 width: 100%;79 height: 1px;80 left: 0;81 background-color: #707070;82 transition: 0.5s;83 }84 85 .h-btn span:first-of-type {86 top: 0;87 }88 89 .h-btn span:nth-of-type(2) {90 top: 50%;91 }92 93 .h-btn span:last-of-type {94 top: 100%;95 }96 97 .h-btn.active span:first-of-type {98 top: 50%;99 transform: translateY(-50%) rotate(45deg);100 }101 102 .h-btn.h-btn.active span:nth-of-type(2) {103 opacity: 0;104 }105 106 .h-btn.active span:last-of-type {107 top: 50%;108 transform: translateY(-50%) rotate(-45deg);109 }110}111 112
jQuery
1 $(".h-btn").click(function () { 2 $(this).toggleClass("active"); 3 $("header nav").fadeToggle(); 4 }); 5 $("nav a").click(function () { 6 $(".active").removeClass("active"); 7 $("header nav").fadeToggle(); 8 });
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント