ナビメニューを実装するのにこちらのjQueryを参考にドロップダウンメニューを作りました。
PCではドロップダウンメニュー 、スマホではアコーディオンメニューにしたかったのでほぼ同じ動きです。
https://yori3.com/trying/drower/
ただ、実装が済んでいざURLを設定していったところaタグが効かないことに気付き、原因がわからず困っている状況です。
js初心者です。
■html
<header> <div class="toggle"> <div class="ttl-sec"> <p class="ttl-sub"><img src="<?php echo get_template_directory_uri(); ?>/images/logo_sub.svg" alt="旅する前に読みたいパリ情報サイト"></p> <p class="ttl-main"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.svg" class="TRIP PARIS トリップパリ"></a></p> </div> </div> <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu"> <label for="openSidebarMenu" class="sidebarIconToggle"> <div class="spinner diagonal part-1"></div> <div class="spinner horizontal"></div> <div class="spinner diagonal part-2"></div> </label> <div class="header-sec"> <nav> <ul> <li><a href="">観光地</a></li> <li class="menu_open"> <a href="">グルメ</a> <ul> <li><a href="#">カフェ</a></li> <li><a href="#">スイーツ</a></li> <li><a href="#">ショコラティエ</a></li> </ul> </li> <li class="menu_open"> <a href="">ショップ</a> <ul> <li><a href="http://fancybox.net/">インテリアショップ</a></li> <li><a href="<?php echo esc_url( home_url( '/shop/zakka/' ) ); ?>">雑貨屋さん</a></li> </ul> </li> <li><a href="http://fancybox.net/">ホテル</a></li> <li><a href="">豆知識</a></li> <li><a href="">日本で会えるパリ</a></li> <li><a href="">パリ関連本</a></li> </ul> </nav> <div class="toggle-bnr"> <ul> <li><img src="<?php echo get_template_directory_uri(); ?>/images/side_banner01.jpg"></li> <li><img src="<?php echo get_template_directory_uri(); ?>/images/side_banner01.jpg"></li> <li><img src="<?php echo get_template_directory_uri(); ?>/images/side_banner01.jpg"></li> </ul> </div> </div> </header>
■css
header{ width: 100%; border-bottom: 1px #d9d9d9 solid; } header .ttl-sec{ padding-top: 40px; border-top: 7px #f6c7d0 solid; } header .ttl-sec .ttl-sub{ width: 250px; margin: 0 auto; } header .ttl-sec .ttl-main{ width: 310px; margin: 5px auto 0; } header input{ display: none; } header nav > ul{ width: 1080px; margin: 20px auto 0; padding: 0 0 15px; font-size: 14px; font-weight: 500; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; } header nav > ul > li{ position: relative; padding-right: 50px; } header nav > ul > li:last-child{ padding-right: 0; } header nav > ul > li > ul { display: none; position: absolute; top: 40px; width: 250px; padding: 20px; margin-left: -20px; background-color: rgb(255, 255, 255, 0.9); } header nav > ul > li li > a { display: block; width: 100%; padding: 0; line-height: 2.5; } header a{ color: #000; } header a:hover{ color: #da7575; text-decoration: none; } header .header-sec{ z-index: 999; } header .header-sec .toggle-bnr{ display: none; } @media screen and (max-width:768px) { header{ width: 100%; } header .toggle { width: 100%; display: block; margin: 0 auto; max-width: 100%; box-shadow: none; background-color: #fff; position: fixed; height: 60px!important; overflow: hidden; z-index: 10; border-bottom: 1px #d9d9d9 solid; } header .header-sec { height: 100%; position: fixed; right: 0; width: 300px; margin-top: 60px; transform: translateX(300px); transition: transform 250ms ease-in-out; background-color:rgba(255,255,255,1); } header .header-sec .toggle-bnr { display: block; padding: 20px; } header .header-sec .toggle-bnr ul li{ margin-bottom: 10px; } header .ttl-sec{ padding-top: 0; margin-top: 0; border-top: 5px #f6c7d0 solid; border-bottom: 1px #d9d9d9 solid; padding-bottom: 15px; } header .ttl-sec .ttl-sub{ width: 140px; margin: 0 auto; } header .ttl-sec .ttl-main{ width: 140px; margin: 0 auto; } header nav > ul{ width: 100%; font-weight: 400; margin: 20px 0 0; display: block; padding: 0; } header nav > ul > li{ margin: 0 20px; padding: 0; line-height: 40px; border-top: 1px #ccc solid; } header nav > ul > li:last-child{ margin: 0 20px; border-bottom: 1px #ccc solid; } header nav > ul > li > ul { position: relative; top: 0; margin-left: 0; width: 100%; padding: 0 0 15px; } header nav > ul > li.menu_open a{ display: block; width: 100%; } header nav > ul > li li > a { } header nav > ul > li.menu_open:after { content: ""; width: 18px; height: 18px; position: absolute; background: url(images/icon_plus.svg) 0 0 no-repeat; top: 11px; right: 0; } header nav > ul > li.active:after { content: ""; width: 18px; height: 18px; position: absolute; background: url(images/icon_minus.svg) 0 0 no-repeat; top: 11px; right: 0; } header input[type="checkbox"]:checked ~ .header-sec { transform: translateX(0); } header input[type=checkbox] { transition: all 0.3s; box-sizing: border-box; display: none; } header .sidebarIconToggle { transition: all 0.3s; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 22px; right: 15px; height: 22px; width: 22px; } header .spinner { transition: all 0.3s; box-sizing: border-box; position: absolute; height: 2px; width: 100%; background-color: #000; } header .horizontal { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 5px; } header .diagonal.part-1 { position: relative; transition: all 0.3s; box-sizing: border-box; float: left; } header .diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 5px; } header input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal { transition: all 0.3s; box-sizing: border-box; opacity: 0; } header input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 { transition: all 0.3s; box-sizing: border-box; transform: rotate(135deg); margin-top: 8px; } header input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; transform: rotate(-135deg); margin-top: -9px; } }
■js
jQuery(document).ready(function($){ // アコーディオンメニュー var opener = close;//flagでクリックしたときのアコーディオンの開くまでの時間を調節 //ウィンドウサイズ640px以下の時の動作 $('nav>ul>li>a').on('click',function(){ var winWidth = $(window).width(); if(winWidth < 700){//ウィンドウサイズ640px以上なら if($(this).hasClass('open')){//クリックした要素がopenクラスを持っているなら $(this).removeClass('open'); $(this).next('ul').slideUp(); opener = close; } else{//クリックした要素がopenクラスを持っていないなら var timer;//アコーディオンが開くまでの遅延時間 console.log(opener); if(opener !== close){ timer = 500; }else{ timer = 0; } $('.open').removeClass('open'); $('nav>ul>li>a').next('ul').slideUp(); var self =this; setTimeout(function(){ $(self).addClass('open'); $(self).next('ul').slideDown(); },timer); opener = open; } event.preventDefault(); }else{//ウィンドウサイズ640px以下なら return false; } }); //ウィンドウサイズ640px以上の時の動作 $('nav>ul>li').on('mouseover',function(){//マウスをのせたとき var winWidth = $(window).width(); if(winWidth > 700){//ウィンドウサイズ640px以上なら if(!$(this).children('a').hasClass('open')){ $(this).children('a').addClass('open'); $(this).children('ul').stop().slideDown(); } }else{//ウィンドウサイズ640px以下なら return false; } }).on('mouseout',function(){ var winWidth = $(window).width(); if(winWidth > 700){//ウィンドウサイズ640px以上なら $(this).children('a').removeClass('open'); $(this).children('ul').stop().slideUp(); }else{//ウィンドウサイズ640px以下なら return false; } }); $('nav>ul>li').on('click',function(){ var winWidth = $(window).width(); if(winWidth < 700){//ウィンドウサイズ640px以下なら $(this).toggleClass("active"); }else{//ウィンドウサイズ640px以上なら return false; } }); });
回答1件
あなたの回答
tips
プレビュー