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

スライドメニュー部分のHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スライドメニュー部分のHTMLコーディングの方法について解説致します。
講師:
04:07

字幕

このレッスンではJavaScript と jQuery を使ってナビゲーションバーを実装していくにあたり、スライドメニュー部分のHTML コーディング方法について解説致します。まずは、ダウンロードしてきたこちらの slidemenu_html というフォルダの中にあるこれら3つのファイルをエディタで開いてください。そして、これがそれらのファイルを開いた状態です。これらのファイルを使いながら、今回のレッスンの解説を進めてきたいと思います。それでは早速、このレッスンを始めていきましょう。ここでいうスライドメニュー部分ですが、ナビゲーションバーのトップメニュー、こちらの部分ですね。これをクリックした時に、下にスライドして表示してくるサブメニューのことを指します。それではこのスライドメニュー部分のコーディングを実際に書いていってみたいと思います。スライドメニュー部分をコーディングしていく場所はこちらのトップメニューの span の下になります。なので、このように改行がきて、この部分に書いていきます。まずは ul タグを使ってリストを作っていきます。タグ、そしてこの中に li 要素を書きます。ですね。 そして、一般的にこの部分がリンクとなりますので、この li タグの中に a タグを入れておきましょう。a タグには href 属性も必要ですね。そして とします。そしてこの中にそのメニューのテキストを書いていきます。ここではサンプルとして、「サブメニューA1」としておきましょうか。通常、この「サブメニュー」は複数あることが多いので、この部分をコピーして、そしてその下にいくつかペーストしておきましょう。そして、この「A1」と書いている部分をこのように適宜書いていきます。後はこちらのスライドメニューの ul 。このタグの中に目印となる class を入れておきます。class=""そしてダブルクオテーションの中ではslidemenu と書いておきましょうか。以上で、スライドメニュー部分のコーディングは完了です。後は、このスライドメニュー部分をこのトップメニューの数だけ作っていきます。この部分の ul をコピーして、そのまま「メニューB」の下に貼り付けます。そしてこの「C」の下にも貼り付けて「D」の下にも貼り付けます。そして「E」の下にも貼り付けておきます。それぞれのトップメニューの下に付けたこれらのサブメニューに対しても、適宜、こちらのサブメニューの「A」と書かれている所、分かり易く「B」と書いておきましょう。 後の「C」や「D」や「E」はこのレッスンでは省略しますが、適宜変更しておいてください。それでは一度この状態でindex.html を保存します。保存の為のキーボードショートカットはMac ですとCommand と S の同時押し、Windows ですとCtrl と S の同時押しでしたね。それでは保存します。そしてこの index.html をブラウザで開いてみたいと思います。すると、このように表示されてきましたね。それではエディタに戻ります。以上でレッスンは終了です。今回はナビゲーションバーのスライドメニュー部分のHTML コーディングの方法について解説致しました。以降のレッスンではこれまで製作してきたトップメニュー部分とスライドメニュー部分の HTML 部分にスタイルシートを当てて、デザインを調整していく方法について解説していきますので、そちらも合わせてご覧ください。

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

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

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

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

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

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