デジットさんのポップアップメニュー (HTLMの書き方)

HTMLの書き方です。「ポップアップメニュー」では、スタイルシートとJavaスクリプトを使ったポップアップメニューの作り方をお教えします。ポップアップメニューから更にポップアップを出す所まで踏み込んでいます。

ポップアップメニューとは

ホームページのページ数が増えてきたとき、各ページに案内するメニューをまともに書くとそれだけでページがいっぱいになってしまいます。大分類のメニューだけ作って、そこにマウスが乗った時詳細メニューを表示するポップアップメニューを使えば、ページの見栄えがすっきりしユーザインターフェースも向上します。ポップアップメニューは、ナビゲーションバーとも呼ばれています。

ポップアップメニュー作成時の注意点

Javaスクリプトでポップアップメニューを全て書く方法がありますが、その場合HTML本文にポップアップメニューの記載が残りませんので、サーチエンジンが認識できなくなります。今回は、サーチエンジンでもサブメニューが読めSEOにも有利になるよう、HTML内にポップアップメニューを含む全てのメニューを記載する方法を選びました。

ポップアップメニューのサンプルページ

ポップアップメニューのサンプルは、ポップアップメニューです。今回のサンプルは、HTLM「pop_up_menu.html」と、スタイルシート「pop_up.css」・Javaスクリプト「pop_up.js」で構成されています。スタイルシートでは、ポップアップメニューのデザインとレイアウト・表示位置を担当しています。Javaスクリプトは、メニューにマウスが乗った時のポップアップを担当します。この例では、スタイルシートとJavaスクリプトは、外部ファイルで指定しています。
今回は、メニューの上にマウスを置くと全てポップアップメニューが出ますが、メニューの「ポップアップ1_2」と「ポップアップ1_3」及び「ポップアップ5_3」から、更にポップアップメニューが出るようになっています。

ポップアップメニューの作り方

次は、HTMLのリストの抜粋です。全て見たい人は、ポップアップメニューの「ソース」をご覧下さい。「<div class="nav">」で、メニュー全体を定義し、「<div class="menu">」でポップアップメニューを「<div class="sub_menu">」で更にポップアップルするメニューを定義しています。

<div class="nav">
<div class="menu">
<h2><a href="#" onMouseOver="pop_on_1()" onMouseOut="pop_out_1()">メニュー1</a></h2>
<ul id="pop_1" onMouseOver="pop_on_1()" onMouseOut="pop_out_1()">
<li><a href="#">ポップアップ1-1</a></li>
<li><a href="#" onMouseOver="pop_on_1_2()" onMouseOut="pop_out_1_2()">ポップアップ1-2</a></li>
<li><a href="#" onMouseOver="pop_on_1_3()" onMouseOut="pop_out_1_3()">ポップアップ1-3</a></li>
<li><a href="#">ポップアップ1-4</a></li>
</ul>
</div>
<div class="menu">
<h2><a href="#" onMouseOver="pop_on_2()" onMouseOut="pop_out_2()">メニュー2</a></h2>
<ul id="pop_2" onMouseOver="pop_on_2()" onMouseOut="pop_out_2()">
<li><a href="#">ポップアップ2-1</a></li>
　・
</ul>
</div>
　・
　・
<div class="menu">
<h2><a href="#" onMouseOver="pop_on_5()" onMouseOut="pop_out_5()">メニュー5</a></h2>
<ul id="pop_5" onMouseOver="pop_on_5()" onMouseOut="pop_out_5()">
　・
</ul>
</div>
<!-- サブメニュー -->
<div id="sub_menu_1_2">
<div class="sub_menu">
<ul id="pop_1_2" onMouseOver="pop_on_1_2()" onMouseOut="pop_out_1_2()">
<li><a href="#">ポップアップ1-2-1</a></li>
　・
　・
<li><a href="#">ポップアップ1-2-9</a></li>
</ul>
</div>
</div>
　・
　・
</div>

次は、スタイルシートの抜粋です。ポイントは、マウスが文字以外でも有効になるように「display:block;」で、プロック指定する所です。
ブラウザにバグがあるようで、サブメニューがブロックにならずにテキスト以外のところでメニューが消えていしまったりしましたが、a要素に直接「widthプロパティ」やボーダーを指定したところ、正常になりました。また、「visibility:hidden;」を使うとポップアップから更にポップアップさせたメニューの位置によってポップアップメニューが選択できなくなったりします。したがって、メニューは「display:none;」で見えなくします。ただ、サブメニューでマウスを早く動かすとサブメニューが消えてしまうことがありますが、実用には充分です。

