タブメニュー。

プロフィールチャンネル用に。
しかし、クリックの必要があるため微妙な面も。


12345

1
2
3
4
5



参照サイト:All About(ページ移動せずに内容を変更するタブを作る方法)
CSSのみ変更。

おなじみ「position」を使用してペコペコ動きます
背景「#fff」のため手抜き部分が多く、色有りの場合はもう少し記述が必要。
/* 表示領域全体 */
div.tabbox { margin: 0px; padding: 0px; width: 400px; }

/* タブ部分 */
p.tabs { margin: 0px; padding: 0px; }
p.tabs a {
    display: block; width: 4em; float: left;
    margin: 0 5px 5px 0;
    padding: 3px 10px 5px;
    text-align: center;
    text-decoration: none;
}
p.tabs a.tab1 { border-top: 5px #2384dc solid; }
p.tabs a.tab2 { border-top: 5px #4cbb47 solid; }
p.tabs a.tab3 { border-top: 5px #dd1d25 solid; }    
p.tabs a.tab4 { border-top: 5px #FF9900 solid; }
シンプルに上部に5pxの実線。(※3pxイメージ)
クリックした中身が分かるように[タブ中身]と色を合わせて。
「クリックしたタブの色を変化させる方法」でも。
p.tabs a:hover { position: relative; top: 2px; }
p.tabs a:active { position: relative; top: 3px; }
マウスオーバーで2px下へ。
クリックで3px下へ。

/* タブ中身 */
div.tab { overflow: auto; clear: left; }
div#tab1 {border-top: 5px solid #2384dc;}
div#tab2 {border-top: 5px solid #4cbb47;}
div#tab3 {border-top: 5px solid #dd1d25;}
div#tab4 {border-top: 5px solid #FF9900;}
div.tab p { margin: 2px 0px; }


「transition効果」追加。コンマ2秒でうっすら。
transition: all cubic-bezier(.215,.61,.355,1).2s;


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)



    最新記事