ネットショップ陳列に便利なタブ表示(CSS,HTML)

公開日:  最終更新日:2014/10/13

ネットショップ陳列に便利なタブ表示(CSS,HTML)
ネットショップ等で、限られた範囲に表示する時に便利なタブ表示

↓↓↓がサンプル

スポンサードリンク

Javascript等は使わずにcssのみで可能
HTMLの記述

  • タブ1に表示する内容
  • タブ2に表示する内容
  • タブ3に表示する内容

CSSの記述

#tabmenu_outline{
position: absolute;
top:30px;
left:0px;
}
#tabmenu{
padding:0px;
margin:0px;
color:#333;
font-size: 11px;
width:300px;
position:relative;
}
#tabmenu div#tab{
position: absolute;
top:0px;
left:0px;
}
#tabmenu div#tab a{
float: left;
height: 20px;
line-height: 20px;
text-align: center;
width: 100px;
display: block;
text-decoration:none;
color:#333;
padding:5px 0 0 0;
background:#eee;
}
#tabmenu div#tab a:hover{
background:#000;
color:#fff;
}
div#tab_contents{
width:300px;
overflow:
hidden;clear:both;
text-align:center;
}
div#tab_contents ul{
width:2500px;
padding:0px;
margin:0px;
text-align:center;
}
div#tab_contents ul li{
float: left;
width:260px;
list-style-type:none;
padding:44px  20px  20px 70px;
background:#e2e2e2;
}



FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