販促レポート
＜HTML＞シンプルでサクサク動作するタブメニュー
当サイトのトップページ（PC版、スマホ版）でも採用している、超軽量でサクサク動作するタブメニューをご紹介します。シンプルな構造なうえとても簡単に実装できるので、たくさんの情報を切り分けてスマートに表示したいWEBサイトにはおススメです。
サンプルページを見る
サンプルをダウンロード
＜準備＞
<link type="text/css" rel="stylesheet" href="SpryTabbedPanels.css" />
<script type="text/javascript" src="SpryTabbedPanels.js"></script>※<head>~</head>に「SpryTabbedPanels.css」と「SpryTabbedPanels.js」のパスを指定
＜HTMLソース＞
<div class="TabbedPanels" id="tabPanel">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">コンテンツA</li>
<li class="TabbedPanelsTab" tabindex="0">コンテンツB</li>
<li class="TabbedPanelsTab" tabindex="0">コンテンツC</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<p>コンテンツAのタイトル</p>
<p>コンテンツAの記事</p>
<p>コンテンツAの記事</p>
<p>コンテンツAの記事</p>
<p><a href="#">コンテンツAのリンク</a></p>
</div>
<div class="TabbedPanelsContent">
<p>コンテンツBのタイトル</p>
<p>コンテンツBの記事</p>
<p>コンテンツBの記事</p>
<p>コンテンツBの記事</p>
<p><a href="#">コンテンツBのリンク</a></p>
</div>
<div class="TabbedPanelsContent">
<p>コンテンツCのタイトル</p>
<p>コンテンツCの記事</p>
<p>コンテンツCの記事</p>
<p>コンテンツCの記事</p>
<p><a href="#">コンテンツCのリンク</a></p>
</div>
</div>
</div>
<script type="text/javascript">
new Spry.Widget.TabbedPanels("tabPanel", {defaultTab:0});
</script>＜CSSソース＞
.TabbedPanels {
padding: 0px;
clear: both;
margin-top: 20px;
margin-bottom: 20px;
width: 500px;
}
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
background-color: #EAEAEA;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
border: 1px solid #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
color: #000000;
outline:none;
text-align: center;
padding: 10px;
}
.TabbedPanelsTabHover {
background-color: #DDDDDD;
}
.TabbedPanelsTabSelected {
background-color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.TabbedPanelsTab a {
color: #000000;
text-decoration: none;
}
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCCCCC;
border-bottom: solid 1px #CCCCCC;
border-top: solid 1px #CCCCCC;
border-right: solid 1px #CCCCCC;
background-color: #FFFFFF;
padding: 15px;
}
.TabbedPanelsContent {
padding: 0px;
}
.TabbedPanelsContentVisible {
}サンプルページを見る
サンプルをダウンロード
RSSフィードで最新情報を提供しています。下記のURLをコピーしてお使いのRSSリーダーにご登録ください。
https://www.pqnavi.com/reports/viewall.rss