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

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

ただいまの
回答率

90.40%

  • jQuery

    8539questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

(jQuery)ハンバーガーメニューとナビ表示の挙動について

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 172

atsu_kita

score 2

 前提・実現したいこと

こんにちわ!
現在ポートフォリオに載せるためのサイト(架空・シングルページ・マルチデバイス対応)
を制作しております。

只今スマホとタブレットの際表示されるハンバーガーメニュー実装中で、
自身なりに色々検証、情報収集しある程度形には出来たのですが、
ハンバーガーメニュー以外の部分をクリック(タップ)した際メニューとナビを閉じる記述を導入後、
その動作の目的自体は達成できたのですが、
今度はハンバーガーメニュー自体を押した際メニュー表示の切り替えが行われずスマホのナビも閉じなくなりました。

●実現したいこと

・ハンバーガーメニュー開表示時(x)にそれ以外の部分をクリック(タップ)した場合,
メニュー閉表示時(三)→メニュー初期状態に戻した上でスマホのナビ部分も閉じたい。

現在達成済み

・ハンバーガーメニュー開表示時(x)にそれ自体をクリック(タップ)した場合も、
メニュー閉表示時(三)→メニュー初期状態にした状態でスマホのナビ部分も閉じたい。

現在解決していない問題

jQueryは学校で触れた程度で初心者です。
どなたかご教授頂けると幸いです。

下記にサイトのアドレスを記載させていただいたので、
もしgoogleの検証等で確認していただける方がいらっしゃればご意見いただけると幸いです。
もし確認していただける方がいらっしゃればお手数ですがベーシック認証を行っているので下記のidとpasswordも入力していただけるとアクセス可能です。

・サイトアドレス
http://artoss.html.xdomain.jp/

・ベーシック認証
id...portfolioak
password...artosssite

 該当のソースコード

//ハンバーガーメニュー設定
    //サイト表示時spナビ非表示
    //$("header .sp_nav.close").hide();
    //「#sp_menu a」をクリックした時
    $("#sp_menu a").click(function(){    
            //「#sp_menu a」にactiveクラスを付けたり取ったりする
            //0.3秒でナビの開閉
            $("header .sp_nav").slideToggle(300);
            //ハンバーガーメニューのonoff
            $(this).toggleClass("active");
            //「header nav.sp_nav」にmenu_clickを付けたり取ったりする
            $("header .sp_nav").removeClass("close");
            $("header .sp_nav").toggleClass("open");            
            //aタグの機能を停止
            return false;
        });

    //sp及びタブレットメニュー開示時、
    //メニュー以外の部分をクリックやタップした場合、メニューを閉じる指定。
    $(document).on('click touchstart', function(event) {
    if (!$.contains($(".sp_nav")[0], event.target)) {
        //#sp_menu aから.activeを取り除く。
        $("#sp_menu a").removeClass("active");
        //.sp_navもフェードアウトしながら消滅。
        $(".sp_nav").fadeOut();
            }
        });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

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

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

同じタグがついた質問を見る

  • jQuery

    8539questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。