前提・実現したいこと
ハンバーガーメニューを初めて作った初心者です。
なんとかできたと思っったのですが、最後の最後に修正が入ってしまい困ってます。
発生している問題・エラーメッセージ
ハンバーガーメニューのリンクをクリックすると、現状リンク先には飛ぶのですが、ハンバーガーメニューが閉じないという状態です。 初歩的な質問かと思いますが、わかる方教えていただけないでしょうか?お願いします! 該当する htmlとCSSとJavascriptを公開します!
該当のソースコード
<!doctype html> <html><head> <meta charset="utf-8"> <title>ハンバーガーメニュー</title> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/media640.css" media="screen and (max-width:640px)"> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/menu.js"></script> </head> <body> <header class="order2"> <h1><img src="img/logo.gif" alt="" class="logo"></h1> <nav class="globalMenuSp"> <ul> <li class="line_3 line_none"> <div class="menu"><a href="index.html#tenmei_catalog">カタログ</a></div> <ul class="subMenu"> <li><a href="index.html#tenmei1_catalog">- 店名1</a></li> <li><a href="index.html#tenmei2_catalog">- 店名2</a></li> <li><a href="index.html#tenmei3_catalog1">- 店名3</a></li> <li><a href="index.html#sale">- セール</a></li> </ul> </li> <li class="line_3"> <div class="menu"><a href="index.html#zaiko-shyuhin_data">在庫情報</a></div> <ul class="subMenu"> <li><a href="index.html#zaiko-shyuhin_data">- 在庫状況</a></li> </ul> </li> <li class="line_3"> <div class="menu"><a href="index.html#web-fax_oder">オーダー</a></div> <ul class="subMenu"> <li><a href="index.html#web_oder">- ウェブオーダー</a></li> <li><a href="index.html#fax_oder">- FAXオーダーシート<br> ダウンロード</a></li> </ul> </li> <li class="line_3"><div class="menu2"><a href="index.html#new_transaction">新規お取引について</a></div></li> <li><div class="menu2"><a href="index.html#company_outline">弊社について</a></div></li> <li class="line_2"><div class="menu2" style="border: none;"><a href="index.html#otoiawase">お問い合わせ</a></div></li> </ul> </nav> <div class="navToggle"> <span></span><span></span><span></span><span>menu</span> </div> </header> </body> </html>
@charset "utf-8"; /* CSS Document */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote{margin:0;padding:0;} h1,h2,h3,h4,h5{font-size:100%;} ol,ul{list-style:none;} body{ font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; width:100%; text-align: center; background-color:#97AF62; } a:link {color:#000000; text-decoration: none;} /*未訪問のリンクの色*/ a:visited {color:#000000;} /*訪問済みのリンクの色*/ a:hover {opacity: 0.5;} /*カーソルが乗っているリンクの色*/ a:active {opacity: 0.5;} /*クリック中のリンクの色*/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrapper { padding: 1%; width: 100%; text-align: center; max-width: 1280px; /* 追加:幅は最大で1280pxまで広がるようにする */ margin: 0 auto; } .wrapper p { margin: 0; } .content { display: flex; padding: 20px 0; } .main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; height: 2000px; margin-right: 10px; background: #ccc; background: linear-gradient(to bottom, #eeeeee 0%,#B7EAE0 100%); } .side { display: flex; align-items: center; justify-content: center; position: -webkit-sticky; position: sticky; top: 0px; width: 220px; height: 710px; background: #30b298; } #l_main{ background-color: #AB6D6E; width: 220px; } aside{ } #r_main{ background-color: #94C6EB; -webkit-flex: 1; flex: 1; } /*ヘッダー*/ header{ } h1{ margin-bottom: 30px; margin-top: 10px; } .logo{ width: 220px; } header nav { text-align: left; } header nav ul{ } header nav ul li .menu{ position: relative; padding: 10px; color: #000000; border-bottom: 1px dotted #000000; list-style: none; text-align:left; font-size: 0.9em; } header nav ul li .menu a{ text-decoration: none; font-weight: bold; } header nav ul li .menu2{ position: relative; padding: 10px; color: #000000; border-bottom: 1px solid #000000; list-style: none; text-align:left; font-size: 0.9em; } header nav ul li .menu2 a{ text-decoration: none; font-weight: bold; } .subMenu { text-align: left; } .subMenu li { } .subMenu li a { font-size: 0.9em; padding: 3px 10px 3px 30px; text-decoration: none; } #nav_toggle{ display: none; } .line_1{ border-top: solid 1px #000000; } .line_2{ border-bottom: solid 1px #000000; } .line_3{ border-top: solid 1px #000000; } .line4{ border-bottom: 1px dotted #000000; } .subMenu li .line_3{ border-bottom: none; } .line_none{ border-top:none; } /*ナビ*/ nav.globalMenuSp { position: fixed; z-index: 2; top: 0; left: 0; background-color:rgba(255,255,255,0.7); color: #000; text-align: center; transform: translateY(-100%); transition: all 0.6s; width: 95%; padding-left: 30px; height: 496px; } nav.globalMenuSp ul { margin: 0 auto; padding: 0; width: 95%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } nav.globalMenuSp ul li { font-size: 1.1em; list-style-type: none; padding: 0; width: 95%; } /* 最後はラインを描かない */ nav.globalMenuSp ul li:last-child { padding-bottom: 0; /*border-bottom: none;*/ } nav.globalMenuSp ul li a { display: block; color: #000; /*padding: 1em 0;*/ } /* このクラスを、jQueryで付与・削除する */ nav.globalMenuSp.active { transform: translateY(0%); } /*ハンバーガー用*/ .navToggle { display: block; position: fixed; /* bodyに対しての絶対位置指定 */ right: 13px; top: 12px; width: 42px; height: 51px; cursor: pointer; z-index: 3; background: #666; text-align: center; letter-spacing: normal; } .navToggle span { display: block; position: absolute; /* .navToggleに対して */ width: 30px; border-bottom: solid 3px #eee; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; left: 6px; } .navToggle span:nth-child(1) { top: 9px; } .navToggle span:nth-child(2) { top: 18px; } .navToggle span:nth-child(3) { top: 27px; } .navToggle span:nth-child(4) { border: none; color: #eee; font-size: 9px; font-weight: bold; top: 28px; } /*(タップした後)CSS*/ /* 最初のspanをマイナス45度に */ .navToggle.active span:nth-child(1) { top: 18px; left: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /* 2番目と3番目のspanを45度に */ .navToggle.active span:nth-child(2), .navToggle.active span:nth-child(3) { top: 18px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }
$(function() { $('.navToggle').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.globalMenuSp').addClass('active'); } else { $('.globalMenuSp').removeClass('active'); } }); });
試したこと
これをリンクをクリックしたら閉じたいのですが、いろいろなサイトのヒントをみて真似してもどうしてもできません。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー