ドロワーメニュー( ハンバーガメニュー)をjQuery作成しています。
メニューのリンクは全てページ内リンクです。
ページ内リンクをクリックだとメニューが閉じないです。
リンクをクリックした際にメニューを閉じたいです。
html 、jQueryを下記に書いております。
html
1<div class="header-toggle"> 2 <div class="header-toggle-logo"> 3 <img src="" alt=""> 4 </div> 5 <div class="header-toggle-nav row"> 6 <ul> 7 <li><a href="#concept">Concept</a></li> 8 <li><a href="#news">News</a></li> 9 <li><a href="#lesson">Lesson</a></li> 10 </ul> 11 </div> 12 </div>
下記のコードでクリック、メニューを開ける
三本線画像と×画像の入れ替えを行なっています。
javaScript
1$(function() { 2 $('.header-btn-nav').click(function() { 3 $(".header-toggle").slideToggle(); 4 $(this).toggleClass("active"); 5 if($(this).hasClass('active')) { 6 $('.header-btn-nav img').attr('src','img/common/close'); 7 } else { 8 $('.header-btn-nav img').attr('src','img/common/menu'); 9 } 10 }); 11});
色々試し、上記のコードに加えてみましたが、メニューが閉じると画像の入れ替えがうまく行かなくなったりします。
スムーススクロールは下記です。
javaScript
1$(function () { 2 var headerHight = 80; //ヘッダの高さ 3 $('a[href^=#]').click(function(){ 4 var href= $(this).attr("href"); 5 var target = $(href == "#" || href == "" ? 'html' : href); 6 var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす 7 $("html, body").animate({scrollTop:position}, 550, "swing"); 8 return false; 9 }); 10});
よろしくお願いいたします!
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/05/08 22:53