JavaScript ポップアップ：ホームページ入門－デジットさんの生活便利サイト

JavaScript でポップアップメニュー

メニューを全て表示すると、Web ページが見づらくなります。そこで、よく利用されているポップアップメニューを JavaScript で作ってみましょう。マウスがメニューに乗ったときに、そのメニューの下位のメニューを表示する方法です。ポップアップメニューは、ナビゲーションバーなどとも呼ばれます。

ポップアップメニューの例

具体的に、外部ジャバスクリプトを使用する例を示します。まず、次のサンプルプログラムをクリックして、メニューにマウスを乗せてみてください。
サンプル：　ポップアップメニューのサンプル
サンプルでは、マウスが乗ると、隠れていたメニューを表示するようにしてあります。JavaScriptでポップアップメニューを全て書く方法もありますが、その場合 HTML 本文にポップアップメニューの記載が残りませんので、サーチエンジンが認識しずらくなります。そこで、このサンプルは、HTML 内にポップアップメニューを含む全てのメニューを記載する方法を選びました。
「<div class="nav">」で、メニュー全体を定義し、「<div class="menu">」でポップアップメニューを「<div class="sub_menu">」で更にポップアップルするサブメニューを定義しています。
このサンプルの、ソースコードは次の通りです。

pop_up_menu.html のソースコード

<html>
<head>
<link rel="stylesheet" href="pop_up.css" type="text/css">
<title>ポップアップメニュー</title>
<script type="text/javascript" src="pop_up.js"></script>
</head>
<body>
<h1>ポップアップメニュー</h1>

<div class="main">
<p>
ポップアップメニューの例です。<br/>
リンク先はダミーにしてありますので、クリックしてもページ移行しません。
</p>
</div>

<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>
<li><a href="#">ポップアップ2-2</a></li>
<li><a href="#">ポップアップ2-3</a></li>
<li><a href="#">ポップアップ2-4</a></li>
</ul>
</div>
<div class="menu">
<h2><a href="#" onMouseOver="pop_on_3()" onMouseOut="pop_out_3()">メニュー3</a></h2>
<ul id="pop_3" onMouseOver="pop_on_3()" onMouseOut="pop_out_3()">
<li><a href="#">ポップアップ3-1</a></li>
<li><a href="#">ポップアップ3-2</a></li>
<li><a href="#">ポップアップ3-3</a></li>
<li><a href="#">ポップアップ3-4</a></li>
</ul>
</div>
<div class="menu">
<h2><a href="#" onMouseOver="pop_on_4()" onMouseOut="pop_out_4()">メニュー4</a></h2>
<ul id="pop_4" onMouseOver="pop_on_4()" onMouseOut="pop_out_4()">
<li><a href="#">ポップアップ4-1</a></li>
<li><a href="#">ポップアップ4-2</a></li>
<li><a href="#">ポップアップ4-3</a></li>
<li><a href="#">ポップアップ4-4</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()">
<li><a href="#">ポップアップ5-1</a></li>
<li><a href="#">ポップアップ5-2</a></li>
<li><a href="#" onMouseOver="pop_on_5_3()" onMouseOut="pop_out_5_3()">ポップアップ5-3</a></li>
<li><a href="#">ポップアップ5-4</a></li>
<li><a href="#">ポップアップ5-5</a></li>

</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-2</a></li>
    <li><a href="#">ポップアップ1-2-3</a></li>
    <li><a href="#">ポップアップ1-2-4</a></li>
    <li><a href="#">ポップアップ1-2-5</a></li>
    <li><a href="#">ポップアップ1-2-6</a></li>
    <li><a href="#">ポップアップ1-2-7</a></li>
    <li><a href="#">ポップアップ1-2-8</a></li>
    <li><a href="#">ポップアップ1-2-9</a></li>
    </ul>
</div>
</div>
<div id="sub_menu_1_3">
<div class="sub_menu">
     <ul id="pop_1_3" onMouseOver="pop_on_1_3()" onMouseOut="pop_out_1_3()">
    <li><a href="#">ポップアップ1-3-1</a></li>
    <li><a href="#">ポップアップ1-3-2</a></li>
    </ul>
</div>
</div>

<div id="sub_menu_5_3">
<div class="sub_menu">
    <ul id="pop_5_3" onMouseOver="pop_on_5_3()" onMouseOut="pop_out_5_3()">
    <li><a href="#">ポップアップ5-3-1</a></li>
    <li><a href="#">ポップアップ5-3-2</a></li>
    <li><a href="#">ポップアップ5-3-3</a></li>
    <li><a href="#">ポップアップ5-3-4</a></li>
    </ul>
</div>
</div>

</div>

</body>
</html>

実際にマウスが乗ったときポップアップしたり、マウスが外れたとき隠したりする方法は、メニューの記載してある HTLM タグに onMouseOver や onMouseOut を設定して、JavaScript の次の関数を呼びます。
例えば、「メニュー1」にマウスが乗った場合は pop_on_1() が、「メニュー1」からマウスが外れた場合は、pop_out_1() という関数が実行されます。この関数は、CSS の display プロパティの値を block（表示）・none（非表示）と、設定を変えることにより、ポップアップさせたり、画したりさせています。

pop_up.js のソースコード

//ポップアップメニュー

function pop_on_1(){  //"メニュー1"にマウスオン
    document.getElementById("pop_1").style.display="block";
}
function pop_out_1(){  //"メニュー1"からマウスアウト
    document.getElementById("pop_1").style.display="none";
}

