メニュー(2)

例　メニューバー

この例は、前回の反転メニュー(2)を元にしています。横に並べる場合には、各ボタンの領域がわかるように、しきり線を入れます。

しきりの付け方もいろいろとありますが、ここでは各項目の右にしきり線をいれ、メニュー全体の左にもしきり線を入れています。

1 メニューバー　menu.htm

#menu {
    background-color:#9999ff; /* バーに背景色。端まで塗るため幅はulに指定。 */
}
#menu ul {
    width:650px; /* ボタンの数の幅を確保 */
    height:22px; /* バーの高さを確保 */
    margin-left:9px; /* 左余白 */
    border-left:1px solid #ffffff; /* 左しきり線 */
}
#menu li {
    width:130px;
    float:left; /* liを左寄せ */
    list-style-type:none;
}
#menu a {
    border-top:1px solid #9999ff;
    border-bottom:1px solid #9999ff;
    border-right:1px solid #ffffff; /* ボタンの右にしきり線 */
    padding:2px;
    display:block;
    line-height:16px; /* 行の高さをボタンの高さに */
    text-align:center;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
    color:#ffffff;
    background-color:#9999ff;
}
#menu a:hover {
    color:#9999ff;
    background-color:#ffffff;
}

ここでの高さ計算を下記の図で示します。

行高が16px、枠内余白が上下に2pxずつ、枠線が上下に1pxずつですからボタンの高さは22pxです。

各liがfloatしてulは中身が空になってしまいますので、heightで22px指定して高さを確保します。

また、ブラウザの幅が狭くなった際にfloatした項目が二段にならないよう、ulの幅をボタンの幅5つ分 の長さに確保します。

ulの長さが決まっているため、ulの親要素であるdiv#menuに対して背景色を指定し、バー状にします。

サブメニューのHTML

メインメニューの各項目の中にサブメニューを作ります。

メインメニューのidを「mainmenu」、サブメニューのクラスは「submenu」、idを各々「submenu*」と指定します（*はサブメニューごとに付ける番号）。

2 サブメニュー submenu.htm

<div id="menu">
<ul id="mainmenu">
<li><a href="news.htm" class="link0">ニュース</a></li>
<li><a href="ningen.htm" class="link1">人間科学部</a>
  <ul class="submenu" id="submenu1">
    <li><a href="sinri.htm">心理教育学科</a></li>
    <li><a href="gendai.htm">現代社会学科</a></li>
    <li><a href="commu.htm">コミュニケーション学科</a></li>
  </ul>
</li>
<li><a href="kokusai.htm" class="link2">国際学部</a>
  <ul class="submenu" id="submenu2">
    <li><a href="kankei.htm">国際関係学科</a></li>
    <li><a href="eibei.htm">英米語学科</a></li>
  </ul>
</li>
<li><a href="komisin.htm" class="link3">コミュニティ振興学部</a>
  <ul class="submenu" id="submenu3">
    <li><a href="bunka.htm">コミュニティ文化学科</a></li>
    <li><a href="chiki.htm">地域政策学科</a></li>
    <li><a href="human.htm">ヒューマンサービス学科</a></li>
  </ul>
</li>
<li><a href="sitemap.htm" class="link0">サイトマップ</a></li>
</ul>
</div>

サブメニュー（ul）は親メニューの各項目（li）に含まれていることに注意してください。

上記のHTMLを下記からダウンロードしてください。

サブメニューHTMLアーカイブ

例　縦型サブメニュー

サブメニューはメインメニューと背景色を変え、インデントをかけています。

3 縦型サブメニュー submenu.htm

#menu {
    padding:10px; /* メニュー全体170px; */
    width:150px; /* リンク部分150px; */
}
#menu li {
    list-style-type:none;
}
#menu a {
    border:1px solid #9999ff;
    padding:2px;
    display:block;
    text-decoration:none;
    line-height:16px;
    font-size:12px;
    font-weight:bold;
    color:#ffffff;
    background-color:#9999ff;
}
#menu a:hover {
    color:#9999ff;
    background-color:#ffffff;
}
#menu ul.submenu a {
    border:1px solid #bbbbff;
    text-indent:10px; /* インデント */
    background-color:#bbbbff;
}
#menu ul.submenu a:hover {
    color:#9999ff;
    background-color:#ffffff;
}

