[UI] UI Components : Tab 切替UIデザインいろいろ

HTML

 

  
任意メニュー
任意メニュー
任意メニュー
 
 
任意コンテンツ
 
任意コンテンツ
 
任意コンテンツ

CSS（共通）

/*基本設定*/
.navi > div {
 display:none;
 padding: 1em 0 0;
}
.navi .show {
 display:block;
}
.tab > li {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
 cursor:pointer;
 font-size: 14px;
 text-transform: uppercase;
}
.tab > li.active {
 cursor: default;
}

JS

切替のためのjsは『jQuery（＋CSS3）で作るタブ切替えパネル（２段タブ対応）』こちらのサイトのものをカスタマイズして利用しています。同じページ内に複数設置が可能なことと、入れ子にも対応しているところが大変便利です。

$(function(){
$(".tab li").click(function(){
 var index = $(this).parent(".tab").children("li").index(this);
 $(this).siblings("li").removeClass("active");
 $(this).addClass("active");
 $(this).parent(".tab").nextAll("div").hide(); 
 $(this).parent(".tab").nextAll("div").eq(index).show(); 
});
})

Demo：ベーシックなタブデザイン

• business
• sports
• science

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

Duis suscipit, enim vitae lacinia luctus, orci libero adipiscing nisl, sed ornare diam ante non est. Suspendisse in cursus tellus. Maecenas accumsan velit vitae tellus pretium feugiat.

Quisque non vulputate tellus. Vivamus id aliquam enim. Duis vitae pretium leo. Donec ut accumsan odio, nec lobortis mauris. Sed sed nisl ipsum. In vehicula diam bibendum, porttitor est semper, tincidunt nulla.

CSS

.tab {
 padding-left: 1em;
 border-bottom: #ccc 1px solid;
}
.tab li {
 position: relative;
 top: 1px;
 display:inline-block;
 padding: .6em 1em;
 background: #f5f5f5;
 border: #ccc 1px solid;
 border-left: none;
 border-radius:3px 3px 0 0;
 color: #999;
}
.tab li:first-child {
 border-left: #ccc 1px solid;
}
.tab .active, .tab .active:hover {
 background: #fff;
 border-bottom: #fff 1px solid;
 color: #333;
}
.tab > :hover {
 background: #eee;
 color: #666;
}

Demo：ベーシックなタブデザイン隙間あり

• business
• sports
• science

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

Duis suscipit, enim vitae lacinia luctus, orci libero adipiscing nisl, sed ornare diam ante non est. Suspendisse in cursus tellus. Maecenas accumsan velit vitae tellus pretium feugiat.

Quisque non vulputate tellus. Vivamus id aliquam enim. Duis vitae pretium leo. Donec ut accumsan odio, nec lobortis mauris. Sed sed nisl ipsum. In vehicula diam bibendum, porttitor est semper, tincidunt nulla.

CSS

.tab {
 padding-left: 1em;
 border-bottom: #ccc 1px solid;
}
.tab li {
 position: relative;
 top: 1px;
 display:inline-block;
 padding: .6em 1em;
 background: #f5f5f5;
 border: #ccc 1px solid;
 border-radius:3px 3px 0 0;
 color: #999;
}
.tab li + li {
 margin-left: 5px;
}
.tab .active, .tab .active:hover {
 background: #fff;
 border-bottom: #fff 1px solid;
 color: #333;
}
.tab > :hover {
 background: #eee;
 color: #666;
}

Demo：youtubeライクなやつ

• business
• sports
• science

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

Duis suscipit, enim vitae lacinia luctus, orci libero adipiscing nisl, sed ornare diam ante non est. Suspendisse in cursus tellus. Maecenas accumsan velit vitae tellus pretium feugiat.

Quisque non vulputate tellus. Vivamus id aliquam enim. Duis vitae pretium leo. Donec ut accumsan odio, nec lobortis mauris. Sed sed nisl ipsum. In vehicula diam bibendum, porttitor est semper, tincidunt nulla.

CSS

.tab {
 border-bottom: #eee 1px solid;
}
.tab li {
 display:inline-block;
 padding: .3em 0;
 border-bottom: transparent 3px solid;
 color: #aaa;
}
.tab li + li {
 margin-left: 1.5em;
}
.tab .active, .tab .active:hover {
 border-bottom: #C7243A 3px solid;
 color: #333;
}
.tab > :hover {
 border-bottom: #F28A8F 3px solid;
 color: #666;
}

Demo：下線が重なる感じ

• business
• sports
• science

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

Duis suscipit, enim vitae lacinia luctus, orci libero adipiscing nisl, sed ornare diam ante non est. Suspendisse in cursus tellus. Maecenas accumsan velit vitae tellus pretium feugiat.

Quisque non vulputate tellus. Vivamus id aliquam enim. Duis vitae pretium leo. Donec ut accumsan odio, nec lobortis mauris. Sed sed nisl ipsum. In vehicula diam bibendum, porttitor est semper, tincidunt nulla.

CSS