/* h2幅121＋2×2　memu幅120　sub_menu幅120+2×2 */
.nav {
width:750px; /* ナビバー全体の幅 */
position:absolute;/* 絶対位置指定 */
top:71px; /* 上からのピクセル数 */
left:0px;
}
.nav h2{
margin:0px;
}
.nav h2 a{
display:block; /* ブロック表示 */
width:121px;
background-color:#eeffcc;
border:2px solid;
border-color:#efffdd #00aa00 #00aa00 #efffdd;
text-align:center;
text-decoration:none;
font-size:14px;
color:#115533;
font-weight:900;
}
.nav h2 a:hover{
background-color:#ffffd8; /* マウスオンの背景色 */
}
.nav h2 a:active{
background-color:#ffcc77; /* マウスクリックの背景色 */
}
.menu { /* プルダウンメニュー */
width:120px; /* メニューバーの幅 */
float:left;
}
.menu ul {
margin:0px;
padding:0px;
list-style-type:none;
font-size:12px;
display:none; /* プルダウン非表示2007.5.20visibility:hiddenから変更 */
}
.menu li {
background-color:#eeffcc;
border-left:1px solid #aaaaaa;
border-right:1px solid #aaaaaa;
border-bottom:1px solid #aaaaaa;
line-height:100%;
margin:0px 1px;
}
.menu li a {
display:block;
padding:1px;
text-decoration:none;
color:#333333;
}
.menu li a:hover{
background-color:#ffffd8;
}
.menu li a:active{
background-color:#ffcc77;
}
/* サブメニュー */
.sub_menu ul {
margin:0px;/* 2007.5.20追加 */
padding:0px;/* 2007.5.20追加 */
border-top:1px solid #aaaaaa;
margin:0px;
list-style-type:none;
font-size:12px;
line-height:100%;
display:none;　/* サブメニューは表示場所を確保しない */
}
.sub_menu li {
background-color:#eeffcc;
}
.sub_menu li a {
display:block;
width:120px; /* サブメニューバーの幅 */
padding:1px;
text-decoration:none;
color:#333333;
border-left:1px solid #aaaaaa;
border-right:1px solid #aaaaaa;
border-bottom:1px solid #aaaaaa;
}
.sub_menu li a:hover{
background-color:#ffffd8;
}
.sub_menu li a:active{
background-color:#ffcc77;
}

#sub_menu_1_2 { /* プルダウンメニュー1_2の表示位置 */
position:absolute;/* 表示場所を絶対位置指定 */
top:30px; /* 上からのピクセル数 */
left:115px; /* 左からのピクセル数 */
}
　・
　・
/* ナビバー終わり */

/* mainの位置指定 */
.main {
width:750px;
margin-top:80px; /*H1とナビのスペースの下を指定*/
}

最後に、Javaスクリプトのリストの抜粋を示します。ここでは、マウスの動きに対する表示を決めています。リストでは、メニュー1とメニュー1_2のみ示していますが、ポップアップさせる所は全て同様に定義します。

//ナビゲータポップアップ
function pop_on_1(){ //"メニュー1"にマウスオン
document.getElementById("pop_1").style.style.display="block";/* 2007.5.20変更 */
}
function pop_out_1(){ //"メニュー1"からマウスアウト
document.getElementById("pop_1").style.display="none";/* 2007.5.20変更 */
}
　・
　・
// サブメニュー表示
function pop_on_1_2(){ //"メニュー1_2"にマウスオン
document.getElementById("pop_1").style.style.display="block";/* 2007.5.20変更 */
document.getElementById("pop_1_2").style.display="block";
}
function pop_out_1_2(){ //"メニュー1_2"からマウスアウト
document.getElementById("pop_1").style.display="none";/* 2007.5.20変更 */
document.getElementById("pop_1_2").style.display="none";
}
　・
　・

【作成　2006.10.24】
【更新　2007.5.20】「visibility」では問題があるので「display」に変更しました。