プルダウンメニュー（CSS）の作成

>>ホームページの作り方TOP　>>プルダウンメニュー（CSS使用）の作成

■プルダウンメニュー（CSS使用）の作成

これを作るにはCSSの知識(特にposition)がわかっている必要があるので、わからない人は残念ということで。

さて、流れはフォームの続きです。横メニューバーを縦メニューにもどし、ついでにクラスとIDを振ります。

/////////////////////HTML///////////////
<div class="menu">
<div id="menu1"><a href="">HOME</a>
<div class="submenu" id="submenu1">
<a href="">SAMPLE1</a>
<a href="">SAMPLE2</a>
<a href="">SAMPLE3</a>
<a href="">SAMPLE4</a>
</div></div></div>
/////////////////////CSS////////////////
a:link {
　　　　color:#ff0000;
　　　　}
a:visited {
　　　　color:#ff0000;
　　　　}
.menu a:hover {
　　　　background-color:#99ff99;
　　　　}
a {
　　　　text-decoration:none;
　　　　}
body {
　　　　text-align:center;
　　　　margin:0;
　　　　}
p.head {
　　　　text-align:left;
　　　　background-color:#ebfaeb;
　　　　margin-bottom:0;
　　　　}
.menu a {
　　　　background-color:#00ff00;
　　　　display:block;
　　　　width:140px;
　　　　border-bottom:solid 1px #ffffff;
　　　　line-height:2em;
　　　　}
.menu {
　　　　background-color:#00ff00;
　　　　height:2em;
　　　　margin-top:0;
　　　　width:140px;
　　　　}
#form {
　　　　position:absolute;
　　　　left:850px;
　　　　top:40px;
　　　　}

HTMLのほうはdivにてくくり、IDとclassを指定しました。classとIDが両方指定されているところもありますが、スタイル用とjavascript用です。CSSのほうはfloatを削除しあとは適当に整えました。

ここまででこうなります。→サンプル

次に、menuとsubmenuの色を少し変え、submenuの表示を隠します。

.menu a {
　　　　background-color:#0f0;
　　　　}
.menu {
　　　　background-color:#00ff00;←―削除
　　　　}
.submenu a {
　　　　background-color:#8f8;
　　　　}
.submenu {
　　　　visibility:hidden;
　　　　}

visibilityというのは可視、不可視を切り替えるタグです。

visible(可視)、hidden(不可視)となります。

ここまででこうなります。→サンプル

続いて、メインメニューにマウスが乗っかったときにサブメニューが現れ、離れたときにサブメニューが見えなくなるように、HTMLファイルとjavascriptを編集します。

/////////////////////HTML////////////////
<div id="menu1" onMouseOver="show()" onMouseOut="shut()"><a href="">HOME</a>
/////////////////////javascript//////////
function show() {
　　　　document.getElementById("submenu1")
　　　　　　　　　　　　.style.visibility="visible";
　　　　}
function shut() {
　　　　document.getElementById("submenu1")
　　　　　　　　　　　　.style.visibility="hidden";
　　　　}

HTMLのほうでは、ID(menu1)でくくられた範囲内にマウスが乗っかっている(onMouseOver)ならshow()、離れた(onMouseOut)ならshut()という命令を実行しなさいという意味になります。

続いてjavascriptのほうですが、【getElementBy～("").style.プロパティ名】はHTMLの中で～(上で言えばID)を指定して、プロパティ名で示されるstyleをコントロールする命令です。この場合は「ID(submenu1)に適用されているスタイル(visibility="hidden")を(visibility="visible")に変えなさいということです。

javascriptはIDでしか関連付けられないためsubmenu1のほうをぶち込みました。

ここまででこうなります。→サンプル

さて、メニューが1つではさびしいので、メニューを追加するとともに形にしてみます。場所はpositionにて指定しますが、その前にCSSに以下のように手を加え通常の位置を変更します。

