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

選択状態に応じた処理の実装とスライドメニューの非表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クリックされたトップメニューの選択状態に応じた処理の分岐と、表示したスライドメニューを非表示にする方法について、解説致します。
講師:
09:09

字幕

このレッスンではJavaScript と jQuery を使ってナビゲーションバーを実装するにあたり、クリックされたトップメニューの選択状態に応じた処理の分岐と表示したスライドメニューを非表示にする方法について解説していきます。まずは、ダウンロードしてきたこちらの hide_slide という名前のフォルダの中にある、これら3つのファイルをエディタで開いてください。そして、これがそれらのファイルを開いた状態です。これらのファイルを使いながら、今回のレッスンの解説を進めてきたいと思います。それでは早速、レッスンを始めていきましょう。それでは、まず開いたファイルの内javascript.js 、こちらのファイルをエディタで開きます。そして、今回トップメニューのクリックの選択状態における処理の分岐ですが、前回のレッスンで書いた、こちらの if 文の中に書いていきます。それではまず、まだ selected がついていない非選択状態、つまりは、スライドメニューがまだ表示されていないトップメニューをクリックした場合の処理について書いていきたいと思います。それは、こちらの else の後の波かっこの間に書いていきます。 こちらの else の中で書いていく事ですが、大きく分けて4つあります。まずは、全てのトップメニューについているclass selected をとる処理を書きます。そして、その後にクリックされた要素のトップメニューにだけ、class selected をつけます。その後に、他の表示されているスライドメニューを全て閉じます。最後に、クリックされたトップメニューのスライドメニューだけを表示させるプログラムを書きます。それではその手順に従って、プログラムを実際に書いてみたいと思います。まずは、全てのトップメニューからclass selected を取り除いてしまいます。それは、この様に書いていきます。$(' ') そしてこの中に、nav#navigationそして、半角スペースと spanそして .topmenu と書きます。そして、この後に .そして、この後に removeClassそして ();そして、この removeClass の中に取り除きたい class を書きます。今回は selected ですね。この様に書くことで、こちらのクラス .topmenu がついたspan 要素からこちらの class selected を取り除くという命令になります。 そしてこの後に2番目の処理、クリックされたトップメニューの要素にだけclass selected を追加してあげます。それは、この様に書きます。$(this) ですね。そして .addClassそして ();そして、この addClass の括弧の中にselected と書いてあげます。こうすることによって、このクリックされた class トップメニューのspan 要素そのものに対してのみ、こちらの selected という class を追加してあげることができます。そして、この後に3番目の手順。既に表示されてしまっている、他のスライドメニューを全て閉じてあげましょう。それは、この様に書きます。$() の、この中にnav#navigation半角スペースでul.slidemenu と書いてあげます。そして .slideUp の();そして、この slideUp の括弧の中に'fast' と書いてあげましょう。こうすることによって、既に開いている他のスライドメニューを閉じる、slideDown の逆、slideUp で上に閉じていくといった処理を書くことができました。そして、そのスピードは「速く」といった感じですね。 そして、最後にクリックされたトップメニューのスライドメニューだけを表示させるプログラムを書いてあげます。それは、既にこちらの下で書いていますね。ですので、こちらをそのまま切り取ってここに貼り付けてあげましょう。そしてこの部分はもう不要ですね。これで非選択状態のトップメニューをクリックした時の処理が完成しました。それでは次に、既に選択状態のトップメニューをクリックした時の処理をこちらの波かっこの間に書いていきます。ここでの手順は2つです。まずは、全てのスライドメニューを非表示にします。そして class selected が既についているので、それを取り除いてあげます。それでは、書いて見ます。まずは、全ての表示されているスライドメニューを閉じます。slideMenu こちらは変数ですね。こちらの部分で、全てのスライドメニューの要素を格納しています。こちらの slideMenu の後にドット。そして、先程と同じ様に slideUp();そして、この中にスピードとしてfast と書いてあげます。これで全てのスライドメニュー要素が非表示になりました。そして最後に、全てのトップメニューについているclass selected を取り除いてあげます。 これは、この様に書いていきます。$() この中に、nav#navigationこの後に半角スペースで、span.topmenuそしてこの後にドット、そして removeClass();そして、この中に取り除きたい class の名前を書きます。ここでは selected でしたね。これで、既に選択状態のトップメニューをクリックした時の処理の実装が完了しました。それでは、この状態で javascript.js を保存してあげましょう。そして index.html をブラウザで開いて動作の確認をしてみましょう。こちらの index.html を開きます。すると、このように表示されてきましたね。それでは、トップメニュー部分をクリックしてみたいと思います。まずは「メニューA」、この様に表示されてきましたね。そして「メニューB」を押すと、「メニューA」の下のスライドメニューが消えて、「メニューB」だけが表示されてきましたね。そして「メニューC」、こちらも同様ですね。そして、「E」を押してみても同じですね。「メニューC」のスライドメニューが消えました。例えば、ここで同じ様に「メニューE」を押すと、この様に、「メニューE」のスライドメニューも非表示にりましたね。 これで JavaScript と jQuery を使ったナビゲーションバーの実装が完了しました。それではエディタに戻ります。以上でレッスンは終了です。今回は JavaScript と jQuery を使ってナビゲーションバーを実装するにあたり、クリックされたトップメニューの選択状態に応じた処理の分岐と表示したスライドメニューを非表示にする方法について解説致しました。今回のレッスンでもってJavaScript と jQuery を使ったナビゲーションバーの制作は完了となります。このコースでナビゲーションバーの実装の基礎を習得しておけば、それを応用して様々な形のナビゲーションバーを作れる様になりますのでしっかりとマスターしておきましょう。

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

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

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

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

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

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