前提・実現したいこと
HTML,CSS,JavaScript,jQueryでハンバーガーメニューを作っているのですが、JavaScriptとjQueryの知識が全く無く、発生した問題の解決方法が分からなくて困っています。
サーバーにアップしてみました。
http://designer.hariko.com/
発生している問題・エラーメッセージ
①ハンバーガーのトリガーで開いたメニュー内のアンカーにオンマウスすると、一瞬、メニューのdivが消えてちらつきます。消えない様に、ちらつかない様にしたいです。 ②メニューを開いた後、X(バツ)をクリックして閉じようとするとページトップに戻ってしまいます。戻らない様にしたいです。 ③メニュー内アンカー(ペラサイト内のID指定)をクリックするとその場所に移動するのですが、メニューが開いたままです。アンカーをクリックしたらメニューは閉じる様にしたいです。
該当のソースコード
html
1<header> 2<a id="logo" href="/">LOGO</a> 3 4<a class="menu-trigger" href="#"> 5<span></span> 6<span></span> 7<span></span> 8</a> 9 10<nav class="gblnv_block"> 11<ul class="gblnv_list"> 12<li><a href="index.html">トップ</a></li> 13<li><a href="#news">最新情報</a></li> 14<li><a href="#product">プロダクト</a></li> 15<li><a href="#company">会社概要</a></li> 16<li><a href="#recruit">採用情報</a></li> 17</ul> 18</nav> 19</header>
css
1.gblnv_box{background-color: #444444; width: 100%; height: 124px; } 2.gblnv_box a {margin: 38px;} 3.gblnv_block { 4 z-index: 10; 5 display: none; 6 background-color: rgba(0,20,50,0.85); 7 width: 100%; 8 height: 100%; 9 padding: 10% 0px 0px 0px; 10 margin: 0px; 11 color: #ffffff; 12 } 13.gblnv_block a:hover { color: #729FBF; } 14.gblnv_block ul{padding: 10px;} 15.gblnv_block ul li{line-height: 180%;} 16.gblnv_block ul li a{color: #ffffff; font-size: 26px; line-height: 260%;} 17.onanimation {display: block;} 18 19.menu-trigger, 20.menu-trigger span {display: inline-block; transition: all .4s; box-sizing: border-box;} 21.menu-trigger { 22 z-index: 20; 23 position: absolute; top: 20px; right: 20px; 24 border: 0px solid #aaa; 25 width: 30px; height: 20px; 26 } 27.menu-trigger span { 28 position: absolute; 29 left: 0; 30 width: 100%; 31 height: 1px; 32 background-color: #fff; 33 border-radius: 4px; 34} 35.menu-trigger span:nth-of-type(1) { 36 top: 0; 37} 38.menu-trigger span:nth-of-type(2) { 39 top: 50%; 40} 41.menu-trigger span:nth-of-type(3) { 42 bottom: 0; 43} 44 45 46.menu-trigger.active span:nth-of-type(1) { 47 -webkit-transform: translateY(10px) rotate(-45deg); 48 transform: translateY(10px) rotate(-45deg); 49} 50.menu-trigger.active span:nth-of-type(2) { 51 left: 50%; 52 opacity: 0; 53 -webkit-animation: active-menu-bar02 .8s forwards; 54 animation: active-menu-bar02 .8s forwards; 55} 56@-webkit-keyframes active-menu-bar02 { 57 100% { 58 height: 0; 59 } 60} 61@keyframes active-menu-bar02 { 62 100% { 63 height: 0; 64 } 65} 66.menu-trigger.active span:nth-of-type(3) { 67 -webkit-transform: translateY(-10px) rotate(45deg); 68 transform: translateY(-10px) rotate(45deg); 69}
JavaScript
1$(function(){ 2 $('a[href^="#"]').click(function(){ 3 var speed = 500; 4 var href= $(this).attr("href"); 5 var target = $(href == "#" || href == "" ? 'html' : href); 6 var position = target.offset().top; 7 $("html, body").animate({scrollTop:position}, speed, "swing"); 8 return false; 9 }); 10}); 11 12/* MENU */ 13 14$(document).ready(function() { 15 $(".menu-trigger").click(function () { 16 $(this).toggleClass("active"); 17 $(this).next().toggleClass("onanimation"); 18 $('ul li').hide(); 19 $('ul li').each(function(i) { 20 $(this).delay(80 * i).fadeIn(500); 21 }); 22 }); 23});
HTML CSS JavaScript jQuery
回答1件
あなたの回答
tips
プレビュー