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

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

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

ぜひご覧ください。

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

字幕

このレッスンではJavaScript と jQuery を使ってナビゲーションバーを実装していくにあたり、スライドメニュー部分にスタイルシートを当てて、デザインを調整する方法について解説致します。まずはダウンロードしてきた、こちらの slidemenu_css というフォルダの中にある、これら3つのファイルをエディタで開いてください。そして、これがそれらのファイルを開いた状態です。これらのファイルを使って、今回のレッスンの解説を進めていきたいと思います。それでは早速、レッスンを始めていきましょう。今回、スタイルシートを当ててデザインを調整していく箇所はHTML コードでいうと、この部分になります。この ul class="slidemenu"というところですね。それでは stylesheet.css のファイルを開きましょう。そしてこの .css ファイルの下の方を見てみますと、この「スライドメニュー部分」というコメントの下から、既に今回ご説明する CSS のコーディングが完了していることが分かりますね。今回はこの部分について幾つかのポイントを見ていきたいと思います。トップメニュー部分同様、基本的には普段通りのCSS コーディングで OK です。 その中でもいくつかのポイントをピックアップしてみると、例えば、この ul.slidemenu 部分のところですね。こちらの部分には、この部分。position: absolute の指定をしています。これは前回、こちらの上の方に書いている、この部分ですね。li の所の position: relative と関係しているのですが、ul.slidemenu の部分にposition: absolute を指定してあげることで、この ul の要素の位置合わせの起点を親要素にあたる li 要素の左上を起点としています。その状態で、こちらの top: 41px と指定することによって、その li 要素の左上を起点として、上から 41 ピクセル、下の位置に表示させるといった指定となっています。更にその下では left: 0 と指定していますね。これも同様に li 要素の左上を起点として、左から 0 ピクセルという意味なので結局の所、li 要素の左の位置とこちらの ul.slidemenu の左の位置を一致させるといった状態になっています。それではこの状態でindex.html をブラウザで開いて、どのようなデザインになっているか確認しておきましょう。 こちらの index.html ファイルをブラウザで開きます。すると、このように表示されてきましたね。先程ポイントとしてお話した、li 要素の左上の起点というのはこの部分ですね。「メニューA」「メニューB」「メニューC」とそれぞれ左上を起点にしています。そして上から 41 ピクセルというのは丁度、このトップメニュー部分の高さですね。これの丁度下に、この薄い水色部分のスライドメニュー部分を表示させるといった指定になっています。そして left:0 の指定でしたね。left:0 に指定することによって、上の li 要素とこちらのスライドメニューの要素、左頭を合わせるといった状態になっています。このように、随分と形になってきましたね。この濃い紺色の部分がトップメニュー部分。そして薄いこちらの水色の部分ですね。こちらの部分がスライドメニュー部分となります。それではエディタに戻ります。それでは最後に、 こちらのul.slidemenu の部分にある、コメントアウトされたdisplay:none の部分。こちらのコメントを外してあげましょう。こうですね。このようにすることで、この index.html をブラウザで開いた際の初期状態をスライドメニュー、要するに先程の水色の部分ですね。 水色の部分が表示されない状態にしておきます。後は JavaScript とjQuery を使って、先程のトップメニュー部分をクリックすることによって、この ul.slidemenu 部分を表示、非表示という様な形で切り替えてあげれば、スライドメニューが出てくるナビゲーションバーの実装が完了する訳ですね。以上でレッスンは終了です。今回はナビゲーションバーのスライドメニュー部分に対するCSS コーディングについて解説致しました。以降のレッスンではJavaScript と jQuery を使って、実際にナビゲーションバーを実装していく方法について解説していきますので、そちらも合わせてご覧ください。

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

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

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

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

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

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