Hướng dẫn tạo tab Menu với HTML5 Và CSS3

Với công nghệ HTML5 và CSS3 ngày càng phát triển. Trước đây khi muốn tạo các menu tab thì cần dùng đến  jQuery. Và hôm nay mình xẽ hướng dẫn các bạn tạo tab menu đơn giản với html5 và css3 mà không cần đến  jQuery. 

Đây là đoạn code HTML5 

<article class="tabDetails">
   <span id="tab1" class="anchor"></span>
   <div class="tabContents">
       <a class="link" href="#tab1">Xã hội</a>
         <div class="detail">
           <p>Nội dung Tab1</p>
         </div>
   </div>
   <span id="tab2" class="anchor"></span>
   <div class="tabContents">
       <a class="link" href="#tab2">Chính trị</a>
         <div class="detail">
           <p>Nội dung Tab2</p>
         </div>
   </div>
   .....
</article>

Đây là đoạn code CSS3 cho thẻ tabDetails

.tabDetails {
    width: 100%;
    max-width: 600px;
    background: #ccc;
    margin: 50px auto 0;
    position: relative;}

Tiếp theo là định dạng từng Tab.

.tabContents div {
    opacity:0;
    background: #fbfbfb;
    float: left;
    width: 100%;
    position: absolute;
    top: 15px;
    left: 0;
    padding: 10px;
    box-sizing: border-box;
    line-height: 1.5em;}

.detail{
    margin-top:20px;}

.detail p{
    line-height:130%;
    font-size:13px;
    padding:10px;}

Cuối cùng là hiệu ứng từng Tab.

.anchor {
    position: fixed;
    display: none;}
   
.link{
    float: left;
    width: 20%;
    padding: 10px;
    background: #fbfbfb;
    margin-right: 5px;
    text-decoration: none;
    font-weight: bold;
    color: #333;
    text-align: center;}

.link:hover {
    color: #ff6600;}

.anchor:target + .tabContents div {
    opacity: 1;}

.anchor:target + .link {
    background: #ccc;}
  

Nguồn : iChiaSe.Biz

Tag : HTML & CSS