How to Create Super Sliding tab using Css and Jquery | Sanwebcorner

How to Create Super Sliding tab using Css and Jquery

This is one of the interesting topic to create a tab section in different manner, Yes today we will see how to create super sliding tab menu with the help of simple css and Jquery. This example is very useful for developers because lot of website contains this types of tab section.

This types of super sliding tab section will reduce the webpage because it shows the specified contents for specified tab menu. When you click another tab menu it gives the relevant content and hides the previous content.

Here to hide and show the content we are using the jquery and java script and also article sliders. For layouts we are using the css code. This example is fully responsive in the mobile view it shows the different slide menu.

Here is the full css and html code for this example. You can download the code and use it for your website. And also have the live demo, check out the live demo to show the result of this example. I hope this is very useful.



Html code for Super Sliding Tab Menu:

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sliding Tab Menu using css and jquery</title>
<link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}


ol,
ul {
list-style: none
}

table {
border-collapse: collapse;
border-spacing: 0
}
</style>

<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header>
<h1 style="text-align:center;">Slider Tab:</h1>
</header>
<nav>
<ul>
<li class="gnav1">Tab Menu1</li>
<li class="gnav2">Tab Menu2</li>
<li class="gnav3">Tab Menu3</li>
<li class="gnav4">Tab Menu4</li>
</ul>
</nav>
<div class="contents" id="contents">
<div class="container">
<article id="page1" class="show top">
<section>
<h1>Tab1 Title</h1>
<p>This is tab one.</p>
</section>
</article>
<article id="page2">
<section>
<h1>Tab2 Title</h1>
<p>This is tab two.</p>
</section>
</article>
<article id="page3">
<section>
<h1>Tab3 Title</h1>
<p>This is tab three.</p>
</section>
</article>
<article id="page4">
<section>
<h1>Tab4 Title</h1>
<p>This is tab four.</p>
</section>
</article>
<article id="page5">
<section>
<h1>Tab5 Title</h1>
<p>This is tab five</p>
</section>
</article>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
$(document).ready(function(){
var item_num = $('nav li').length + 1;
var btn_state = true;

$('nav li').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});

$('nav li').on('click',function(){
if(btn_state){
btn_state = !btn_state;
$('nav li').removeClass('currentPage');
$(this).addClass('currentPage');

var i = $('nav li').index(this);
$('article').removeClass('show');
$('article').addClass('hide');
$('article').eq(i).addClass('show');

setTimeout(function(){
btn_state = !btn_state;
},500);
}
});
});
</script>
</body>
</html>

Css code for Super Sliding Tab Menu:

body, html {
  height: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  font-family: 'Cairo', sans-serif;
}



.wrapper {
  width: 100%;
  height: 100%;
  margin: auto;
  border-radius: 8px;
  background: #f0f0f0;
  position: relative;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

header h1 {
    background: #FBB042;
    color: #FFF;
  padding: 1rem;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  position: relative;
  font-size:24px;
  z-index: 8;
}

nav {
  width: 100%;
    background: #FF9800;
}
@media (min-width: 769px) {
  nav {
    float: left;
    width: 127px;
    height: calc(100% - 4.8rem);
    border-radius: 0 0 0 8px;
  }
}
nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 769px) {
  nav ul {
    display: block;
  }
}
nav li {
  line-height: 3;
  padding: 0 1rem;
  border-right: 1px solid #f0f0f0;
  cursor: pointer;
  color: #fff;
  box-sizing: border-box;
}
@media (min-width: 769px) {
  nav li {
    border-bottom: 1px solid #f0f0f0;
    border-right: none;
  }
}
nav li.hover {
  background: rgba(255, 255, 255, 0.2);
}
nav li.pressed {
  background: rgba(255, 255, 255, 0.7);
}
nav li.currentPage {
  background: rgba(255, 255, 255, 0.5);
}

#contents {
  box-sizing: border-box;
  position: absolute;
  height: calc(100% - 6rem);
  width: 100%;
  top: 7.8rem;
  left: 0;
  border-radius: 0 0 8px 0;
  overflow: hidden;
  background: -webkit-linear-gradient(315deg, #FF9800 0%, #FFCC7F 100%);
  background: linear-gradient(135deg, #FF9800 0%, #FFCC7F 100%);

}
@media (min-width: 769px) {
  #contents {
    height: calc(100% - 3rem);
    width: calc(100% - 8rem);
    top: 3rem;
    left: 128px;
  }
}

article {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 2rem;
   background: -webkit-linear-gradient(315deg, #FF9800 0%, #FFCC7F 100%);
  background: linear-gradient(135deg, #FF9800 0%, #FFCC7F 100%);

  top: 0;
  left: -100%;
}
article.hide {
  -webkit-transition: left 0s 0.5s;
  transition: left 0s 0.5s;
}
article:nth-of-type(1) {
  z-index: 5;
}
article:nth-of-type(2) {
  z-index: 4;
}
article:nth-of-type(3) {
  z-index: 3;
}
article:nth-of-type(4) {
  z-index: 2;
}
article:nth-of-type(5) {
  z-index: 1;
}
article.show {
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
  left: 0;
  z-index: 6;
}
article section {
  width: 100%;
  color: #fff;
}
article section h1 {
  font-size: 1.5rem;
  margin: 0 0 2rem 0;
}

Post a Comment

Labels

360 degree view product image 3d rotate 3d text 3step-form Accordion menu ajax All Browsers Animated Background Gradient animation audio controller auto complete Best accordion menu bootstrap border bounce effect on hover Breadcrumb calculate age by dob calendar Captcha change image on mouse move color chooser countdown Counter on scroll Css css animation css buttons css hover css3 customized upload Button Date picker delete data from table Different scroll speed email otp verification email verifier Embed eventlist Expanding Menu feedbck form flash news section close button full screen menu Google custom search Google Maps Google reCAPTCHA Google site search gradient hide menu Horizontal News ticker Hover Htm Html html dropdown html form html5 html5 form validation Iframe image hover increment decrement textbox value based on select box Javascript Jquery js Layered image effect on mouse hover lock & unlock page scroll marquee marquee with close button mobile number validation mobile otp login Multi-level-drop-down-menu multi-level-form Multi-Step-form mysql News ticker on hover change text to image our team page password strength checker Photoshop PHP populate html selectbox Popup image on click the link pure css Question type form Random password Redirect page Based on the select box while submit the form responsive responsive menu responsive popup box Responsive Vertical Time line design rotate image selectbox based on select box simple coming soon page simple countdown based on end date simple typing effect slider sliding tab sms otp login statistic counter on scroll switch tag shape team member Time picker toggle toggle view transparent button underline animation up down slide validation vertical fixed sidebar Webtips Youtube