タブメニューの作り方　素材　HTML　パーツ　画像ボタンで切り替え

グローバルメニューじゃなくて、トップﾍﾟｰｼﾞとかの途中に、キャンペーンや、切り替えで表示させたいときの部品的なタブメニューのパーツ素材を差し上げます！

画像を変えたり、CSSで大きさを変更すれば、オリジナルのタブメニューに簡単に作りかえられます。

■HTML部分

———————————————————————————–

———————————————————————————–

■CSS部分　その１(tab_boox.css)
———————————————————————————–
#tab_box {
width: 889px;
margin-right: auto;
margin-left: auto;
height: 273px;
overflow: hidden;
}
.btn_tab {
overflow: hidden;
}

.btn_tab li{
height:44px;
float:left;
}
/* clearfix */
.cf{ /zoom : 1;}
.cf:after{ content : ”; display : block; clear : both; height:0; }

———————————————————————————–

■CSS部分　その２(reset.css）リセットは別に自分のお好きなのでどうぞ！
———————————————————————————–
@charset “utf-8″;
/* ===================================================================
CSS information
file name : reset.css
style info : リセット及びbody初期設定 (このスタイルシートは基本的に変更しない)
=================================================================== */
/*— reset */
html {
overflow-y: scroll;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,th {
text-align: left;
}
q:before,q:after {
content: ”;
}
object,
embed {
vertical-align: top;
}
hr,legend {
display: none;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight:normal;
}
img,abbr,acronym,fieldset {
border: 1;
}
li {
list-style-type: none;
vertical-align:bottom;
}
strong{
font-weight:normal;
}

body {
font:13px “メイリオ”,”Meiryo”,”ＭＳ Ｐゴシック”,”MS PGOTHIC”,sans-serif;
*font-size:small;
*font:x-small;
}
table {
font-size:inherit;
font:100%;
}
img{border:0;}

———————————————————————————–

■Jquery部分
——————————————————————————-
/* クリックしたときに出る点線を防ぐ（IE対策）*/
$(function(){
$(“ul.btn_tab li a”).focus(function(){
$(this).blur();
});
})

/* タブボタンのon/offとタブの内容を切り替える */
$(function(){

/* 初期設定 */
$(“a.selected img”).attr(“src”,$(“a.selected img”).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″));
$(“.container_tab div:not(“+$(“ul.btn_tab li a.selected”).attr(“href”)+”)”).hide();

/* クリック時の処理 */
$(“ul.btn_tab li a”).click(function(){

// 今のul.btn_tab li a.selectedのhrefの値を保持しておく
var name1=$(“ul.btn_tab li a.selected”).attr(“href”);

$(“a.selected img”).attr(“src”,$(“a.selected img”).attr(“src”).replace(/^(.+)_on(\.[a-z]+)$/,”$1$2″));
$(“ul.btn_tab li a”).removeClass(“selected”);
$(this).addClass(“selected”);

/* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。
なので、今付いている_onをいったん削除してから再度_onを付け直す */
$(“img”,this).attr(“src”,$(“img”,this).attr(“src”).replace(/^(.+)_on(\.[a-z]+)$/,”$1$2″));
$(“img”,this).attr(“src”,$(“img”,this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″));
$(name1).hide();

// クリックされたul.btn_tab li a.selectedのhrefの値を保持
var name2=$(“ul.btn_tab li a.selected”).attr(“href”);
$(name2).show();
return false;

})
})

/* マウスオーバー時の処理 */
$(function(){
$(“ul.btn_tab a”).mouseover(function(){

/* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。
マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */
var className = $(this).attr(‘class’);
if(className!=’selected’){
$(“img”,this).attr(“src”,$(“img”,this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/, “$1_on$2”))
}
}).mouseout(function(){
var className2 = $(this).attr(‘class’);
if(className2!=’selected’){
$(“img”,this).attr(“src”,$(“img”,this).attr(“src”).replace(/^(.+)_on(\.[a-z]+)$/,”$1$2″))
}
})
})

——————————————————————————————————————-