2007年2月11日

ドロップダウンメニューの設置

今回は、掲示板での質問の中から、もう少し具体的に、ソースやブラウザでの表示例などを付けて説明します。

【質問内容】
トップナビゲーションをドロップダウン（プルダウン）メニューにする方法は？

以前、「トップナビゲーションの設置」で紹介したナビゲーションのドロップダウンメニュー化です。

ドロップダウンメニューとは、メニューのタイトル部分にマウスを重ねたときに、そこから新たな選択項目の一覧が垂れ幕のように表示されるメニューのことで、「プルダウンメニュー」とも呼びます。

CSSとHTMLを編集できるブログでしたら、ドロップダウンメニューを設置することができますので、是非、参考にしてください。

サンプル（ドロップダウンメニュー）

ドロップダウンメニューの設置方法

では、「ドロップダウンメニューの設置方法」について説明します。
ここでは、javascript の onmouseover属性とonmouseout属性を用いて作成し、メニュー項目にマウスを重ねたときにクラス名が切り替わる方法を使用しています。

[1] HTMLの編集
HTMLテンプレートを編集し、ドロップダウンメニューを挿入したい箇所に、下記のようなメニューのリストを作成します。

<div id="navi_continer">
<div id="navi">
<ul>
<li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'">
<a href="#">メニュー 1</a>
<ul class="sub">
<li><a href="#">サブメニュー 1</a></li>
<li><a href="#">サブメニュー 2</a></li>
</ul>
</li>
<li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'">
<a href="#">メニュー 2</a>
<ul class="sub">
<li><a href="#">サブメニュー 1</a></li>
<li><a href="#">サブメニュー 2</a></li>
<li><a href="#">サブメニュー 3</a></li>
<li><a href="#">サブメニュー 4</a></li>
</ul>
</li>
<li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'">
<a href="#">メニュー 3</a>
<ul class="sub">
<li><a href="#">サブメニュー 1</a></li>
<li><a href="#">サブメニュー 2</a></li>
<li><a href="#">サブメニュー 3</a></li>
</ul>
</li>
</ul>
</div>
</div>

・リンク先URLとメニュータイトルは、適切な文字に変更してください。

[2] CSSの編集
スタイルシートに、下記のような記述を追加します。（説明文は不要） なお、下記は、サンプルの記述例ですので、適時変更してください。

/* ナビゲーション */
#navi_continer {
position: relative;
z-index:100;
width: 400px;
height:100px;
}

#navi {
position: absolute;
top: 10px;
left: 10px;
width: 306px;
}

#navi ul {
margin: 0;
padding: 0;
list-style: none;
}

#navi li {
color: #fffff;
float: left;
width: 100px;
margin: 0;
}

#navi li a {
font-size: 14px;
color: #ffffff;
display: block;
width: 100%;
padding: 3px 0;
text-align: center;
font-weight: bold;
text-decoration: none;
background-color: #3399ff;
}

#navi li a:hover {
color: #ffffff;
background-color: #3366cc;
}

/* サブメニュー */
#navi ul.sub {
background: #eeeeee;
}

#navi ul.sub li {
float: none;
}

#navi ul.sub li a {
color: #666666;
background: none;
font-size: 12px;
font-weight: normal;
padding: 3px 0;
border-top:1px solid #000099;
}

#navi ul.sub li a:hover {

color: #ffffff;
background-color: #ff9900;
}

#navi ul li.navi_menu ul {
display: none;
}

#navi ul li.navi_menu_on ul {
display: block;
}

#navi li.navi_menu{
border:1px solid #000099;
}

#navi li.navi_menu_on{
border:1px solid #000099;
}

【ナビゲーションボックス】
←配置方法（相対位置）
←重なりの順序（最上位）
←横幅
←高さ

【ナビゲーション全体】
←配置方法（絶対位置）
←上からの配置位置
←左からの配置位置
←横幅

【メニュー全体】
←マージン（全方向 0）
←パディング（全方向 0）
←リストマーカー（非表示）

【メニュー】
←文字色
←配置（左寄せ）
←横幅
←マージン（全方向 0）

【メニュー（通常時）】
←文字サイズ
←文字色
←要素の表示形式（ブロック）
←横幅
←パディング
←文字の位置揃え
←文字の太さ（太字）
←テキストの下線等（なし）
←背景色

【メニュー（マウスオーバー）】
←文字色
←背景色

【サブメニュー全体】
←背景色

【サブメニュー】
←配置（なし）

