どれも一長一短。
CSSでガチガチにデザインしてあるものは、HTMLの構造に無理があったり。
jQueryを使ったものでも、項目を増やすことが難しかったり・・・
前回のポストの時点でベストかなぁと思ってたタブメニューですが、ようやくシンプルなものが見つかりました。
CSSでのカスタマイズも簡単。
おまけに項目を増やすのもクラス名を追加するだけでできちゃうなかなかのすぐれもの。
今回見つけたのはこちらのエントリー。
いや、マジ感謝っす。
デモはこちら[jQuery] ものすごくシンプルなタブメニュー
タブメニューを実現する方法は検索すればいろいろ出てきますが、これが一番シンプルなんじゃないかなーと思います。 Result jQuery [code language="js"] $(function() { $(".tab li").click(function()...
This is the content of TAB 1.
This is the content of TAB 2.
This is the content of TAB 3.
サンプルコードは下のような感じ
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
* {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tab_menu_box {
text-align: center;
}
ul.tab_menu {
list-style: none;
margin-left: auto;
margin-right: auto;
}
ul.tab_menu li {
background-color: #f2f2f2;
color: #666;
cursor: pointer;
display: inline-block;
width: 100px;
}
ul.tab_menu li:hover {
color: #FF0000;
}
ul.tab_menu li.active {
background-color: #999;
color: #fff;
}
div.tabContent {
width: 300px;
display: none;
margin-left: auto;
margin-right: auto;
border: thin solid rgba(201,201,201,1.00);
}
div.active {
display: block;
-webkit-animation: fadein 1s linear 0s 1;
}
label {
width: 100%;
display: inline-block;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
@-webkit-keyframes fadein {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
</style>
</head>
<body>
<script type="text/javascript">$(function() {
$(".tab_menu li").click(function() {
var num = $(".tab_menu li").index(this);
$(".tabContent").removeClass('active');
$(".tabContent").eq(num).addClass('active');
$(".tab_menu li").removeClass('active');
$(this).addClass('active')
});
});</script>
<div class="tab_menu_box">
<ul class="tab_menu">
<li class="active">
<label >
<input type="radio" name="use" checked />
NO1</label>
</li>
<li>
<label >
<input type="radio" name="use" />
NO2</label>
</li>
<li>
<label >
<input type="radio" name="use" />
NO3</label>
</li>
</ul>
</div>
<div class="tabContent active">This is the content of TAB 1.</div>
<div class="tabContent">This is the content of TAB 2.</div>
<div class="tabContent">This is the content of TAB 3.</div>
</body>
</html>
0 件のコメント:
コメントを投稿