Create a simple and extensible JQUERY/CSS3 tab Menu

Original: Create a simple and extensible JQUERY/CSS3 tab Menu

Today we use jquery and CSS3 to create a simple and Extensible tab menu, which also has a slider effect when switching, first to look at:

By comparing fake orders with the tab menu, you can also customize the look you need with CSS code.

We can see the demo demo of this tab menu here.

Read the demo, and then read the tab menu source code, mainly by the CSS code and jquery code two pieces.

First, the simple HTML code:

<figure class="tabBlock">
   <ul class="tabBlock-tabs">
     <li class="tabBlock-tab is-active">Tab 1</li>
     <li class="tabBlock-tab">Tab 2</li>
   </ul>
   <div class="tabBlock-content">
     <div class="tabBlock-pane">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias molestiae atque quis blanditiis eaque maiores ducimus optio neque debitis quos dolorum odit unde quibusdam tenetur quaerat magni eius quod tempore.</p>
     </div>
     <div class="tabBlock-pane">
       <ul>
         <li>Lorem ipsum dolor sit amet.</li>
         <li>Minima mollitia tenetur nesciunt modi?</li>
         <li>Id sint fugit et sapiente.</li>
         <li>Nam deleniti libero obcaecati pariatur.</li>
         <li>Nemo optio iste labore similique?</li>
       </ul>
     </div>
   </div>
</figure>

Here we can see that the menu section of the tab menu uses a UL li list, the content part is the ordinary div block.

Next, let's look at the CSS code:

.unstyledList, .tabBlock-tabs {
  List-style: none;
  Margin: 0;
  Padding: 0;
}

.tabBlock {
  Margin: 0 0 2.5rem;
}

.tabBlock-tab {
  Background-color: white;
  Border-color: #d8d8d8;
  Border-left-style: solid;
  Border-top: solid;
  Border-width: 2px;
  Color: #b5a8c5;
  Cursor: pointer;
  Display: inline-block;
  Font-weight: 600;
  Float: left;
  Padding: 0.625rem 1.25rem;
  Position: relative;
  -webkit-transition: 0.1s ease-in-out;
  Transition: 0.1s ease-in-out;
}
.tabBlock-tab:last-of-type {
  Border-right-style: solid;
}
.tabBlock-tab::before, .tabBlock-tab::after {
  Content: "";
  Display: block;
  Height: 4px;
  Position: absolute;
  -webkit-transition: 0.1s ease-in-out;
  Transition: 0.1s ease-in-out;
}
.tabBlock-tab::before {
  Background-color: #b5a8c5;
  Left: -2px;
  Right: -2px;
  Top: -2px;
}
.tabBlock-tab::after {
  Background-color: transparent;
  Bottom: -2px;
  Left: 0;
  Right: 0;
}
@media screen and (min-width: 700px) {
  .tabBlock-tab {
    Padding-left: 2.5rem;
    Padding-right: 2.5rem;
  }
}
.tabBlock-tab.is-active {
  Position: relative;
  Color: #975997;
  Z-index: 1;
}
.tabBlock-tab.is-active::before {
  Background-color: #975997;
}
.tabBlock-tab.is-active::after {
  Background-color: white;
}

.tabBlock-content {
  Background-color: white;
  Border: 2px solid #d8d8d8;
  Padding: 1.25rem;
}

.tabBlock-pane > :last-child {
  Margin-bottom: 0;
}

Here we can clearly see that most of the CSS code is very common, that is, the appearance of the tab menu is defined. Slide slide into the slide out of the effect is the use of CSS3 transition:0.1s ease-in-out;

Then there's the toggle, which uses the jquery code, and it's very simple:

var TabBlock = {
  s: {
    animLen: 200 },
  
  init: function() {
    TabBlock.bindUIActions();
    TabBlock.hideInactive();
  },
  
  bindUIActions: function() {
    $(‘.tabBlock-tabs‘).on(‘click‘, ‘.tabBlock-tab‘, function(){
      TabBlock.switchTab($(this));
    });
  },
  
  hideInactive: function() { var $tabBlocks = $(‘.tabBlock‘);
    
    $tabBlocks.each(function(i) { var $tabBlock = $($tabBlocks[i]),
        $panes = $tabBlock.find(‘.tabBlock-pane‘),
        $activeTab = $tabBlock.find(‘.tabBlock-tab.is-active‘);
      
      $panes.hide();
      $($panes[$activeTab.index()]).show();
    });
  },
  
  switchTab: function($tab) { var $context = $tab.closest(‘.tabBlock‘); if (!$tab.hasClass(‘is-active‘)) {
      $tab.siblings().removeClass(‘is-active‘);
      $tab.addClass(‘is-active‘);
   
      TabBlock.showPane($tab.index(), $context);
    }
   },
  
  showPane: function(i, $context) { var $panes = $context.find(‘.tabBlock-pane‘);   $panes.slideUp(TabBlock.s.animLen);
    $($panes[i]).slideDown(TabBlock.s.animLen);
  }
};

$(function() {
  TabBlock.init();
});

It is clear that a few JS functions, mainly initialize init () and tab Switch Switchtab (), using jquery to implement the switch is actually using jquery dynamic change elements of the CSS class to achieve, there is no special place, so JS and CSS separated away, We just need to modify the CSS code to customize the look we like.

Finally, share the source code,>>