Bloggerでドロップダウン(2階層目)とフライアウト(3階層目)付きの自作画像ナビゲーションを実装する方法

現在…実装しているナビゲーションの解説はこちらです…

 マウスホバーで光源が追従しスクロールでページトップに固定される3階層ナビゲーション

現在は削除していますので削除前の状態を置いておきます…

概要＆下準備

当サイトのナビゲーションは…

「Top Page」「８つのカテゴリーページ」「それ以外のページ」の…

10種類で構成されている「ul」「li」の入れ子構造になっていて…

ほんの少しだけ「JavaScript」を使います…

クリックされて「Top Page」か「８つのカテゴリーページ」が表示されると…

表示ページのテーマカラーの画像とボーダーラインに切り替わり…

1階層目にマウスを載せるとページのテーマカラー画像に切り替わり…

2階層目が有るカテゴリーでは…

メニューがドロップダウンで表示され…


3階層目が有るメニューはカテゴリーページのテーマカラーでハイライトされます…

2階層目にマウスを載せると画像が透過されて暗くなり Hover 状態を表現します…

ハイライトされた2階層目にマウスを載せると…

3階層目がフライアウトされます…


2階層目のドロップダウンメニューは他のカテゴリーを「Hover」するか…

「Hide Menu」をクリックすると順次消えていきます…

3階層目のフライアウトメニューは親カテゴリーの「Hover」…

3階層目が有る他の2階層目のメニューの「Hover」…

もしくは「Hide Menu」のクリックでしか消えません…

「ul」「li」の入れ子構造…の時点で…お気づきの方もいらっしゃると思われますが…

Internet Explorer 6 以下では正常に動作しません…

更に…対象は「レイアウトテンプレート」です…

では…下準備です…テンプレートのバックアップをお忘れなく…

表示位置は…「header-wrapper」の下の「crosscol-wrapper」です…

「デザイン」「HTMLの編集」「ウィジェットのテンプレートを展開」から…

「Ctrl + F」で「crosscol-wrapper」を検索して該当する箇所を…

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
ここにガジェットが入ります
</b:section>
</div>

という構造にします…無い方は追加してください…実際の記述は…

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

と、してください…既に他の用途で使っている方は…

「crosscol」を「crosscol1」などにして記述してください…

次に「CSS」部分に以下を記述します…

#container1{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #F15B55 solid;}

「テンプレートを保存」して「デザイン」に戻ると…

「crosscol-wrapper」にガジェットを追加出来るようになっていますので…

「HTML / JavaScript」ガジェットを追加して…

タイトル無しで以下を記述して「保存」…

<div id="container1" align="center">
ここにタブメニューが入ります
</div>

ご自身のサイトを表示させると…

実際は他に何も設定していませんので…

ヘッダーの下に…「ここにタブメニューが入ります」の文字と…

太さ 2px 長さ 770px の赤い枠線が1本表示されれば OK です…

「CSS Sprites」設定編

「CSS Sprites」は…こちらの記事を参照して…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


お好きなサイズ、色で構築してください…

各階層の画像サイズは階層毎にお好きなサイズで統一してください…

当サイトのタブメニュー画像の1階層目は…

カテゴリー別に「80 x 30」で…

「マウス ON 時の画像」「マウス OFF 時の画像」を登録しています…

タブメニュー画像の2階層目以降はページ読み込み時には非表示部分で…

透過を使ってマウスの「ON / OFF」を表現していますので…

「90 x 20」の１種類だけで OK です…画像作成には…

「OS」標準のソフトや「GIMP」などのフリーソフトでも勿論良いですが…

特化した機能のフリーソフトが手早く作れてお便利です…

「logo 画像作成」などで検索すれば色々出てきます…

タブメニューの画像サイズは自由に設定出来ますから…

近頃よく見かける「3D & 鏡面反射」などでも簡単に作成出来ますので…

クールな目立つタブメニューにしたい方は…

チャレンジしてみてはいかがでしょう…

自分のイメージ通りのサイトに仕上げるためにも…

この際だからロゴ画像とタブメニュー画像を…

ヘッダーを含めてデザイン、レイアウトする事をお奨めします…

コンテナのマークアップ

先ずは「header-wrapper」から「crosscol-wrapper」について…

