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

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

ただいまの
回答率

89.13%

Jquery メニューのページ内リンクをクリックで閉じるようにしたい。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 627

fitzy

score 11

 前提・実現したいこと

スマホ画面にてハンバーガーメニューのページ内リンクをクリックしてスクロールした際ににオープンしているハンバーガーメニューを閉じるようにしたいです。
Jqueryで実装してあります。
必要な場合はhtmlとcssも記載致します、当方jqueryについてわからない事が多く困っております、皆様のご回答おまちしております、宜しくお願い致します。

 下記がコードになります。

    var
      winW = $(window).width(),
        winH = $(window).height(),
        nav = $('#mainnav ul a'),
        curPos = $(this).scrollTop();

    if (winW > 800){
        var headerH =0;
    }
    else{
        var headerH =70;
    }

    $(nav).on('click', function(){
      var $el = $(this),
        id = $el.attr('href');
         $('html, body').animate({
           scrollTop: $(id).offset().top - headerH
         }, 500);
        if (winW < 890){
            $('#menuWrap').next().slideToggle();
            $('#menuBtn' ).removeClass('close');
        }
         return false;
    });

    $('.panel').hide();
    $('#menuWrap').toggle(function(){
        $(this).next().slideToggle();
        $('#menuBtn').toggleClass('close');
    },
    function(){
        $(this).next().slideToggle();
        $('#menuBtn').removeClass('close');
    });

html

    <div class="inner">
        <div id="headerWrap">
            <h1><a href="#" alt="#" title="#" rel="home"><img src="#" alt="#"></a></h1>
            <nav id="mainnav">
                <p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p>
                <div class="panel"><ul><li id="menu-item-665" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="https://####/#feature"><strong>メニュー</strong></a></li>
<li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://#/store/"><strong>メニュー</strong></a></li>
<li id="menu-item-463" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://#/equipment/"><strong>メニュー</strong></a></li>
<li id="menu-item-583" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://#/contact/"><strong>メニュー</strong></a></li>
<li id="menu-item-549" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="#"><strong><i class="fab fa-facebook-square"></i> Facebook</strong></a></li>
<li id="menu-item-550" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="#"><strong><i class="fab fa-instagram"></i> Instagram</strong></a></li>
</ul></div>
            </nav>
        </div>
    </div>
</header>

wordpressにて使用しているため関係のないID名とクラス名が増えています。

css

nav#mainnav{
position:relative;
margin-top:19px;
}

nav#mainnav ul{
display:flex;
justify-content:center;
align-items:center;
}

/*nav#mainnav ul li{
float:left;
}*/

nav#mainnav ul li a{
display:block;
height:30px;
padding:5px 20px;
line-height:30px;
font-size:100%;
color:#000000;
}

nav#mainnav ul li a span,nav#mainnav ul li a strong{
display:block;
font-size:90%;
line-height:1.7;
letter-spacing:1.2px;
    font-family:"Hiragino Kaku Gothic W7 JIS2004";
}

nav#mainnav ul li a span{
font-size:70%;
color:#35cc91;
}

nav#mainnav ul li a:hover span, nav#mainnav ul li a:hover{
color:#cdcdcd;
}

nav#mainnav ul ul{
width:160px;
border-top:0;
}

nav#mainnav ul li ul{
display: none;
}

nav#mainnav ul li:hover ul{
display: block;
position: absolute;
top:35px;
text-align:center;
z-index:500;
}

nav#mainnav ul li li{
background:#ffffff;
border-bottom:1px dotted #cdcdcd;
float: none;
width:160px;
height:40px;
line-height:40px;
margin:0;
}

nav#mainnav ul li li:last-child{
border:0;
}

nav#mainnav ul li li a{
width:100%;
height:40px;
padding:0;
line-height:40px;
font-size:95%;
text-align:center;
}

nav#mainnav ul li li a:hover{
color:#cdcdcd;
}

nav div.panel{
display:block !important;
}

a#menu{
display:none;
}

}

#headerWrap{
    display: flex;
    -webkit-display: flex;
}

#headerWrap h1{
margin-right: auto;
}

#headerWrap h1 a img {
width:150px;
height:50px;
vertical-align: middle;
}


/* iPadサイズ以下(1024px)からアコーディオンメニュー
------------------------------------------------------------*/

@media only screen and (max-width:1024px){

#header{
position:fixed;
width:100%;
z-index:500;
}

.panel ul li a strong{
color:#50504b;
}

#headerWrap{
position:relative;
width:100%;
height:70px;
background:#9dc838;
}

#header h1{
padding: 10px 0 10px 20px;
z-index:9999;
}

#header h2{
padding-top:13px;
}

#header h2 img{
max-height:18px;
width:auto !important;
}

a#menu{
display:inline-block;
position:relative;
width:40px;
height:40px;
margin:10px;
}

#menuBtn{
display:block;
position:absolute;
top:60%;
left:50%;
width:18px;
height:2px;
margin:-1px 0 0 -7px;
background:#50504b;
transition:.2s;
}

#menuBtn:before, #menuBtn:after{
display:block;
content:"";
position:absolute;
top:50%;
left:0;
width:18px;
height:2px;
background:#50504b;
transition:.3s;
}

#menuBtn:before{
margin-top:-7px;
}

#menuBtn:after{
margin-top:5px;
}

a#menu .close{
background:transparent;
}

a#menu .close:before, a#menu .close:after{
margin-top:0;
}

a#menu .close:before{
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}

a#menu .close:after{
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
}

.panel{
width:100%;
display:none;
overflow:hidden;
position:relative;
left:0;
top:0;
z-index:100;
}

#mainnav{
position:absolute;
top:0;
width:100%;
text-align:right;
z-index:500;
}

#mainnav ul{
background:#ffffff;
text-align:left;
}

#mainnav li a{
position:relative;
display:block;
padding:12px 25px;
border-bottom:1px solid #eeeeee;
color: #000000;
font-weight:bold;
}

#mainnav ul li a span{
display:none;
}

#mainnav ul li li{
border:0;
}

#mainnav ul li li a{
padding-left:40px;
}

}

.content_w{
        margin:30px 0 0 0;
    }

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • kei344

    2018/07/30 16:36

    それではわかりません。使用されているテーマは自作テーマでしょうか?それとも公開されているテーマでしょうか?後者の場合は入手先をリンクつきで質問文に追記してください。ハンバーガーメニューがそのテーマに含まれているものであればどのテーマかで使用しているライブラリがわかる可能性があります。

    キャンセル

  • fitzy

    2018/07/30 16:44

    了解いたしました、こちらのテンプレートをカスタマイズしております。https://c-tpl.com/rwp_261.php

    キャンセル

  • fitzy

    2018/07/30 16:44

    お手数ですが宜しくお願い致します。

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる