Page 1 of 5 概要＆下準備編
Sepia Memories on YouTube
…のタブ ナビゲーションは…
「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'> <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 でタブメニューの画像を設定します…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