前提・実現したいこと
ここに質問の内容を詳しく書いてください。
ホームページを作っています。
メニューに画像とボックスを使ったメニューを作りたいと思っています。
参考にしているホームページがあるのですが、同じようにソースを書いていますが、
サブメニューに使用しているアニメーションの表示の仕方がわかりません。
phpソースの<a href="<?php echo esc_url( home_url( '/' ) ); ?>lesson" class="-haschild">
で指定しているclassの"-haschild"を
javascriptで$('.gNav_list > li > a.-hasChild').hover(function () {
if ($(window).outerWidth(true) > 999) {
$(this).addClass('isHover');
}
クラス追加をしたいのですが、jsが機能していません。(クラス追加がされない。)
jsファイルはフッタータグの下で読み込みしています。
アドバイス頂けたら幸いです。
発生している問題・エラーメッセージ
サブメニューが表示されません。
該当のソースコード
php
<nav id="js-gNav" class="gNav">
<div id="js-gNav_inner" class="gNav_inner u-inner">
<ul class="gNav_list"> <li> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class=""> <div class="gNav_list_image"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/img-nav02.svg" width="184" height="150" alt=""></div><b>HOME</b></a> </li> <li> <a href="<?php echo esc_url( home_url( '/' ) ); ?>lesson" class="-haschild"> <div class="gNav_list_image"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/img-nav01.svg" width="184" height="150" alt=""></div><b>メニュー</b></a> <nav class="gMegaMenu gMegaMenu-no2"> <div class="gMegaMenu_inner u-inner"> <ul class="gMegaMenu_list gMegaMenu_list-2c"> <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>lesson" class=""><img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/img-nav01.svg"" alt=""><b>講座</b></a></li> <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>counseling" class=""><img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/img-nav01.svg"" alt=""><b>カウンセリング</b></a></li> </ul> </div> </nav> </li>
js
/global window,$/
$(function () {
'use strict';
var isFlag = {};
$('.gNav_list > li > a.-hasChild').hover(function () { if ($(window).outerWidth(true) > 999) { $(this).addClass('isHover'); } }, function () { if ($(window).outerWidth(true) > 999) { $(this).removeClass('isHover'); } }); $('.gMegaMenu').hover(function () { if ($(window).outerWidth(true) > 999) { $(this).prev().addClass('isHover'); } }, function () { if ($(window).outerWidth(true) > 999) { $(this).prev().removeClass('isHover'); } }); $('.gNav_list > li > a.-hasChild').click(function () { if ($(window).outerWidth(true) < 1000) { $('.gNav_list > li > a.-hasChild').not($(this)).removeClass('isShow'); $(this).toggleClass('isShow'); return false; } }); $('.gSearch_btn').click(function () { $(this).toggleClass('isShow'); $('.gSearch_inputWrap').toggleClass('isShow'); if ($(this).hasClass('isShow')) { $('#js-gMenuBtn').removeClass('isShow'); $('#js-gNav').removeClass('isShow'); } return false; }); //scrollEvent isFlag.scroll = false; function eventScroll($window) { if (isFlag.scroll) { return false; } isFlag.scroll = true; window.requestAnimationFrame(function () { //pageTop Show if ($window.scrollTop() > 100) { $('#js-gHeaderWrap').addClass('isFixed'); } else { $('#js-gHeaderWrap').removeClass('isFixed'); } isFlag.scroll = false; }); } $(window).scroll(function () { eventScroll($(this)); }); eventScroll($(window)); //SmartPhoneNavi menu clickEvent $('#js-gMenuBtn').click(function () { $(this).toggleClass('isShow'); $('#js-gNav').toggleClass('isShow'); if ($(this).hasClass('isShow')) { $('.gSearch_btn').removeClass('isShow'); $('.gSearch_inputWrap').removeClass('isShow'); } return false; }); $('.gNav_closeBtn').click(function () { $('#js-gMenuBtn').toggleClass('isShow'); $('#js-gNav').toggleClass('isShow'); return false; }); //link within a page clickEvent $('a[href*="#"]').click(function () { var $obj = $($(this).prop('hash')); if (window.location.pathname === $(this).prop('pathname')) { if ($obj.length > 0) { $('.gMegaMenu').removeClass('isShow'); $('#js-gMenuBtn').removeClass('isShow'); $('#js-gNav').removeClass('isShow'); $('.gNav_list > li > a.-hasChild').removeClass('isHover'); $('.gNav_list > li > a.-hasChild').removeClass('isShow'); $('body,html').animate({ scrollTop: $obj.offset().top }, 700); return false; } } });
});
css
.gNav_list {
list-style: none;
display: flex;
justify-content: center;
}
.gNav_list::after {
display: none;
}
.gNav_list > li {
float: none;
overflow:hidden;
float: left;
}
.gNav_list > li:first-child {}
.gNav_list > li:last-child {}
.gNav_list > li:nth-child(2n + 1) {}
.gNav_list > li:nth-child(n + 3) {}
.gNav_list > li > a {
display: flex;
text-decoration: none;
color: inherit;
height: 134px;
flex-direction: column;
justify-content: center;
align-items: center;
transition-duration: 0.5s, .3s;
transition-property: height, color;
padding: 0 28px;
position: relative;
z-index: 1;
box-sizing: border-box;
text-indent: 0;
background: none;
width: auto;
opacity: 1;
}
.isFixed .gNav_list > li > a {
height: 50px;
}
.gNav_list > li > a > b {
display: block;
font-size: 14px;
font-weight: 500;
text-align: center;
position: relative;
z-index: 1;
padding: 5px 0;
}
.gNav_list > li > a > b::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #000;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
transition-duration: .3s;
transition-property: transform;
transform: scale(0, 1);
}
.gNav_list > li > a::before {
content: "";
}
.gNav_list > li > a::after {
content: "";
border: 8px solid rgba(255, 255, 255, 0);
border-bottom-color: #F8F4EC;
border-top-width: 0;
border-bottom-width: 16px;
display: block;
position: absolute;
z-index: 1;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition-duration: .3s;
transition-property: opacity;
}
.gNav_list > li > a.-no2::after {
border-bottom-color: #ECF0EA;
}
.gNav_list_image {
max-width: 81px;
transition-duration: .5s;
transition-property: height;
height: 66px;
position: relative;
z-index: 0;
overflow: hidden;
}
.isFixed .gNav_list_image {
height: 0;
}
.gNav_list_image > img {
display: block;
width: 81px;
height: 66px;
transition-duration: .3s;
transition-property: transform, height;
}
環境
sakuraサーバー
wordpressで開発しています。
参考にしたいページのメニュー
リンク内容