【HTML5, jQuery】タブメニュー - HTML5, jQuery役立つ情報ブログ

HTML5でjQueryを使ったタブメニューテンプレートを紹介します。

画像と文章を変えるだけで簡単にカスタマイズできますので、
是非チャレンジしてみては。

画像は各自用意して下さい。

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UF-8">
<title>タブメニュー</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<header>
<div id="header-inner" class="clearfix">
<div id="logo">
<img src="images/logo.png" alt="tableware">
</div>
<ul id="nav">
<li><a href="test.html"><img src="images/menu1.png" alt="和食器"></a></li>
<li><a href="test.html"><img src="images/menu2.png" alt="洋食器"></a></li>
<li><a href="test.html"><img src="images/menu3.png" alt="ガラス食器"></a></li>
</ul>
</div><!-- /#nav-->
<ul id="tab">
<li><a class="selected" href="#tab1">湯呑み</a></li>
<li><a href="#tab2">急須</a></li>
<li><a href="#tab3">小鉢</a></li>
</ul><!-- /#tab-->
</header><!-- /header -->
<div id="content">
<section id="tab1">
<h1>YUNOMI</h1>
<img src="images/yunomi.jpg" alt="湯呑み画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
<section id="tab2">
<h1>KYUSU</h1>
<img src="images/kyusu.jpg" alt="急須画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
<section id="tab3">
<h1>KOBACHI</h1>
<img src="images/kobachi.jpg" alt="小鉢画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
</div><!-- /#content-->
<footer>
<small>Copyright 〓 2013 tableware All Right Reserved.</small>
</footer><!-- /footer-->
<script>
$(function () {
  $("#content section").hide();
  $($("#tab a.selected").attr("href")).show();
  $("#tab li a").click(function () {
    $("#tab li a").removeClass();
    $(this).addClass("selected");
    $("#content section").hide();
    $($(this).attr("href")).fadeIn();
    return false;
  });
});
</script>
</body>
</html>

【style.css】

@charset "UTF-8";

/* ------- base ------- */

body, div, ul, li {
  margin:0;
  padding:0;
}

img {
  border:0;
}

body {
  background-color: #FFF;
  font-size: 62.5%;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #292623;
}

a {
  text-decoration: none;
  color: #292623;
}

.clearfix:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}

/* ------- header ------- */

header {
  width:100%;
  height: 120px;
  background: url(images/bg.png) repeat-x 0 bottom #D8D8C5;
}

#header-inner {
  width: 700px;
  height: 80px;
  margin: 0 auto;
}

#logo {
  float: left;
  padding-top: 17px;
}

#nav {
  float: right;
  padding-top: 37px;
}

#nav li {
  float: left;
  padding-left: 15px;
  list-style-type: none;
  
}

/* ------- タブ ------- */
#tab {
  width: 700px;
  height: 40px;
  margin: 0 auto;
}

#tab li {
  float: left;
  margin-right: 3px;
  list-style-type: none;
}

#tab li a {
  display:block;
  width: 120px;
  height: 34px;
  padding-top: 6px;
  font-size: 1.8em;
  text-align:center;
  background-color: #494941;
  color:#FFF;
}

#tab li a:hover {
  background-color: #747468;
  color:#FFF;
}

#tab li a.selected {
  background-color: #FFF;
  color:#292623;
}

/* ------- コンテンツ ------- */
#content {
  width: 620px;
  margin: 50px auto;
}

section h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2.4em;
}

section p {
  width: 390px;
  margin: 0 auto;
  font-size: 1.2em;
  line-height: 2;
}

/* ------- footer ------- */

footer {
  width:100%;
  height: 35px;
  padding-top:23px;
  text-align:center;
  background-color: #494941;
  color:#CCC;
  bottom:0;
  position:fixed;
}