質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

518閲覧

アニメーションを使ったサブメニューの表示の仕方

tetsuo0125

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/06 11:36

編集2020/11/07 05:55

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
ホームページを作っています。

メニューに画像とボックスを使ったメニューを作りたいと思っています。

参考にしているホームページがあるのですが、同じようにソースを書いていますが、

サブメニューに使用しているアニメーションの表示の仕方がわかりません。

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で開発しています。

参考にしたいページのメニュー
リンク内容

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/11/07 03:01

提示されたソースが冗長でどの部分を聞きたいかわかりません もっとピンポイントなソースに絞ったほうが良いかもしれません
tetsuo0125

2020/11/07 05:56

アドバイスありがとうございます。具体的な方法を記載させて頂きました。
guest

回答1

0

typoです。

$('.gNav_list > li > a.-hasChild')$('.gNav_list > li > a.-haschild')

投稿2020/12/01 02:31

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問