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:
<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>
