jQueryとCSSで作るシンプルなタブメニュー

2014/08/06

li要素をinline-blockを使って横並びにしたタブメニューである。今時ちょっとダサいデザイン(^^; ただそれ以外にここでのキモは、アクティブなタブとそうでないタブをどのように区別するかということである。

sample1、sample2、sample3

通常は、アクティブなタブに class="active" などと直接HTMLに記述するようで、マークアップは下のようになる。

<div id="menu">
  <ul>
    <li><a href="#">ホームページ</a></li>
    <li class="active">リスト</li>
    <li><a href="#">日記</a></li>
    <li><a href="#">掲示板</a></li>
  </ul> 
</div>

ただここでは、シンプルに以下のように記述したい。

<div id="menu">
<ul>
  <li><a href="#">ホームページ</a></li>
  <li>リスト</li>
  <li><a href="#">日記</a></li>
  <li><a href="#">掲示板</a></li>
</ul> 
</div>

そこでアクティブなタブはリンクがない、つまりａタグを子要素に持たないことを利用して、jQueryを使ってクラス名を追加することにした。

<script src="js/jquery-1.7.2.min.js"></script>
<script type = "text/javascript">
$(function(){
  $("#menu li:not(:has(a))").addClass("active");
});
</script>

ここでは、inline-blockを使って横並びにした。floatでなくinline-blockをつかうとタブ間に隙間ができるが、sample3ではこの問題を解消した。

#menu {
  text-align: left;  /* or right, center */
  border-bottom: 1px solid black;
}
#menu ul {
  display:block;
  margin: 0px 20px 0px 20px;
  padding: 0;
  list-style: none;
  margin-bottom: -1px;
}
#menu li {
  display: inline-block;
  /dislay:inline;   /*IEハック*/
  /zoom:1;   /*IEハック*/
  background: #ddd;
  border: 1px solid black;
  padding: 0.2em 0.5em;
  margin: 0;
}
#menu li.active {
  background: white;
  border-bottom-color: white;
  color:black;
}
#menu li a {
  text-decoration: none;
  color:black;
}
#menu li a:hover {
  text-decoration: underline;
}