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

ナビゲーションバーの紹介と学習のポイント

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ナビゲーションバーの実装が完了した完成版のファイルを確認しながら、ナビゲーションバーとはどういったものなのか、そして、それを製作していくにあたっての学習のポイントを確認していきます。
講師:
03:12

字幕

このレッスンではこれから JavaScript と jQuery を使ってナビゲーションバーを実装していくにあたり、実際にこのコースで作成していくナビゲーションバーの完成版を見ながら、ナビゲーションバーとはどういったものなのかと、そして今後のレッスンで学んでいく学習のポイントを確認しておきます。ナビゲーションバーとは普段私達はインターネット上でウェブサイトを見てる際にもよく見かける物で、ウェブサイトの上部においてあることが多います。言葉で説明するより、実際に見て頂いた方が分かり易いかも知りませんので、ここではそのナビゲーションバーをこれから私達がこのコースで製作していく完成版で確認してみたいと思います。今、こちらの画面に移っているのはその完成版となります。このように紺色の部分のメニューをクリックすると、その下にそれに応じた水色のメニューが表示されてきますね。これがナビゲーションバーです。これからこのナビゲーションバーを実際に自分達で学習しながら製作していくわけですが、ここではいくつかの学習のポイントについて確認しておきたいと思います。まずはナビゲーションバーの構成です。紺色のバーの部分をトップメニュー部分、そしてスライドして表示されてくる、この水色の部分を「スライドメニュー部分」と呼ぶことにして、それらを HTML と CSS でどのように構築するか、まずはこれが1点目のポイントです。 そして2点目のポイントはクリックしたトップメニューに応じたスライドメニューを表示させる方法。このように「メニューA」「メニューB」、それぞれのに応じたメニューが表示されていますね。この表示させる方法についてが第2のポイントとなります。3つ目のポイントはトップメニューの選択状態、要するに、こちらのスライドの開閉状態に応じた処理の分岐、例えば、今「メニューC」のスライドメニューが表示されていますが、この状態で「メニューD」をクリックすると、「メニューC」は閉じますね。そして、更にこの状態で「メニューD」をクリックすると、「メニューD」のこちらのスライドメニューが非表示になりましたね。こういった形で、クリックしたトップメニューが既に「選択されている」か、そうではないのかによって、処理を分岐させる方法が3つ目のポイントとなります。そして、4つ目のポイントは表示させたスライドメニューをこのように非表示にする方法ですね。これが4つ目のポイントとなります。以上の点が、このコースの主な学習のポイントとなりますので、しっかりと頭に留めておきましょう。これらの点について、HTML CSS JavaScript の3つの観点から解説をしていきます。 以上でレッスンは終了です。今回はこれから製作していくナビゲーションバーの確認と、以降のレッスンにおける学習のポイントについて確認致しました。

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

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

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

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

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

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