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.
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>
<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;
}
0 Comments