JavaScript + jQueryで作るナビゲーションバー

トップメニュー部分へのクリックイベント登録

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
トップメニュー部分にクリックイベントを登録して、クリックした時に特定の処理を実行できるようにする方法について解説致します。
講師:
06:04

字幕

このレッスンではJavaScript と jQuery を使ってナビゲーションバーを実装するにあたり、トップメニュー部分にクリックイベントを登録する方法について解説致します。まずは、ダウンロードしてきたこちらのtopmenu_event というフォルダの中のこれら3つのファイルをエディタで開いてください。そしてこれが、それらのファイルを開いた状態です。これらのファイルを使って、今回のレッスンの解説を進めていきたいと思います。それでは早速、レッスンを始めていきましょう。まず、クリックイベントということですがこれはある要素をクリックした時に、こちらから指定した処理を実行させるという意味合いのものになります。今回このクリックイベントを登録する箇所ですが、HTML ソース上でいいますと、こちらの id="navigation" が付いたnav 要素、その中にある span class="topmenu"こちらの要素ですね。こちらの要素にクリックイベントを登録していきます。それでは早速 JavaScript の方を見ていきたいと思います。javascript.js のファイルをエディタで開いきます。 今、このような内容になっているかと思います。まずは、こちらの一文を消します。そしてこの部分に、先程のspan class="topmenu" にイベントを登録していくプログラムを書いていきます。それでは早速やっていきましょう。まずはドルマーク、そして ()そしてこの中に、先程の span class="topmenu" を示すためのセレクターを書いていきます。まずはシングルクォーテーションで囲って、この中に nav#navigationそして、半角スペースをあけて、span.topmenu と書きます。この様に書くことで、ID navigation を持つ、nav 要素の中にあるclass topmenu を持つ span 要素という意味になります。そしてこの後に .on() と書いて、そしてこのかっこの中に、どういったイベントなのかを書きます。今回は click ですので、ここにシングルクォーテーションで囲って、click と書きます。そしてカンマ、その後に function() {}と書いて、そして一番最後のかっこ閉じるの後にセミコロンを打ちます。こうすることで、この class topmenu を持つspan に対してclick イベントの登録が完了しました。 では次に、クリックされた時の具体的な処理を書いていきます。その処理を書く場所はこちらの function の波括弧の間です。まずここに、数行改行を入れます。そして、この中に具体的な処理を書いていく訳ですが、まずはこの様に書いておきます。まず1行目に $(this) と打ちます。そして .blur();そして最後の行に、return false; と書いておきます。まず、こちらの(this).blur(); ですが、クリックされた時に、「移ってくるフォーカスを意図的に外す」という意味合いになります。そしてこちらの return false; はクリックされた時に発生する、「デフォルトの処理を無効化する」という意味があります。今回は span 要素になるので、基本的にはクリックしてもデフォルトでは何も発生しませんが、この様に書いておくことで、予期しない動作になることを防いでおく目的もあります。それではこちらの blur とreturn false; の間に具体的な処理を書いていきます。本来であれば、この部分にスライドを表示するプログラムを書いていくのですが、それは以降のレッスンでご紹介しますので、今回はこちらのイベント登録がしっかりと動いているかどうかを確認する為にこの様に打っておきます。 alert();そしてこの中に、「動作テストです。」と打っておきましょうか。それでは、この状態でファイルを保存します。そてし、この index.html をブラウザで開いて確認してみましょう。こちらの index.html をブラウザで開きます。すると、このような画面になりますね。それでは、こちらのメニューをクリックしていってみたいと思います。こちらをクリックすると、この様に「動作テストです。」と表示されましたね。他のものに関しても同様に、この様に表示されてきます。この様に表示されてくれば、このメインメニュー部分へのクリックイベントの登録はしっかりとできているという形になります。それではエディタに戻ります。以上でレッスンは終了です。今回は JavaScript と jQuery を使ってナビゲーションバーを実装するにあたり、トップメニューにクリックイベントを登録する方法について解説致しました。以降のレッスンでは、具体的にスライドメニューを表示させるプログラムの書き方について解説していきますので、そちらも合わせてご覧ください。

JavaScript + jQueryで作るナビゲーションバー

このコースではJavaScriptとjQueryを使ってナビゲーションバーを作成します。スライドメニュー付きのナビゲーションバーの機能をJavaScriptとjQueryを利用して実装する方法について学びます。HTMLとCSSでのコーディングの仕方、クリックイベントの登録やクリック時のスライドメニューの表示の切り替え方法などを順を追って解説します。

57分 (11 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年03月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。