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

トップメニュー部分のHTMLコーディング

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

ぜひご覧ください。

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

字幕

このレッスンではJavaScript と jQuery を使ってナビゲーションバーを実装していくにあたり、トップメニュー部分のHTML コーディング方法について解説致します。まずはダウンロードしてきた、こちらの topmenu_html 、こちらのフォルダの中に入っている、これら3つのファイルをエディタで開いてください。そして、これがそれらのファイルを開いた状態です。これらのファイルを利用しながら、今回のレッスンの解説を進めていきたいと思います。それでは早速、レッスンを始めていきましょう。まずは、今開いたこちらのファイルの現状を確認しておきましょう。まず、こちらの index.html はこれからナビゲーションバーをコーディングしていくにあたり、必要最低限な HTML のフォーマットが記述されている状態になっています。そしてこちらの javascript.js とstylesheet.css 、こちらの方にはまだなにも記載はありません。それでは index.html に戻って、こちらの body タグの間に今回のトップメニュー部分の HTMLコーディングを行っていきたいと思います。ここで言うトップメニュー部分というのはナビゲーションバーの初期状態で表示されている、バーそのものの部分のことを指します。 そのバーの中にいくつかクリックできるメニュー部分を作っていくわけですね。それでは早速 HTML コーディングの方をやっていきたいと思います。まずはこちらの body タグの間にHTML5 で新しく登場した、ナビゲーションタグを書きます。このように と書いてと書きます。そしてこの間に、数行改行を入れます。そしてこの中に ul タグでリストを作っていきます。そして と書いて、この中にリストの li ですね。と と書きます。そして、この中でメニューの中に表示する文字列を記述しておきます。まずはこれを span で囲っておきましょう。そしてこの中に、ここでは「メニューA」としておきます。そして、この span に目印となる class をつけておきましょう。ここでは class="" のここにtopmenu と書いておきます。これで、この から閉じるまでが1つのメニューボタンになりました。今回はこれを5つ製作したいので、これをコピーします。そして、この下に後4つですね、貼り付けていきましょう。これで5つのメニューボタンが完成しました。後はこちらの文言ですね。今全て「メニューA」になっているので、順番に書いていきましょう。 まずここは「メニューB」、そしてここは「メニューC」。そして、ここは「メニューD」で最後は「メニューE」ですね。そして、後はこちらのナビゲーションタグですね。こちらにも目印となる ID をつけておきましょう。id=""そしてこの中に、今回はnavigation と入れておきます。以上でナビゲーションバーのトップメニュー部分のHTML コーディングが完了致しました。それではこの状態でファイルを保存します。ファイルの保存のキーボードショートカットはMac でしたらCommand+S の同時押し、Windows でしたらCtrl+S の同時押しでしたね。それでは保存します。そして、一度この状態でindex.html をブラウザで開いてみましょう。今回、確認に利用するブラウザはChrome ブラウザを利用します。それでは、こちらの index.html をブラウザで開きます。すると、このような形で表示されてきましたね。それではエディタに戻ります。以上でレッスンは終了です。今回はナビゲーションバーのトップメニュー部分のHTML コーディングの方法について解説致しました。以降のレッスンではスライドメニュー部分のHTML コーディングの方法についても解説していきますので、そちらも合わせてご覧ください。

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

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

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

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

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

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