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. 目標がない人はやりたいことリスト100をやってみよう
  3. Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

関連記事

  1. Web

    ディスプレイポートとは?HDMIと比較・メリット紹介!

    今まで自宅の環境ではHDMIかVGAを使用していたのでDisp…

  2. Diary

    ポートフォリオサイト作成しました。

    わざわざ大々的に言う必要もないんですが、PORTFOLIO(ポートフ…

  3. Web

    Excelの代わりに無料で使えるオンラインアプリケーション!

    PCにExcelが入っていないけど買いたくない…たまに、「…

  4. Web

    Web業界用語。ガチ初心者は覚えた方がいい推奨用語

    こんにちはコーディングにとりつかれたつかぽんです。以前Webに…

  5. Web

    画像1枚なおしただけでAdSense審査に通過した話

    こんにちは~AdSense審査でことごとく落とされていたのに1…

  6. Web

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

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

コメント

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

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

最近の記事

  1. Web

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

    Happy Birthday「俺」!!
  3. Web

    自分のITリテラシーのレベル把握してる?リテラシーレベル表
  4. Web

    Excelの代わりに無料で使えるオンラインアプリケーション!
  5. Web

    USBにデータ保存は危険?データが消えるので注意!
PAGE TOP