.tab {
 border-bottom: #eee 3px solid;
}
.tab li {
 position: relative;
 display:inline-block;
 padding: .6em 0;
 color: #aaa;
}
.tab li + li {
 margin-left: 1.5em;
}
.tab li.active:after, .tab li:after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: -3px;
 height: 3px;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
}
.tab li.active:after, .tab li.active:hover:after {
 background: #C7243A;
}
.tab li:hover:after {
 background: #F28A8F;
}
.tab .active, .tab .active:hover {
 color: #333;
}
.tab > :hover {
 color: #666;
}

Demo：三角が下からにょきっと

• business
• sports
• science

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

Duis suscipit, enim vitae lacinia luctus, orci libero adipiscing nisl, sed ornare diam ante non est. Suspendisse in cursus tellus. Maecenas accumsan velit vitae tellus pretium feugiat.

Quisque non vulputate tellus. Vivamus id aliquam enim. Duis vitae pretium leo. Donec ut accumsan odio, nec lobortis mauris. Sed sed nisl ipsum. In vehicula diam bibendum, porttitor est semper, tincidunt nulla.

CSS

.tab {
 background: #C7243A;
}
.tab li {
 display:inline-block;
 position: relative;
 margin-left: 1.5em;
 padding: .7em 0;
 color: rgba(255, 255, 255, .4);
}
.tab .active, .tab .active:hover {
 color: rgba(255, 255, 255, 1);
}
.tab > :hover {
 color: rgba(255, 255, 255, .8);
}
.tab > :after {
 content: "";
 position: absolute;
 height: 0;
 width: 0;
 bottom: -8px;
 left: 50%;
 border:8px solid transparent;
 border-bottom:8px solid #fff;
 margin-left: -8px;
 transition: all 0.2s ease 0s;
 -webkit-transition: all 0.2s ease 0s;
}
.tab > :hover:after, .tab .active:after{
 bottom: 0;
}

Demo：三角が下へにょきっと

• business
• sports
• science

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

Duis suscipit, enim vitae lacinia luctus, orci libero adipiscing nisl, sed ornare diam ante non est. Suspendisse in cursus tellus. Maecenas accumsan velit vitae tellus pretium feugiat.

Quisque non vulputate tellus. Vivamus id aliquam enim. Duis vitae pretium leo. Donec ut accumsan odio, nec lobortis mauris. Sed sed nisl ipsum. In vehicula diam bibendum, porttitor est semper, tincidunt nulla.

CSS

.tab {
 background: #C7243A;
}
.tab li {
 display:inline-block;
 position: relative;
 margin-left: 1.5em;
 padding: .7em 0;
 color: rgba(255, 255, 255, .4);
}
.tab .active, .tab .active:hover {
 color: rgba(255, 255, 255, 1);
}
.tab > :hover {
 color: rgba(255, 255, 255, .8);
}
.tab > :after {
 content: "";
 position: absolute;
 height: 0;
 width: 0;
 top: 70%;
 left: 50%;
 border:8px solid transparent;
 border-top:8px solid #C7243A;
 margin-left: -8px;
 transition: all 0.2s ease 0s;
 -webkit-transition: all 0.2s ease 0s;
}
.tab > :hover:after, .tab .active:after{
 top: 100%;
}

Demo：四角で選択

• business
• sports
• science

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

Duis suscipit, enim vitae lacinia luctus, orci libero adipiscing nisl, sed ornare diam ante non est. Suspendisse in cursus tellus. Maecenas accumsan velit vitae tellus pretium feugiat.

Quisque non vulputate tellus. Vivamus id aliquam enim. Duis vitae pretium leo. Donec ut accumsan odio, nec lobortis mauris. Sed sed nisl ipsum. In vehicula diam bibendum, porttitor est semper, tincidunt nulla.

CSS

.tab li {
 display:inline-block;
 padding: .8em 1em;
 border-radius: 5px;
 color: #C7243A;
}
.tab li + li {
 margin-left: .5em;
}
.tab .active, .tab .active:hover {
 background: #C7243A;
 color: #fff;
}
.tab > :hover {
 background: #eee;
}

Demo：縦型ナビ

• business
• sports
• science

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

Duis suscipit, enim vitae lacinia luctus, orci libero adipiscing nisl, sed ornare diam ante non est. Suspendisse in cursus tellus. Maecenas accumsan velit vitae tellus pretium feugiat.

Quisque non vulputate tellus. Vivamus id aliquam enim. Duis vitae pretium leo. Donec ut accumsan odio, nec lobortis mauris. Sed sed nisl ipsum. In vehicula diam bibendum, porttitor est semper, tincidunt nulla.

CSS

.navi {
 overflow:hidden;
}
.tab {
 float: left;
 clear: left;
 width: 6em;
 padding: 1em 0 1em 1em;
 background: #C7243A;
}
> div {
 padding-left: 9em;
}
.tab li {
 display: block;
 padding: .8em 1em;
 border-radius:3px 0 0 3px;
 color: #fff;
}
.tab .active, .tab .active:hover {
 background: #fff;
 color: #C7243A;
}
.tab > :hover {
 background: rgba(255, 255, 255, .2);
}

CSS対応状況

• CSS Generated content
• CSS 2.1 selectors
• CSS3 selectors
• CSS3 Border-radius
• CSS3 Box-sizing
• CSS3 Transitions
• CSS3 Colors