【サブメニュー（通常時）】
←文字色
←背景色
←文字サイズ
←文字の太さ（ノーマル）
←パディング
←枠線

【サブメニュー（マウスオーバー）】
←文字色
←背景色

【メニュー】
←要素の表示形式（なし）

【サブメニュー】
←要素の表示形式（ブロック）

【メニュー】
←枠線

【サブメニュー】
←枠線

以上で、ドロップダウンメニューの設置は完了です。あとは、ブログデザインに応じて、配色や幅などを調整してくださいね。

1クリックの応援で、質問に丁寧にお答えします＾＾

トラックバック

このエントリーのトラックバックURL:

ブログ別！作成・カスタマイズ講座　運営者様

コメントでのご連絡、失礼致します。
DTIブログのヨコボリと申します。
この度、是非DTIブログを『ブログ別！作成・カスタマイズ講座』様サイトの「無料ブログ比較」に掲載して頂きたくコメントにて連絡させていただきました。
DTIブログでは、容量は2GB、動画は10MBで、カスタマイズ・アフィリエイトともに制限なくご利用いただけます。
なにとぞご検討の程、宜しくお願い申し上げます。

DTIブログのURL:
http://www.dtiblog.com/

投稿者 DTIブログ : 2007年2月13日 07:39

DTIブログ　ヨコボリ様

コメントありがとうございます。
「無料ブログ比較」にて掲載いたしましたので、ご確認お願い致します。

投稿者りっち : 2007年2月18日 22:21

CSSだけで作れる全ブラウザ対応ドロップダウンメニュー、探していました。
やっと見つかり、とてもうれしいです。
ありがとうございました。

投稿者美也 : 2007年7月31日 13:04

コメントありがとうございます。
今後も参考になりそうな記事をとんどんアップしていきますので、よろしくお願いします＾＾

投稿者りっち : 2007年8月 5日 23:43

りっち様

はじめまして！
大変参考にさせてもらっています！

どうしてもわからないことがあり質問します。
現在はメインメニューとサブメニューの横幅が一緒です。
サブメニュー横幅を大きくしたいのでサブメニューに横幅を指定しました。
その場合、メインメニューの領域がサブメニューの横幅と同じになってしまいメインメニューの領域をマウスアウトしてもサブメニューが表示されてしまいます。

なにかよい解決策があればご教授ください。

投稿者初心者 : 2007年9月19日 15:47

サブメニューの横幅を変更するには、
「#navi ul.sub」と「#navi ul.sub li」で横幅を指定する必要があります。
一度試してみてください。

投稿者りっち : 2007年9月30日 22:42

りっち様

コメントありがとうございます。
以前からサブメニューの横幅の変更はできるんです。
ここで問題なのはサブメニューの横幅を変更するとメインメニューの領域まで広がってしまうのです。（入れ子にしているため）

たとえばメインメニューが100pxでサブが200pxの場合
メインメニューの100pxの外を出たらサブメニューは隠れるはずですがサブメニューに引っ張られメインメニューまで横幅の領域が広がってしまうので100pxの領域を出てもサブメニューが出続けます。

一度サブメニューの横幅を変更していただけるとすぐおわかりいただけると思います。

投稿者初心者 : 2007年10月 1日 11:25

サブメニューのサイズを変更しても影響出ないように作れますよ。

投稿者草加 : 2007年11月 2日 16:39

はじめましてm(__o)m
記事を参考にお陰さまで念願のドロップダウンメニューが作れそうです♪
ですが、ひとつだけ問題が…
どうやったら作ったメニューを画面上でセンタリング表示できるかがわかりません。
メニューに指定してある配置（左寄せ）のところをcenterとしてみましたが、メニューが横並びから縦並びに変わってしまうし、センターと言うよりは中途半端な場所に出てきてしまいます…。そのままですと、メニューだけが左端に表示されてデザインが崩れてしまいます。初心者で状況説明もおぼつかないのですが、解決方法を教えていただけると嬉しいです。よろしくお願いいたします(*^^*)　ちなみに、リンクしたHPはドロップダウンメニューはまだ組み込まれていません。

投稿者ふさ : 2008年1月24日 20:24

サブメニューが下のテキストに重なると消えてしまいます。IE6です。

「HTMLの編集」の記事の一番下の /div のあとに3行ほどの長い文章を打ち込み、#navi の top プロパティを 50px にすると再現できると思います。
マウスをサブメニュー上で上下させると、テキストに重なるタイミングで消えてしまうのです。これの回避方法はありますでしょうか？

投稿者 KY : 2008年2月 9日 14:42

コメントしてください