デザインの基本設定を… 当サイトのように…

ヘッダーに融合させるのか…

それとも…大き目な画像で「crosscol-wrapper」の領域一杯を使うのかを決めます…

後者の場合は以下の基本設定は必要ありません…

1ページ目の下準備ガジェットを表示させながら…

上記画像を参考に…ご自身のサイトに合わせて調整してください…

「デザイン」「HTMLの編集」で「CSS」に以下を記述します…

領域設定の「CSS」

/* header-wrapper
-------------------------------------------------- */
#header-wrapper{background:#222;width:770px;margin:0 auto;border-top:1px solid #4d4845;border-right:2px solid #c0c0c0;border-left:1px solid #4d4845;-moz-border-radius:6px 6px 0 0;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;-goog-ms-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;}
/* crosscol-wrapper
-------------------------------------------------- */
#crosscol-wrapper{background:#222;width:770px;margin:0 auto;border-right:2px solid #c0c0c0;border-left:1px solid #4d4845;-moz-border-radius:0 0 6px 6px;-webkit-border-bottom-left-radius:6px;-webkit-border-bottom-right-radius:6px;-goog-ms-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;overflow:hidden;}
/* header
-------------------------------------------------- */
#header{background:#111 url(鉛筆画像のURL) no-repeat 220px 96px;margin:0 10px;height:115px;border-right:2px solid #c0c0c0;border-bottom:2px solid #c0c0c0;border-left:1px solid #4d4845;text-align:left;-moz-border-radius:0 0 6px 6px;-webkit-border-bottom-left-radius:6px;-webkit-border-bottom-right-radius:6px;-goog-ms-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;}
#header-inner{position:absolute;top:90px;left:145px;}
#header h1{margin:0;padding:5px 0 .25em 1em;line-height:1.2;text-transform:none;color:#f15b55;font-size:14px;font-weight:bold;font-style:italic;}
h1 a:link,
h1 a:visited{color:#4169e1;text-decoration:none;}
h1 a:hover{color:#8ac75a;}
#header .description{margin:0;padding:0 2em 2em;max-width:700px;text-transform:none;letter-spacing:.1em;line-height:1.1;color:#c0c0c0;font-size:10px;font-weight:normal;font-style:italic;}

「プレビュー」で確認しながら納得のスタイルになったら…

1ページ目の下準備での「#container1」の「CSS」は…

「Home」でのコンテナとして使いますので…

ご自身の「Home」のテーマカラーに「#F15B55」部分を変更してください…

カテゴリー別に必要な数だけ「#container2」「#container3」……

コンテナを追加します…

タブメニューの１階層目以外のページ用に「#container0」も追加します…

全てのページで同じタブメニューでイイや…

ってな方は「#container0」だけで OK です…

当サイトでは…下記の様になります…

コンテナの「CSS」

/* Container
-------------------------------------------------- */
#container0{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #C0C0C0 solid;}
#container1{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #F15B55 solid;}
#container2{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #1E90FF solid;}
#container3{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #7777FF solid;}
#container4{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #2E8B57 solid;}
#container5{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #4169E1 solid;}
#container6{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #8AC75A solid;}
#container7{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #008080 solid;}
#container8{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #20B2AA solid;}
#container9{width:770px;margin:15px auto 0;padding-left:25px;text-align:left;border-bottom:2px #BDB76B solid;}

コンテナ毎にガジェットが必要になります…

尚…「border-bottom」は「JavaScript」で動的に生成しています…

 「jQuery」「jQuery UI」第６回「Progressbar」動きのあるカラフルな区切り線として使用

タブメニューの「CSS」

下記は 当サイトでの記述ですので…

ご自身のこれまでの設定に合わせて適宜書き換えてください…

実際の記述にコメントアウト形式で解説をしていきますが…

完成したらコメントアウトや余分な改行などは削除してください…

タブメニューの「CSS」「CSS Sprites」

/* Tab Navigation
-------------------------------------------------- */
/* 全体 80 x 9カテゴリーですので…720pxです… */
#tab1{list-style-type:none;width:720px;height:30px;margin:0;padding:0;}

/* 1階層目個別画像サイズ */
#tab1 li{float:left;width:80px;height:30px;}

/* CSS Sprites ルール設定 */
.id0,.id3,.id7,.id8,.id9,.id10,.id11,.id12,.id13,.id14,.id19,.id20,.id26,.id27,.id31,.id32,.id53,.id54,.id72,.id83,.id84,.id85,.id86,.id87,.id88,.id89,.id90,.id91,.id92,.id93,.id94,.id95,.id96,.id97,.id98,.id99,.id100{background-image:url(CSS Sprites 画像のURL);background-repeat:no-repeat;display:inline-block}
.id0{width:80px;height:30px;background-position:-730px top}.id3{width:80px;height:30px;background-position:-650px top}.id7{width:80px;height:30px;background-position:-730px -30px}.id8{width:80px;height:30px;background-position:-650px -30px}.id9{width:80px;height:30px;background-position:-650px -60px}.id10{width:80px;height:30px;background-position:-730px -60px}.id11{width:80px;height:30px;background-position:-730px -90px}.id12{width:80px;height:30px;background-position:-650px -90px}.id13{width:80px;height:30px;background-position:-650px -120px}.id14{width:80px;height:30px;background-position:-730px -120px}.id19{width:80px;height:30px;background-position:-730px -150px}.id20{width:80px;height:30px;background-position:-650px -150px}.id26{width:80px;height:30px;background-position:-650px -180px}.id27{width:80px;height:30px;background-position:-730px -180px}.id31{width:80px;height:30px;background-position:-730px -210px}.id32{width:80px;height:30px;background-position:-650px -210px}.id53{width:80px;height:30px;background-position:-730px -240px}.id54{width:80px;height:30px;background-position:-650px -240px}.id72{width:90px;height:20px;background-position:left -320px}.id83{width:90px;height:20px;background-position:-450px -400px}.id84{width:90px;height:20px;background-position:-360px -400px}.id85{width:90px;height:20px;background-position:-630px -400px}.id86{width:90px;height:20px;background-position:-540px -400px}.id87{width:90px;height:20px;background-position:-270px -400px}.id88{width:90px;height:20px;background-position:-720px -400px}.id89{width:90px;height:20px;background-position:-180px -400px}.id90{width:90px;height:20px;background-position:left -400px}.id91{width:90px;height:20px;background-position:-90px -400px}.id92{width:90px;height:20px;background-position:-720px -420px}.id93{width:90px;height:20px;background-position:-360px -420px}.id94{width:90px;height:20px;background-position:-270px -420px}.id95{width:90px;height:20px;background-position:-180px -420px}.id96{width:90px;height:20px;background-position:-450px -420px}.id97{width:90px;height:20px;background-position:-90px -420px}.id98{width:90px;height:20px;background-position:-540px -420px}.id99{width:90px;height:20px;background-position:-630px -420px}.id100{width:90px;height:20px;background-position:left -420px}

/* CSS Sprites ロールオーバー設定
クラス名はマウス OFF 時、ポジションはマウス ON 時で指定…
#selected で指定ページが表示された場合もロールオーバーさせます… */
a:hover .id3,#selected a .id3{background-position:-730px top;} /* 該当箇所 Home */
a:hover .id8,#selected a .id8{background-position:-730px -30px;} /* 該当箇所 BLOG */
a:hover .id9,#selected a .id9{background-position:-730px -60px;} /* 該当箇所 Labs */
a:hover .id12,#selected a .id12{background-position:-730px -90px;} /* 該当箇所 Blogger */
a:hover .id13,#selected a .id13{background-position:-730px -120px;} /* 該当箇所 Design */
a:hover .id20,#selected a .id20{background-position:-730px -150px;} /* 該当箇所 Video */
a:hover .id26,#selected a .id26{background-position:-730px -180px;} /* 該当箇所 Music */
a:hover .id32,#selected a .id32{background-position:-730px -210px;} /* 該当箇所 Omikuji */
a:hover .id54,#selected a .id54{background-position:-730px -240px;} /* 該当箇所 Site Map */

/* 2階層目、3階層目のメニュー全体 */
.hiddenmenus ul{list-style:none;margin:0;padding:0;font-size:90%;}

/* テキスト中央揃えは「Hide Menu ボタン」用です… */
.hiddenmenus li{border:none;text-align:center;}

/* 2階層目、3階層目のマウス ON 時に画像を 40% 透過させて hover を表現します… */
.hiddenmenus li a:hover span{opacity:.6;-moz-opacity:.6;filter:alpha(opacity=60);-ms-filter:"alpha(opacity=60)";}

/* 2階層目、3階層目の画像を下揃え… */
.hiddenmenus span{border:none;vertical-align:text-bottom;}

/* 2階層目のメニューの表示位置と重なり
ここでの背景色は2階層目のマウス ON 時に上記透過設定で浮き出ます… */
#subMenu01{position:absolute;top:196px;left:240px;visibility:hidden;z-index:100;background-color:#222;} /* 該当箇所 BLOG の2階層目 */
#subMenu02{position:absolute;top:196px;left:320px;visibility:hidden;z-index:100;background-color:#222;} /* 該当箇所 Labs の2階層目 */
#subMenu03{position:absolute;top:196px;left:400px;visibility:hidden;z-index:100;background-color:#222;} /* 該当箇所 Blogger の2階層目 */
#subMenu04{position:absolute;top:196px;left:480px;visibility:hidden;z-index:100;background-color:#222;} /* 該当箇所 Design の2階層目 */
#subMenu05{position:absolute;top:196px;left:560px;visibility:hidden;z-index:100;background-color:#222;} /* 該当箇所 Video の2階層目 */
#subMenu06{position:absolute;top:196px;left:640px;visibility:hidden;z-index:100;background-color:#222;} /* 該当箇所 Music の2階層目 */

/* 2階層目表示時に3階層目が有るメニューの場合に透過させる背景色…
カテゴリーのテーマカラーを使用… */
#subMenu01 .hiddenChild{background-color:#1e90ff;} /* 該当箇所無し BLOG の2階層目 */
#subMenu02 .hiddenChild{background-color:#77f;} /* 該当箇所無し Labs の2階層目 */
#subMenu03 .hiddenChild{background-color:#2e8b57;} /* 該当箇所無し Blogger の2階層目 */
#subMenu04 .hiddenChild{background-color:#4169e1;} /* 該当箇所無し Design の2階層目 */
#subMenu05 .hiddenChild{background-color:#8ac75a;} /* 該当箇所 Video の「Selection」 */
#subMenu06 .hiddenChild{background-color:#008080;} /* 該当箇所 Music の「Selection」 */

/* 3階層目が有るメニューの マウス ON 時の透過させる背景色… */
#subMenu01 .hiddenChild:hover,
#subMenu02 .hiddenChild:hover,
#subMenu03 .hiddenChild:hover,
#subMenu04 .hiddenChild:hover,
#subMenu05 .hiddenChild:hover,
#subMenu06 .hiddenChild:hover{background-color:#222;}

/* 3階層目が有るメニューの マウス ON 時の透過設定… */
.hiddenChild span{opacity:.6;-moz-opacity:.6;filter:alpha(opacity=60);-ms-filter:"alpha(opacity=60)";}

/* 3階層目の表示位置、重なり、透過背景色…
Video と Music カテゴリーの「Selection」の子要素が該当箇所です… */
#endMenu01{position:absolute;top:201px;left:650px;visibility:hidden;z-index:100;background-color:#222;}
#endMenu02{position:absolute;top:201px;left:730px;visibility:hidden;z-index:100;background-color:#222;}

2012.05.01 追記

「id」の「selector」は…
解りやすくするために「subMenu」「endMenu」としていましたが…
ガジェットなどのデザイン変更による仕様変更があったのでしょうか
今回…サイトデザインの変更を行ったら動作しなくなりました…
大文字と小文字が混在しているとガジェットを保存すると…
全て小文字に変換されてしまいます…なので…
「submenu」「endmenu」と…上記コードを書き換えてご使用下さい…

同様の手順で 4階層目以降も作れますが HTML のマークアップとも相まって…

作業がかなり煩雑になりタイプミスなども増えるでしょうから…

先ずは横幅を一杯に使うのが得策かと…

尚…「subMenu」と「endMenu」は将来追加する事を考慮して…

全て記述しておくのも良いでしょう…

HTML マークアップ

先ずは以下を参照して…

1階層目のカテゴリー用 + それ以外のページ用のガジェットとして…

「デザイン」から「crosscol-wrapper」に…

「HTML/Java Script」ガジェットを追加します…

当サイトの場合は…

「9」+「1」で10個のガジェットになります…

判別し易いようにタイトルを付与して…中身はとりあえず「Test」で OK です…

 BloggerでGadgetにTitleを付与したうえでタイトルを表示させない記述


次に「デザイン」「HTMLの編集」「ウィジェットのテンプレートを展開」で…

今追加したガジェットを「Ctrl + F」でタイトルから検索して…

ガジェットを個別ページにのみ「表示させる」設定を行います…

 Bloggerでガジェットをトップ・ページにだけ表示する記述


例えば「Home」カテゴリーならこんな感じ…

個別ページにのみ「表示させる」設定

<b:widget id='HTML6' locked='false' title='Tab Home' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;「Home」のURL&quot;'>
<div class='widget-content'>
<data:content/>
</div>

</b:if>
</b:includable>
</b:widget>

「それ以外のページ用のガジェット」は…

ガジェットを個別ページにのみ「表示させない」設定を行います…

1階層目のカテゴリーページ以外で表示されるように設定…こんな感じ…

個別ページにのみ「表示させない」設定

<b:widget id='HTML5' locked='false' title='Tab notCategory' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != &quot;「Home」のURL&quot;'>
<b:if cond='data:blog.url != &quot;「BLOG」のURL&quot;'>
<b:if cond='data:blog.url != &quot;「Labs」のURL&quot;'>
<b:if cond='data:blog.url != &quot;「Blogger」のURL&quot;'>
<b:if cond='data:blog.url != &quot;「Design」のURL&quot;'>
<b:if cond='data:blog.url != &quot;「Video」のURL&quot;'>
<b:if cond='data:blog.url != &quot;「Music」のURL&quot;'>
<b:if cond='data:blog.url != &quot;「Omikuji」のURL&quot;'>
<b:if cond='data:blog.url != &quot;「Site Map」のURL&quot;'>
<div class='widget-content'>
<data:content/>
</div>

</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
</b:widget>

「全てのページで同じタブメニュー」にした方は…

3行目と8行目を削除したうえで…このガジェットだけで OK です…

続いてガジェットの中身です…

「CSS Sprites」で設定した各画像は…

「span」タグを使ってこんな感じにマークアップします…

<span class="「Home」マウス OFF 時のクラス名" title="Home"></span>

そして以下は「Home」での設定ですが…ご自身の設定に適宜書き換え…

対応するガジェットに貼りつけてください…

「Home」以外のガジェットの場合は…赤文字の2箇所だけ変更してください…

「コンテナの番号」は「container2」「container3」…ってな感じに…

設定した番号を割り振ってください…

「id="selected"」はページ表示時に…

マウス ON 時の画像にロールオーバーさせるための記述ですので…

ガジェットによって対応する「li」箇所に記述してください…

「container0」の場合だけ記述の必要はありません…

「Home」ガジェットの中身

<div id="container1" align="center">
<ul id="tab1">
<li id="selected"><a href="Home の URL"
onmouseover="CloseMenu('subMenu01');
CloseMenu('subMenu02');
CloseMenu('subMenu03');
CloseMenu('subMenu04');
CloseMenu('subMenu05');
CloseMenu('subMenu06');"><span class="Home 画像 マウス OFF 時のクラス名" title="Home"></span></a></li>
<li><a href="BLOG の URL"
onmouseover="OpenMenu('subMenu01');
CloseMenu('subMenu02');
CloseMenu('subMenu03');
CloseMenu('subMenu04');
CloseMenu('subMenu05');
CloseMenu('subMenu06');"><span class="BLOG 画像 マウス OFF 時のクラス名" title="BLOG"></span></a></li>
<li><a href="Labs の URL"
onmouseover="CloseMenu('subMenu01');
OpenMenu('subMenu02');
CloseMenu('subMenu03');
CloseMenu('subMenu04');
CloseMenu('subMenu05');
CloseMenu('subMenu06');"><span class="Labs 画像 マウス OFF 時のクラス名" title="Labs"></span></a></li>
<li><a href="Blogger の URL"
onmouseover="CloseMenu('subMenu01');
CloseMenu('subMenu02');
OpenMenu('subMenu03');
CloseMenu('subMenu04');
CloseMenu('subMenu05');
CloseMenu('subMenu06');"><span class="Blogger 画像 マウス OFF 時のクラス名" title="Blogger"></span></a></li>
<li><a href="Design の URL"
onmouseover="CloseMenu('subMenu01');
CloseMenu('subMenu02');
CloseMenu('subMenu03');
OpenMenu('subMenu04');
CloseMenu('subMenu05');
CloseMenu('subMenu06');"><span class="Design 画像 マウス OFF 時のクラス名" title="Design"></span></a></li>
<li><a href="Video の URL"
onmouseover="CloseMenu('subMenu01');
CloseMenu('subMenu02');
CloseMenu('subMenu03');
CloseMenu('subMenu04');
OpenMenu('subMenu05');
CloseMenu('subMenu06');"><span class="Video 画像 マウス OFF 時のクラス名" title="Video"></span></a></li>
<li><a href="Music の URL"
onmouseover="CloseMenu('subMenu01');
CloseMenu('subMenu02');
CloseMenu('subMenu03');
CloseMenu('subMenu04');
CloseMenu('subMenu05');
OpenMenu('subMenu06');"><span class="Music 画像 マウス OFF 時のクラス名" title="Music"></span></a></li>
<li><a href="Omikuji の URL"
onmouseover="CloseMenu('subMenu01');
CloseMenu('subMenu02');
CloseMenu('subMenu03');
CloseMenu('subMenu04');
CloseMenu('subMenu05');
CloseMenu('subMenu06');"><span class="Omikuji 画像 マウス OFF 時のクラス名" title="Omikuji"></span></a></li>
<li><a href="Site Map の URL"
onmouseover="CloseMenu('subMenu01');
CloseMenu('subMenu02');
CloseMenu('subMenu03');
CloseMenu('subMenu04');
CloseMenu('subMenu05');
CloseMenu('subMenu06');"><span class="Site Map 画像 マウス OFF 時のクラス名" title="Site Map"></span></a></li>
</ul>
</div>

<div class="hiddenmenus">
<div id="subMenu01">
<ul>
<li><a href="2階層目 Pottering URL"><span class="画像のクラス名" title="sub pottering"></span></a></li>
<li><a href="2階層目 Blog URL"><span class="画像のクラス名" title="sub blog"></span></a></li>
<li><input type="button" value="Hide Menu" onclick="CloseMenu('subMenu01');" /></li>
</ul>
</div>
<div id="subMenu02">
<ul>
<li><a href="2階層目 Browser URL"><span class="画像のクラス名" title="sub browser"></span></a></li>
<li><a href="2階層目 Laboratory URL"><span class="画像のクラス名" title="sub laboratory"></span></a></li>
<li><input type="button" value="Hide Menu" onclick="CloseMenu('subMenu02');" /></li>
</ul>
</div>
<div id="subMenu03">
<ul>
<li><a href="2階層目 Tips URL"><span class="画像のクラス名" title="sub tips"></span></a></li>
<li><a href="2階層目 Customize URL"><span class="画像のクラス名" title="sub customize"></span></a></li>
<li><input type="button" value="Hide Menu" onclick="CloseMenu('subMenu03');" /></li>
</ul>
</div>
<div id="subMenu04">
<ul>
<li><a href="2階層目 jQuery URL"><span class="画像のクラス名" title="sub jQuery"></span></a></li>
<li><a href="2階層目 Java Script URL"><span class="画像のクラス名" title="sub JavaScript"></span></a></li>
<li><input type="button" value="Hide Menu" onclick="CloseMenu('subMenu04');" /></li>
</ul>
</div>
<div id="subMenu05">
<ul>
<li class="hiddenChild"><a href="2階層目 Video Selection URL" onmouseover="OpenMenu('endMenu01');
CloseMenu('endMenu02');"><span class="画像のクラス名" title="sub selection video"></span></a></li>
<li><a href="2階層目 Video J-Pops Woman URL" onmouseover="CloseMenu('endMenu01');
CloseMenu('endMenu02');"><span class="画像のクラス名" title="sub jpw video"></span></a></li>
<li><a href="2階層目 Video J-Pops Man URL" onmouseover="CloseMenu('endMenu01');
CloseMenu('endMenu02');"><span class="画像のクラス名" title="sub jpm video"></span></a></li>
<li><a href="2階層目 Video Pops Woman URL" onmouseover="CloseMenu('endMenu01');
CloseMenu('endMenu02');"><span class="画像のクラス名" title="sub pw video"></span></a></li>
<li><a href="2階層目 Video Pops Man URL" onmouseover="CloseMenu('endMenu01');
CloseMenu('endMenu02');"><span class="画像のクラス名" title="sub pm video"></span></a></li>
<li><a href="2階層目 Video Other Files URL" onmouseover="CloseMenu('endMenu01');
CloseMenu('endMenu02');"><span class="画像のクラス名" title="sub other video"></span></a></li>
<li><input type="button" value="Hide Menu" onclick="CloseMenu('subMenu05');" /></li>
</ul>
</div>
<div id="subMenu06">
<ul>
<li class="hiddenChild"><a href="2階層目 Music Selection URL" onmouseover="CloseMenu('endMenu01');
OpenMenu('endMenu02');"><span class="画像のクラス名" title="sub selection music"></span></a></li>
<li><a href="2階層目 Music J-Pops Woman URL" onmouseover="CloseMenu('endMenu01');
CloseMenu('endMenu02');"><span class="画像のクラス名" title="sub jpw music"></span></a></li>
<li><a href="2階層目 Music J-Pops Man URL" onmouseover="CloseMenu('endMenu01');
CloseMenu('endMenu02');"><span class="画像のクラス名" title="sub jpm music"></span></a></li>
<li><a href="2階層目 Music Pops Woman URL" onmouseover="CloseMenu('endMenu01');
CloseMenu('endMenu02');"><span class="画像のクラス名" title="sub pw music"></span></a></li>
<li><a href="2階層目 Music Pops Man URL" onmouseover="CloseMenu('endMenu01');
CloseMenu('endMenu02');"><span class="画像のクラス名" title="sub pm music"></span></a></li>
<li><input type="button" value="Hide Menu" onclick="CloseMenu('subMenu06');" /></li>
</ul>
</div>
<ul id="endMenu01">
<li><a href="3階層目 Video J-Pops Woman URL"><span class="画像のクラス名" title="end jpw video"></span></a></li>
<li><a href="3階層目 Video J-Pops Man URL"><span class="画像のクラス名" title="end jpm video"></span></a></li>
<li><a href="3階層目 Video Pops Woman URL"><span class="画像のクラス名" title="end pw video"></span></a></li>
<li><a href="3階層目 Video Pops Man URL"><span class="画像のクラス名" title="end pm video"></span></a></li>
<li><input type="button" value="Hide Menu" onclick="CloseMenu('endMenu01');" /></li>
</ul>
<ul id="endMenu02">
<li><a href="3階層目 Music J-Pops Woman URL"><span class="画像のクラス名" title="end jpw music"></span></a></li>
<li><a href="3階層目 Music J-Pops Man URL"><span class="画像のクラス名" title="end jpm music"></span></a></li>
<li><a href="3階層目 Music Pops Woman URL"><span class="画像のクラス名" title="end pw music"></span></a></li>
<li><a href="3階層目 Music Pops Man URL"><span class="画像のクラス名" title="end pm music"></span></a></li>
<li><input type="button" value="Hide Menu" onclick="CloseMenu('endMenu02');" /></li>
</ul>
</div>

2012.05.01 追記

「id」の「selector」は…「subMenu」「endMenu」から…
「submenu」「endmenu」と…上記コードを書き換えてご使用下さい…

最後は「</body>」直前に以下の「JavaScript」を記述…

「JavaScript」

<!-- for Tab1 -->
<script type='text/javascript'>function OpenMenu(a){document.getElementById(a).style.visibility="visible"}function CloseMenu(a){document.getElementById(a).style.visibility="hidden"};</script>

「テンプレートを保存」して完了です…大変お疲れ様でした…

こちらの記事もどうぞ…

 jQuery UI Extra-1 : 「Menu」part2 マウスホバーでフライアウトする横型ナビゲーション

 「onmouseover」「onmouseout」属性で構築する多階層のドロップダウンナビゲーション

Tips Universal Sidebar Main Footer Current-Label : Header