販促レポート：＜HTML＞シンプルでサクサク動作するタブメニュー

販促ノベルティ卸売りセンター＞販促レポート＞IT技術テク

販促レポート

販促レポートの一覧へ

前のレポート｜次のレポート

＜HTML＞シンプルでサクサク動作するタブメニュー

投稿日：2013/10/12　カテゴリ： IT技術テク

当サイトのトップページ（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

販促レポートは、特集記事や販売促進コラム、オフィスでの問題解決など、皆さんのビジネスに少しでも役立つ情報をお届け。編集長の弊社代表と様々な分野で活躍する若手ライター陣によって、2008年より地道に運営されております。

このレポートと併せてオススメしたいノベルティグッズ

マグカップ・B(300ml) 黒

290円 ⇒ 151円

名入れ対応品

[マグカップ] ステンレス二重構造マグカップ

380円 ⇒ 252円

名入れ対応品

マグカップ・B(300ml) 白

290円 ⇒ 151円

名入れ対応品

[粗品／お土産] 和柄ふせんセット椿/つばき

320円 ⇒ ~~140円~~ ⇒ 138円

値引き品推奨品フルカラー名入れ対応品

こちらの関連記事もいかがでしょうか？

＜パワーポイント＞一瞬で目次スライドを作成する便利ワザ

GmailとGoogleカレンダーを連携！予定を自動登録する方法

＜Windows＞メールアドレスのリンクをGmailで開く方法

検索順位に影響を与える「ネガティブSEO」とは？よくある手口と対処法

検索上位表示に効果あり！SEOワードを正しく選定する方法

https化したのに「情報、または保護されていない通信」となる状態の対処法

重要！WEBサイトの全ページ「https化」はお済みですか？

カテゴリ：＜IT技術テク＞の一覧

もしよければ共有をお願いいたします

販促レポートの一覧

前のレポート ｜ 次のレポート

[お探しの検索ワードはコチラですか？]

クレヨン｜スマホスタンド｜マルシェバッグ｜東洋紡｜そばギフト｜お茶ギフト｜超お得｜ハンディライト｜蛍光ペン｜スポーツタオルギフト｜扇風機｜アイロン

[特集]　特急7営業日！名入れスピード印刷、お急ぎのお客様は諦めずにご相談ください

[特集]　写真も綺麗に印刷！フルカラー対応ノベルティ　インクジェット、昇華転写など

[特集]　格安ウェットティッシュ 1,000個よりオリジナルラベル対応

[特集]　名入れができる「卒業記念品」と「卒園記念品」｜＜2017年春＞卒業記念品の納入実績

スペシャルカテゴリ／各種イベント

	注目の新作商品名入れ！エコバッグ・マグカップ・ボトルなど
	注目！イベント用食品冷やし中華、うどん、調味料。最短翌日出荷！
	フォールディングファン夏の新定番！無料サンプル差し上げます
	格安ウェットティッシュオリジナルラベル対応！33円～送料無料
	熨斗（のし）ノベルティ時節柄を問わない新アイテム粗品・ご挨拶
	不織布バッグ新シリーズお手頃で優しい風合い選べる7カラー
	防災・防犯グッズ特集名入れ対応！非常用ライト・救急セットなど
	サンプル差し上げますクリアファイル、ウェットティッシュ、付箋など
	スピード印刷対応品ご相談下さい！名入れ印刷、特急7営業日
	マタニティマークグッズ厚生労働省推進！思いやりグッズで好感度アップ
	スマホ関連グッズ注目！スタンド、チャージャー、ポーチ...
	フルカラー印刷対応品写真も綺麗に印刷！フルカラー対応ノベルティ

プライスカテゴリ／価格別

カタログ請求フォーム

ノベルティグッズ・販促品・記念品の無料カタログ

FOLLOW @pqnavi
Follow @pqnavi

LIKE @pqnavicom

	注目の新作商品名入れ！エコバッグ・マグカップ・ボトルなど
	注目！イベント用食品冷やし中華、うどん、調味料。最短翌日出荷！
	フォールディングファン夏の新定番！無料サンプル差し上げます
	格安ウェットティッシュオリジナルラベル対応！33円～送料無料
	熨斗（のし）ノベルティ時節柄を問わない新アイテム粗品・ご挨拶
	不織布バッグ新シリーズお手頃で優しい風合い選べる7カラー
	防災・防犯グッズ特集名入れ対応！非常用ライト・救急セットなど
	サンプル差し上げますクリアファイル、ウェットティッシュ、付箋など
	スピード印刷対応品ご相談下さい！名入れ印刷、特急7営業日
	マタニティマークグッズ厚生労働省推進！思いやりグッズで好感度アップ
	スマホ関連グッズ注目！スタンド、チャージャー、ポーチ...
	フルカラー印刷対応品写真も綺麗に印刷！フルカラー対応ノベルティ

販促レポート：＜HTML＞シンプルでサクサク動作するタブメニュー 【販促ノベルティ卸売りセンター】