基本は、前回の反転メニュー（2)です。全体（メインメニュー）を先に設定し、サブメニュー部分（ul.submenu）だけ上書きしています。ここではインデントをtext-indentで行っていますが、padding-leftでも構いません。

例　プルダウンメニュー

サブメニューの表示・非表示をJavaScriptで切り替えてプルダウンメニューを作成します。

まずは、すべて表示された状態で左揃えで横に並べます。

4 プルダウンメニュー submenu.htm

#menu {
    background-color:#9999ff; /* バーに背景色。端まで塗るため幅はulに指定。 */
}
#menu ul#mainmenu {
    width:750px; /* liが横に並ぶ幅を確保 */
    height:22px; /* バーの高さを確保 */
    margin-left:9px; /* 左余白 */
    border-left:1px solid #ffffff; /* 左しきり線 */
}
#menu li {
    width:150px;
    float:left; /* liを左寄せ */
    list-style-type:none;
}
#menu a {
    border:1px solid #9999ff;
    border-right-color:#ffffff;
    padding:2px;
    display:block;
    line-height:16px;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
    color:#ffffff;
    background-color:#9999ff;
}
#menu a:hover {
    color:#9999ff;
    background-color:#ffffff;
}
#menu ul.submenu a {
    border:1px solid #bbbbff;
    text-indent:10px; /* インデント */
    background-color:#bbbbff;
}
#menu ul.submenu a:hover {
    color:#9999ff;
    background-color:#ffffff;
}

縦型サブメニューのスタイルを、最初のメニューバーのように書き換える（赤字部分）だけです。サブメニュー同士が隣接して見えますが、サブメニューは1つしか表示されないようにしますので問題ありません。

次に、マウスに反応して表示・非表示を切り替えるJavaScriptの関数名をHTML内に記述します。ここでは、ロールオーバー時(onMouseOver)にMenuOn、ロールアウト時(onMouseOff)にMenuOffの関数を指定します。両関数ともに引数（括弧の中）にサブメニューの番号を指定します。

5 プルダウメニュー　submenu.htm

<div id="menu">
<ul id="mainmenu">
<li><a href="new.htm" class="link0">ニュース</a></li>
<li onMouseOver="MenuOn(1)" onMouseOut="MenuOff(1)"><a href="ningen.htm" class="link1">人間科学部</a>
  <ul class="submenu" id="submenu1">
    <li><a href="sinri.htm">心理教育学科</a></li>
    <li><a href="gendai.htm">現代社会学科</a></li>
    <li><a href="commu.htm">コミュニケーション学科</a></li>
  </ul>
</li>
<li onMouseOver="MenuOn(2)" onMouseOut="MenuOff(2)"><a href="kokusai.htm" class="link2">国際学部</a>
  <ul class="submenu" id="submenu2">
    <li><a href="kankei.htm">国際関係学科</a></li>
    <li><a href="eibei.htm">英米語学科</a></li>
  </ul>
</li>
<li onMouseOver="MenuOn(3)" onMouseOut="MenuOff(3)"><a href="komisin.htm" class="link3">コミュニティ振興学部</a>
  <ul class="submenu" id="submenu3">
    <li><a href="bunka.htm">コミュニティ文化学科</a></li>
    <li><a href="chiki.htm">地域政策学科</a></li>
    <li><a href="human.htm">ヒューマンサービス学科</a></li>
  </ul>
</li>
<li><a href="sitemap.htm" class="link0">サイトマップ</a></li>
</ul>
</div>

続けて、JavaScriptの関数をHTMLのヘッダーに定義します。

6 プルダウメニュー　submenu.htm

--></style>
<script type="text/javascript">
<!--
function MenuOn(x){
    obj=document.getElementById("submenu"+x).style.display="block";
}

function MenuOff(x){
    obj=document.getElementById("submenu"+x).style.display="none";
}
//-->
</script>
<title></title>

JavaScriptの内容についてこの授業では細かく解説できませんが、下記のようなプラグラムです。

• MenuOn関数：「idにsubmenu x（xは引数で渡された数）を持つ要素のdisplayをblockに変更する」
• MenuOff関数：「idにsubmenu x（xは引数で渡された数）を持つ要素のdisplayをnoneに変更する」

初期状態でサブメニューをすべて非表示にするために、以下のスタイルを追加します。

7 プルダウメニュー　submenu.htm

#menu ul.submenu {
    display:none; /* 初期状態は非表示 */
}

以上で完了です。