body {
　　　　text-align:center;　→　削除
　　　　margin:0;
　　　　}
.menu {
　　　　height:2em;　→　かぶってるので削除
　　　　margin-top:0;　→　削除
　　　　width:140px;　→　かぶってるので削除
　　　　}
.menu a {
　　　　background-color:#0f0;
　　　　display:block;
　　　　width:140px;
　　　　border-bottom:solid 1px #ffffff;　→　border-right:solid 1px #ffffff;に変更
　　　　line-height:2em;
　　　　text-align:center;　→　追加
　　　　}

そして、メニューを二つほど追加します。コピればいいだけです。

/////////////////////HTML////////////////
<p class="no1">
<div class="menu">
<div id="menu1" onMouseOver="show()" onMouseOut="shut()"><a href="">HOME</a>
<div class="submenu" id="submenu1">
<a href="">SAMPLE1</a>
<a href="">SAMPLE2</a>
<a href="">SAMPLE3</a>
<a href="">SAMPLE4</a>
</div></div>
<div id="menu2" onMouseOver="show2()" onMouseOut="shut2()"><a href="">HOME</a>
<div class="submenu" id="submenu2">
<a href="">SAMPLE1</a>
<a href="">SAMPLE2</a>
<a href="">SAMPLE3</a>
<a href="">SAMPLE4</a>
</div></div>
<div id="menu3" onMouseOver="show3()" onMouseOut="shut3()"><a href="">HOME</a>
<div class="submenu" id="submenu3">
<a href="">SAMPLE1</a>
<a href="">SAMPLE2</a>
<a href="">SAMPLE3</a>
<a href="">SAMPLE4</a>
</div></div></div>
/////////////////////javascript///////////
function show2() {
　　　　document.getElementById("submenu2")
　　　　　　　　　　　　.style.visibility="visible";
　　　　}
function shut2() {
　　　　document.getElementById("submenu2")
　　　　　　　　　　　　.style.visibility="hidden";
　　　　}
function show3() {
　　　　document.getElementById("submenu3")
　　　　　　　　　　　　.style.visibility="visible";
　　　　}
function shut3() {
　　　　document.getElementById("submenu3")
　　　　　　　　　　　　.style.visibility="hidden";
　　　　}

このままだと位置が悪いので、positionにて位置を指定します。通常の位置をあらかじめ移動しておいたので、クラスmenuに対して相対配置を適用することで、全てのメニューの位置をそこを基点として指定できるようになります。

.menu {
　　　　background-color:#00ff00;
　　　　position:relative;
　　　　left:0;
　　　　top:0;
　　　　}
#menu2 {
　　　　position:absolute;
　　　　left:141px;
　　　　top:0;
　　　　}
#menu3 {
　　　　position:absolute;
　　　　left:282px;
　　　　top:0;
　　　　}

この場合、位置はボタンの幅(140px)＋右のborderの幅(1px)で141の倍数になります。ついでにメニュー全体に背景を指定しました。

ただ、この状態だとsubmenuのほうまで背景が回りこんでいる上、submenuの上にマウスをおくだけでもsubmenuが開いてしまいます。

これはvisibilityで画面表示は消えてもスペースが残ってしまうため起こる現象です。それを補正するため、以下を加えます。

.submenu {
　　　　visibility:hidden;
　　　　position:absolute;
　　　　left:0;
　　　　top:auto;
　　　　}

positionを指定することで、スペースが認識されなくなります。最終的にはこうなります。→サンプル

プルダウンメニューはもっと効率的な記述があるのですが、めんどいので自分で調べてください。そのほかのプログラムについても同様です・・・。まぁ、javascriptを入れれば、動きと時間の概念が追加されますが、それがはたしていいのか・・・。ってなわけで、javascript講座を一旦終えます。

ホームページの作り方（HP作成法）を解説

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

STEP7

■プルダウンメニュー（CSS使用）の作成