Page 4 of 5 CSS タブメニューのマークアップ編
下記は…
Sepia Memories on YouTube
…での記述ですので…
ご自身のこれまでの設定に合わせて適宜書き換えてください…
実際の記述にコメントアウト形式で解説をしていきますが…
完成したらコメントアウトや余分な改行などは削除してください…
/* 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)} .id0{width:80px;height:30px;background-position:-730px top;background-repeat:no-repeat;display:inline-block}.id3{width:80px;height:30px;background-position:-650px top;background-repeat:no-repeat;display:inline-block}.id7{width:80px;height:30px;background-position:-730px -30px;background-repeat:no-repeat;display:inline-block}.id8{width:80px;height:30px;background-position:-650px -30px;background-repeat:no-repeat;display:inline-block}.id9{width:80px;height:30px;background-position:-650px -60px;background-repeat:no-repeat;display:inline-block}.id10{width:80px;height:30px;background-position:-730px -60px;background-repeat:no-repeat;display:inline-block}.id11{width:80px;height:30px;background-position:-730px -90px;background-repeat:no-repeat;display:inline-block}.id12{width:80px;height:30px;background-position:-650px -90px;background-repeat:no-repeat;display:inline-block}.id13{width:80px;height:30px;background-position:-650px -120px;background-repeat:no-repeat;display:inline-block}.id14{width:80px;height:30px;background-position:-730px -120px;background-repeat:no-repeat;display:inline-block}.id19{width:80px;height:30px;background-position:-730px -150px;background-repeat:no-repeat;display:inline-block}.id20{width:80px;height:30px;background-position:-650px -150px;background-repeat:no-repeat;display:inline-block}.id26{width:80px;height:30px;background-position:-650px -180px;background-repeat:no-repeat;display:inline-block}.id27{width:80px;height:30px;background-position:-730px -180px;background-repeat:no-repeat;display:inline-block}.id31{width:80px;height:30px;background-position:-730px -210px;background-repeat:no-repeat;display:inline-block}.id32{width:80px;height:30px;background-position:-650px -210px;background-repeat:no-repeat;display:inline-block}.id53{width:80px;height:30px;background-position:-730px -240px;background-repeat:no-repeat;display:inline-block}.id54{width:80px;height:30px;background-position:-650px -240px;background-repeat:no-repeat;display:inline-block}.id72{width:90px;height:20px;background-position:left -320px;background-repeat:no-repeat;display:inline-block}.id83{width:90px;height:20px;background-position:-450px -400px;background-repeat:no-repeat;display:inline-block}.id84{width:90px;height:20px;background-position:-360px -400px;background-repeat:no-repeat;display:inline-block}.id85{width:90px;height:20px;background-position:-630px -400px;background-repeat:no-repeat;display:inline-block}.id86{width:90px;height:20px;background-position:-540px -400px;background-repeat:no-repeat;display:inline-block}.id87{width:90px;height:20px;background-position:-270px -400px;background-repeat:no-repeat;display:inline-block}.id88{width:90px;height:20px;background-position:-720px -400px;background-repeat:no-repeat;display:inline-block}.id89{width:90px;height:20px;background-position:-180px -400px;background-repeat:no-repeat;display:inline-block}.id90{width:90px;height:20px;background-position:left -400px;background-repeat:no-repeat;display:inline-block}.id91{width:90px;height:20px;background-position:-90px -400px;background-repeat:no-repeat;display:inline-block}.id92{width:90px;height:20px;background-position:-720px -420px;background-repeat:no-repeat;display:inline-block}.id93{width:90px;height:20px;background-position:-360px -420px;background-repeat:no-repeat;display:inline-block}.id94{width:90px;height:20px;background-position:-270px -420px;background-repeat:no-repeat;display:inline-block}.id95{width:90px;height:20px;background-position:-180px -420px;background-repeat:no-repeat;display:inline-block}.id96{width:90px;height:20px;background-position:-450px -420px;background-repeat:no-repeat;display:inline-block}.id97{width:90px;height:20px;background-position:-90px -420px;background-repeat:no-repeat;display:inline-block}.id98{width:90px;height:20px;background-position:-540px -420px;background-repeat:no-repeat;display:inline-block}.id99{width:90px;height:20px;background-position:-630px -420px;background-repeat:no-repeat;display:inline-block}.id100{width:90px;height:20px;background-position:left -420px;background-repeat:no-repeat;display:inline-block} /* 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 のマークアップについてです…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