プルダウンメニューの作成：スタイルシートメモ

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

大きいメニューがあって、そのメニューの上にカーソルを重ねると、小さいメニューが下に表示される…そんなプルダウンメニューを作成します。
メニューがあってさらに細かいメニューがあって…そういうナビゲーションを横に並べたい場合など、特に便利です。
縦のメニューでも、サブメニューを一覧で見せたいときは、結構便利ですよ。
ちなみに、このページではわかりやすいように大きいメニューは「メインメニュー」、その下に表示される小さいメニューは「サブメニュー」と書きます。

横のメニューの作り方です。
基本的にpositionで場所を設定しているので、可変式のページ設定の場合、使えない場合があります。

<a herf="01.html" class="naviheader">メニューの大タイトル</a>

</div>

<a herf="02.html" class="naviheader">メニューの大タイトル</a>

</div>

.navi a{
display:block;
width:120px;
height:30px;
float:left;
}

.navi{
position:relative;
top:0;
left:0;
}

#navi01{
position:absolute;
top:0;
left:0;
}

#navi02{
position:absolute;
left:121px;
top:0;
}

.subnavi a{
background-color:#FF0;
}

.subnavi{
visibility:hidden;
}

■「.navi a」で、簡単に説明しますとaをブロック要素に変更し、大きさを設定しています。
ブロック要素…などの設定の詳細については、リンクでボタンを作成する：スタイルシートメモが同じ内容なので、そちらで確認してください。
■「.navi」「#navi01」のpositionの設定
メニュー部分をそろえて表示するために「position:absolute」で表示位置を指定します。
バーの部分は「position:relative」を設定します。
※relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
■メニューの表示位置の調節
このサンプルの場合、メニューひとつの幅は120pxという設定です。
メニューを横に並べて配置していくので、「#navi02」の左位置は、「#navi01」の長さ+1pxの分になります。
※1px増やしているのはメニューとメニューの間に隙間を付けたいからです。
隙間が要らない場合は、120pxでＯＫです。
■「.subnavi a」でサブメニューの色を変えたい場合は設定します。
■「.subnavi」を消す
通常状態でサブメニューが開いているのは、使い勝手が悪いので、通常状態はサブメニューを消すように「visibility:hidden;」を指定します。

HTMLとスタイルシートの設定は以上です。
好みによってテキストの色を変えたり、テキストの大きさを変えたり、細かい設定を行ってください。

後は、スクリプトを使ってプルダウンメニューの動作を設定します。
このスクリプトを使うことによって、メインメニューにカーソルを重ねることで、サブメニューを表示させることができます。

headerに設定してください。
<script type="text/javascript">

<!--

function MenuOn(X){

obj=document.getElementByld("subnavi"+x).style.visibility="visible";

}

// -->

</script>

« 画像リンクでボタンを作成 | メイン | Movable Type3.2基本テンプレート »

投稿者: akasa 日時: 2006年04月04日 00:14|パーマリンク

スタイルシートメモ

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

「プルダウンメニューの作成」関連本

人気スタイルシート本