最終更新:
handmade_pika 2011年06月23日(木) 09:36:37履歴
タブで形式のヘッダーメニューの作り方の例です。
タブを切り替えて今どのページを見ているのか分かりやすくします。
通常時は薄い色、マウスオーバーで濃い色になるよう画像を2種類用意します。
通常時![](https://image01.seesaawiki.jp/h/a/handmade_pika/2dbbd66934be3b44.jpg)
マウスを乗せると![](https://image02.seesaawiki.jp/h/a/handmade_pika/d0eb272c1d578597.jpg)
HTML
練習用にどうぞ
![](https://image02.seesaawiki.jp/h/a/handmade_pika/096a63ad11449322.gif)
![](https://image02.seesaawiki.jp/h/a/handmade_pika/63725d49aec8a3f5.gif)
タブを切り替えて今どのページを見ているのか分かりやすくします。
通常時は薄い色、マウスオーバーで濃い色になるよう画像を2種類用意します。
通常時
![](https://image01.seesaawiki.jp/h/a/handmade_pika/2dbbd66934be3b44.jpg)
マウスを乗せると
![](https://image02.seesaawiki.jp/h/a/handmade_pika/d0eb272c1d578597.jpg)
/*タブ風切り替え***************/ div#tab-box{width:514px; clear:both;} /*左***************************/ div#tab-box div.menu1{float:right; margin:0 0 0 2px;} div#tab-box div.menu1 a{ display:block; background: url(../img/○○.gif) no-repeat; width:152px; height:43px; text-indent:-9999px; } div#tab-box div.menu1 a.here, div#tab-box div.menu1 a:hover{ background: url(../img/○○_here.gif) no-repeat; width:152px; height:43px; text-indent:-9999px; } /*中***************************/ div#tab-box div.menu2{float:right; margin:0 0 0 2px;} div#tab-box div.menu2 a{ display:block; background: url(../img/○○_btn.gif) no-repeat; width:152px; height:43px; text-indent:-9999px; } div#tab-box div.menu2 a.here, div#tab-box div.menu2 a:hover{ background: url(../img/○○_here.gif) no-repeat; width:152px; height:43px; text-indent:-9999px; } /*右***************************/ div#tab-box div.menu3{float:right; margin:0 0 0 2px;} div#tab-box div.menu3 a{ display:block; background: url(../img/○○.gif) no-repeat; width:152px; height:43px; text-indent:-9999px; } div#tab-box div.menu3 a.here, div#tab-box div.menu3 a:hover{ background: url(../img/○○_here.gif) no-repeat; width:152px; height:43px; text-indent:-9999px; }
HTML
<div id="tab-box"> <div class="menu1"> <a href="○○.html#tab" class="here">左</a> </div> <div class="menu2"> <a href="○○.html#tab">中</a> </div> <div class="menu3"> <a href="○○.html#tab">右</a> </div> </div>
練習用にどうぞ
![](https://image02.seesaawiki.jp/h/a/handmade_pika/a3fd56c82f77f7e6.gif)
![](https://image02.seesaawiki.jp/h/a/handmade_pika/096a63ad11449322.gif)
![](https://image02.seesaawiki.jp/h/a/handmade_pika/19b747b76032889d.gif)
![](https://image02.seesaawiki.jp/h/a/handmade_pika/63725d49aec8a3f5.gif)
![](https://image01.seesaawiki.jp/h/a/handmade_pika/e2768ae3cc8b95b5.gif)
![](https://image01.seesaawiki.jp/h/a/handmade_pika/4ae3128f4b5d83e7.gif)
タグ
コメントをかく