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

各トップメニューに応じたスライドメニューの表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クリックされたトップメニュー部分に応じたスライドメニューを表示する方法について解説致します。
講師:
05:45

字幕

このレッスンではJavaScript と jQuery を使ってナビゲーションバーを実装するにあたり、トップメニュー部分をクリックした際に、実際にそれに応じたスライドメニューを表示する方法について解説致します。まずは、ダウンロードしてきたこちらの show_slide というフォルダの中に入っている、これら3つのファイルをエディタで開いてください。そしてこれが、それらのファイルを開いた状態です。これらのファイルを使って、今回のレッスンを進めていきたいと思います。それでは早速、レッスンを始めていきましょう。まずは、今回表示させるスライドメニューをHTML ソース上で確認しておきましょう。HTML ソース上で見ると、この部分になりますね。ul class="slidemenu" の部分です。この ul class="slidemenu" ですが、こちらの span class="topmenu"のすぐ隣、すぐ下にあることを確認しておいてください。これを踏まえた上で、JavaScript を書いていきたいと思います。それでは javascript.js を開いてください。今 javascript.js はこの様な形になっています。 それでは早速、書いていってみましょう。まずは、こちらの alert の部分を削除します。そして、まずはここでスライドメニューの要素、先程の ul class="slidemenu" ですね。あの要素を変数に格納してあげます。では実際に書いていくと、この様になります。まずは変数の定義ですね、 varそして変数の名前、ここではslideMenu としておきましょう。そして = $()このかっこの中に this と打ちます。そして .next と書きます。そして ();そして、この next のかっこの中に、この様に書きます。ul.slidemenu と書いておきましょう。この様に書くことで、まずこの $(this) ですが、span class "topmenu" のクリックされたそのものを表して、そして、その次の next というのはその span class "topmenu" のすぐ隣、すぐ下にある要素を取得するという意味になります。そして、この next の引数の中、ここにはその取得したい要素のセレクターを書いておいてあげます。この様に書くことで、span class "topmenu" のすぐ隣、すぐ下にある「ul.slidemenu の要素を取得しろ」という意味合いになります。 そして、取得した要素はこの変数 slideMenu に格納されていく訳ですね。それでは、この slideMenu を実際に表示させてあげましょう。表示させる為には、この様に書きます。まずは変数 slideMenu.そして slideDownそして ();そして、このかっこの中に 'fast' と書いおいてあげましょう。この様に書くことで、先程この slideMenu に格納したul.slidemenu ですね。こちらの要素を slideDown してこいという意味になります。そして、この slideDown の引数に書かれている 'fast' はスピードを早めに slideDown してこいといった意味になります。ちなみに、この slideDown の引数の所には数値を入れることも可能です。数値を入れる場合はミリ秒単位の指定になります。要するに、この slideDown の引数の部分にはその slideDown してくるスピードを入れる形になるわけですね。ちなみに、この fast というのはミリ秒に換算すると、200 ミリ秒という形でjQuery 側で定義されています。それではこの状態で、この javascript.js を保存してこの index.html をブラウザで開いてみましょう。 こちらのファイルをブラウザで開きます。すると、この様な画面になりましたね。それでは早速クリックをしてみましょう。トップメニュー部分をクリックすると、この様に、スライドメニューがスライドダウンして表示されてきましたね。他のトップメニュー部分はどうでしょう。同様に、この様に表示されてきますね。それではエディタに戻ります。以上でレッスンは終了です。今回は JavaScript と jQuery を使ってナビゲーションバーを実装するにあたり、トップメニューをクリックした際に、それに応じたスライドメニューを表示する方法について解説致しました。以降のレッスンでは、クリックされたトップメニューの選択状態を設定、またはその状態を取得して、その内容に応じて処理を分岐させる方法について解説していきますので、そちらも合わせてご覧ください。

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

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

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

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

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

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