function pop_on_2(){  //"メニュー2"にマウスオン
    document.getElementById("pop_2").style.display="block";
}
function pop_out_2(){  //"メニュー2"からマウスアウト
    document.getElementById("pop_2").style.display="none";
}

function pop_on_3(){  //"メニュー3"にマウスオン
    document.getElementById("pop_3").style.display="block";
}
function pop_out_3(){  //"メニュー3"からマウスアウト
    document.getElementById("pop_3").style.display="none";
}

function pop_on_4(){  //"メニュー4"にマウスオン
    document.getElementById("pop_4").style.display="block";
}
function pop_out_4(){  //"メニュー4"からマウスアウト
    document.getElementById("pop_4").style.display="none";
}

function pop_on_5(){  //"メニュー5"にマウスオン
    document.getElementById("pop_5").style.display="block";
}
function pop_out_5(){  //"メニュー5"からマウスアウト
    document.getElementById("pop_5").style.display="none";
}

// サブメニュー表示
function pop_on_1_2(){  //"メニュー1_2"にマウスオン
    document.getElementById("pop_1").style.display="block";
    document.getElementById("pop_1_2").style.display="block";
}
function pop_out_1_2(){  //"メニュー1_2"からマウスアウト
    document.getElementById("pop_1").style.display="none";
    document.getElementById("pop_1_2").style.display="none";
}

function pop_on_1_3(){  //"メニュー1_3"にマウスオン
    document.getElementById("pop_1").style.display="block";
    document.getElementById("pop_1_3").style.display="block";
}
function pop_out_1_3(){  //"メニュー1_2"からマウスアウト
    document.getElementById("pop_1").style.display="none";
    document.getElementById("pop_1_3").style.display="none";
}

function pop_on_5_3(){  //"メニュー5_3"にマウスオン
    document.getElementById("pop_5").style.display="block";
    document.getElementById("pop_5_3").style.display="block";
}
function pop_out_5_3(){  //"メニュー5_3"からマウスアウト
    document.getElementById("pop_5").style.display="none";
    document.getElementById("pop_5_3").style.display="none";
}

CSS は、ポップアップには直接関係ありません。このページのレイアウトや、メニューにマウスが乗ったときに色を変えたりする設定がされています。
ポイントは、マウスが文字以外のマスの中でも有効になるように「display:block;」で、プロック指定する所です。 Web ブラウザによっては、バグがあるようで、サブメニューがブロックにならずにテキスト以外のところでメニューが消えていしまったりしましたが、a 要素に直接「 width プロパティ」やボーダーを指定したところ、正常になりました。また、「 visibility:hidden; 」を使うとポップアップから更にポップアップさせたメニューの位置によってポップアップメニューが選択できなくなったりします。したがって、メニューは「 display:none; 」で見えなくします。

pop_up.css のソースコード

/* ポップアップメニュー */
body    {
    margin:0px;
    padding:0px;
}

/* メニューバー設定 */
/* 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:120px;
    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:124px;    /* メニューバーの幅 */
    float:left;        /* メニューを横に並べる */
    }
.menu ul {
    display:none;    /* ポップアップメニューを表示しない */
    margin:0px;
    padding:0px;
    list-style-type:none;
    font-size:12px;
    }
.menu li {
    width:116px;    /* メニューバーの幅より4px小さい */
    background-color:#eeffcc;
    border-left:1px solid #aaaaaa;
    border-right:1px solid #aaaaaa;
    border-bottom:1px solid #aaaaaa;
    line-height:1.2;
    margin:0px 1px;
    }
.menu li a {
    width:116px;    /* メニューバーの幅より4px小さい */
    display:block;
    padding:1px;
    text-decoration:none;
    color:#333333;
    line-height:1.2;
    }
.menu li a:hover{
    background-color:#ffffd8;
    }
.menu li a:active{
    background-color:#ffcc77;
    }
/* サブメニュー */
.sub_menu ul {
    display:none;　/* サブメニューを表示しない */
    margin:0px;
    padding:0px;
    border-top:1px solid #aaaaaa;
    margin:0px;
    list-style-type:none;
    font-size:12px;
    line-height:100%;
    }
.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;        /* 左からのピクセル数 */
    }

#sub_menu_1_3    {    /* サブメニュー1_3の表示位置 */
    position:absolute;/* 表示場所を絶対位置指定 */
    top:40px;        /* 上からのピクセル数 */
    left:115px;        /* 左からのピクセル数 */
    }

#sub_menu_5_3    {    /* サブニュー5_3の表示位置 */
    position:absolute;/* 表示場所を絶対位置指定 */
    top:20px;        /* 上からのピクセル数 */
    left:400px;        /* 左からのピクセル数 */
    }
/* ナビバー終わり */

/* mainの位置指定 */
h1    {
    width:750px;
    height:40px;
}
.main    {
    width:750px;
    margin-top:80px;  /*h1とナビのスペースが入る場所*/
}

JavaScript ポップアップ

JavaScript でポップアップメニュー

ポップアップメニューの例

JavaScriptの目次

PR amazon

リンク

author

スポンサードリンク

トップページ＞ JavaScript ＞ポップアップ

HP 基本

HTML

CSS

JavaScript

レベルアップ

サイト情報

JavaScript ポップアップ

JavaScript でポップアップメニュー

ポップアップメニューの例

JavaScriptの目次

PR amazon

リンク

author

スポンサード リンク

トップページ ＞ JavaScript ＞ ポップアップ

HP 基本

HTML

CSS

JavaScript

レベルアップ

サイト情報

スポンサードリンク

トップページ＞ JavaScript ＞ポップアップ