Web

【jQuery】ナビの範囲外をクリックしてナビを閉じる方法

Webサイトのナビやメニュー用のプラグインが多く出回ってますが、

それを使わずにわずか数行のコードで超軽量ナビを実装する方法を教えたいと思います。

 

ちなみにかなり簡易版なのでカスタムは結構自由にできると思います。

 

超簡単に実装

まずはデモを用意しました。
※すみませんスマホで見るとWordPressの影響でカクつきます

 

今回は以下を条件にしました。

  1. スライドアニメーションがある
  2. 開閉ボタンのカスタマイズが自由
  3. ナビが開いているときに「閉じる」だけではなく範囲外の部分をクリックしても閉じる

 

HTML

まずHTMLコードは以下です。

 

今回はボタン部分をdivタグで作成していますが、

これはbuttonタグでもpタグでもなんでもお好きなタグに変更していただいて大丈夫です。

 

CSS

CSSについてはほぼ自由です。

ただ、以下だけは必ず指定してください。
※指定しないと初回アクセス時にいきなり開いた状態になります。

それ以外は基本自由なので自分のサイトに合うタグやスタイルを適用してください。

 

jQuery

まずはjQueryの読み込みをしましょう。

 

では本題のソースコードの解説をしていきます。

1行目から5行目でナビを開く処理をしています。

7行目から11行目まででナビを閉じる処理をしています。

 

実際はこの11行目まででも動きます。

が、冒頭で設けた条件の3つ目に

「ナビが開いているときにナビの範囲外の部分をクリックしても閉じる」

という条件を設けていたので、

13行目からのコードでそれを実装しています。

 

ナビが表示されているときに、

ナビ範囲内の「閉じる」以外を押してナビが閉じてしまうのは避けたいので

if文を使い、

「ナビ範囲内のクリック」であれば閉じないが「ナビ範囲外のクリック」であれば閉じる

と指定しています。

 

おまけ

ちなみに今の状態だと高速でボタンを連打しまくると、

押すのをやめてからも押した分開閉を続けてしまいます。

なのでjQueryの1行目から5行目を以下に変更しましょう。

これに変更することで連打を止めるとすぐ止まってくれます。

 


これを使えば超軽量でプラグインを使用せずにナビを実装できます。

 

※注意!

jQueryの該当のソースコードはナビのHTMLよりも下に記述してください!
じゃないと動きません!

ピックアップ記事

  1. 新しいことへのあと一歩の勇気が出ない人へ「勇気はあとからついてくる。」
  2. Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法
  3. 目標がない人はやりたいことリスト100をやってみよう

関連記事

  1. Web

    非同期(Ajax)でPHPの関数を実行させサーバーにフォルダとファイルを作成する

    最近PHPを勉強し始めたので備忘録がてら書きます。今回は、H…

  2. Web

    【ace.js】エディタを複数表示させる方法

    ブラウザ内でコードを書くならそれ用のエディタを使うわけなんですが、…

  3. Web

    Googleform埋め込みでラジオボタンのデータを送信する方法

    Web制作している人間なら誰しもフォームでつまづくと思います。(つまづ…

  4. Web

    Googleform埋め込みで回答完了画面に遷移させない方法

    前回の記事でGoogleformからnameを取得するところまでを説明…

  5. Web

    【Brackets】コーダーオススメのエディタはブラケッツ一択!

    みなさんエディタは何を使っていますか?そもそもエディタとは、端…

  6. Web

    コピペするだけ!Web初心者でも簡単に作成できるフォーム作成ツール

    今回はformrunというツールの紹介をしたいと思います。fo…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Web

    Googleform埋め込みでラジオボタンのデータを送信する方法
  2. Other

    資格・免許は話のネタになる。資格を取るメリットとオススメの資格は?
  3. Web

    ランサーズで稼げるの?副業初めての会社員が1ヶ月試した結果
  4. Web

    Surface Lapotopのキーボード素材、アルカンターラとは?
  5. Diary

    【Surface Lapotop】をサブ機に!
PAGE TOP