Tabs Modal

Developer
Andy Tran
Size
6,932 Kb
Views
111,320
  1. Tabs Modal Previews
  2. Tabs Modal HTML Codes
  3. Tabs Modal CSS Codes
  4. Tabs Modal JS Codes

How do I make an tabs modal?

This is a material inspired tabs modal that gives the user a smooth transition between each panel. The navigation features the iconic Material Design Ripple effect, along with a border that slides around to give the user a hint of which tab is active.. What is a tabs modal? How do you make a tabs modal? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Tabs Modal Previews
IQ Test

Tabs Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tabs Modal</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="tabs"> <div class="tabs-header"> <div class="border"></div> <ul> <li class="active"><a href="#tab-1" tab-id="1" ripple="ripple" ripple-color="#FFF">Tab 1</a></li> <li><a href="#tab-2" tab-id="2" ripple="ripple" ripple-color="#FFF">Tab 2</a></li> <li><a href="#tab-3" tab-id="3" ripple="ripple" ripple-color="#FFF">Tab 3</a></li> <li><a href="#tab-4" tab-id="4" ripple="ripple" ripple-color="#FFF">Tab 4</a></li> <li><a href="#tab-5" tab-id="5" ripple="ripple" ripple-color="#FFF">Tab 5</a></li> </ul> <nav class="tabs-nav"><i class="material-icons" id="prev" ripple="ripple" ripple-color="#FFF">&#xE314;</i><i class="material-icons" id="next" ripple="ripple" ripple-color="#FFF">&#xE315;</i></nav> </div> <div class="tabs-content"> <div class="tab active" tab-id="1">1. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Ellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.</div> <div class="tab" tab-id="2">2. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam.</div> <div class="tab" tab-id="3">3. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.</div> <div class="tab" tab-id="4">4. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</div> <div class="tab" tab-id="5">5. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</div> </div>
</div>
<div class="pen-footer"><a href="https://www.behance.net/gallery/31103291/Tabs-UI-Library" target="_blank"><i class="material-icons">arrow_backward</i>View on Behance</a><a href="https://github.com/andyhqtran/UI-Library/tree/master/Tabs" target="_blank">View on Github<i class="material-icons">arrow_forward</i></a></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://codepen.io/andytran/pen/vLmRVp.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tabs Modal - Script Codes CSS Codes

html { width: 100%; height: 100%;
}
body { background: -webkit-linear-gradient(45deg, rgba(66, 183, 245, 0.8) 0%, rgba(66, 245, 189, 0.4) 100%); background: linear-gradient(45deg, rgba(66, 183, 245, 0.8) 0%, rgba(66, 245, 189, 0.4) 100%); color: rgba(0, 0, 0, 0.6); font-family: "Roboto", sans-serif; font-size: 14px; line-height: 1.6em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[ripple] { z-index: 1; position: relative; overflow: hidden;
}
[ripple] .ripple { position: absolute; background: #FFFFFF; width: 12px; height: 12px; border-radius: 100%; -webkit-animation: ripple 1.6s; animation: ripple 1.6s;
}
@-webkit-keyframes ripple { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.2; } 100% { -webkit-transform: scale(40); transform: scale(40); opacity: 0; }
}
@keyframes ripple { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.2; } 100% { -webkit-transform: scale(40); transform: scale(40); opacity: 0; }
}
.tabs { z-index: 15px; position: relative; background: #FFFFFF; width: 600px; border-radius: 4px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); box-sizing: border-box; margin: 100px auto 10px; overflow: hidden;
}
.tabs-header { position: relative; background: #4285F4; overflow: hidden;
}
.tabs-header .border { position: absolute; bottom: 0; left: 0; background: #F4B142; width: auto; height: 2px; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.tabs-header ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% - 68px);
}
.tabs-header li { -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.tabs-header a { z-index: 1; display: block; box-sizing: border-box; padding: 15px 20px; color: #FFFFFF; font-weight: 500; text-decoration: none; text-transform: uppercase;
}
.tabs-nav { position: absolute; top: 0; right: 0; background: #4285F4; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding: 0 10px; color: #FFFFFF; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.tabs-nav:before { content: ''; z-index: 1; position: absolute; top: 0; left: 0; height: 100%; box-shadow: 0 0 20px 10px #4285F4;
}
.tabs-nav i { border-radius: 100%; cursor: pointer;
}
.tabs-content { position: relative; padding: 15px 20px; -webkit-transition: 0.3s ease; transition: 0.3s ease; overflow: hidden;
}
.tabs-content:after { content: ''; position: absolute; bottom: -1px; left: 0; display: block; width: 100%; height: 1px; box-shadow: 0 0 20px 10px #FFFFFF;
}
.tabs-content .tab { display: none;
}
.tabs-content .tab.active { display: block;
}
.pen-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 600px; margin: 20px auto 100px;
}
.pen-footer a { color: #FFFFFF; font-size: 12px; text-decoration: none; text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.pen-footer a .material-icons { width: 12px; margin: 0 5px; vertical-align: middle; font-size: 12px;
}
.cp-fab { background: #FFFFFF !important; color: #4285F4 !important;
}

Tabs Modal - Script Codes JS Codes

$(document).ready(function () { // Intial Border Position var activePos = $('.tabs-header .active').position(); // Change Position function changePos() { // Update Position activePos = $('.tabs-header .active').position(); // Change Position & Width $('.border').stop().css({ left: activePos.left, width: $('.tabs-header .active').width() }); } changePos(); // Intial Tab Height var tabHeight = $('.tab.active').height(); // Animate Tab Height function animateTabHeight() { // Update Tab Height tabHeight = $('.tab.active').height(); // Animate Height $('.tabs-content').stop().css({ height: tabHeight + 'px' }); } animateTabHeight(); // Change Tab function changeTab() { var getTabId = $('.tabs-header .active a').attr('tab-id'); // Remove Active State $('.tab').stop().fadeOut(300, function () { // Remove Class $(this).removeClass('active'); }).hide(); $('.tab[tab-id=' + getTabId + ']').stop().fadeIn(300, function () { // Add Class $(this).addClass('active'); // Animate Height animateTabHeight(); }); } // Tabs $('.tabs-header a').on('click', function (e) { e.preventDefault(); // Tab Id var tabId = $(this).attr('tab-id'); // Remove Active State $('.tabs-header a').stop().parent().removeClass('active'); // Add Active State $(this).stop().parent().addClass('active'); changePos(); // Update Current Itm tabCurrentItem = tabItems.filter('.active'); // Remove Active State $('.tab').stop().fadeOut(300, function () { // Remove Class $(this).removeClass('active'); }).hide(); // Add Active State $('.tab[tab-id="' + tabId + '"]').stop().fadeIn(300, function () { // Add Class $(this).addClass('active'); // Animate Height animateTabHeight(); }); }); // Tab Items var tabItems = $('.tabs-header ul li'); // Tab Current Item var tabCurrentItem = tabItems.filter('.active'); // Next Button $('#next').on('click', function (e) { e.preventDefault(); var nextItem = tabCurrentItem.next(); tabCurrentItem.removeClass('active'); if (nextItem.length) { tabCurrentItem = nextItem.addClass('active'); } else { tabCurrentItem = tabItems.first().addClass('active'); } changePos(); changeTab(); }); // Prev Button $('#prev').on('click', function (e) { e.preventDefault(); var prevItem = tabCurrentItem.prev(); tabCurrentItem.removeClass('active'); if (prevItem.length) { tabCurrentItem = prevItem.addClass('active'); } else { tabCurrentItem = tabItems.last().addClass('active'); } changePos(); changeTab(); }); // Ripple $('[ripple]').on('click', function (e) { var rippleDiv = $('<div class="ripple" />'), rippleOffset = $(this).offset(), rippleY = e.pageY - rippleOffset.top, rippleX = e.pageX - rippleOffset.left, ripple = $('.ripple'); rippleDiv.css({ top: rippleY - (ripple.height() / 2), left: rippleX - (ripple.width() / 2), background: $(this).attr("ripple-color") }).appendTo($(this)); window.setTimeout(function () { rippleDiv.remove(); }, 1500); });
});
Tabs Modal - Script Codes
Tabs Modal - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 6,932 Kb
Views 111,320
Do you need developer help for Tabs Modal?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Tran (andytran) Script Codes
Name
Code Module - Slide In Banner
Article News Card
Interactive Location Modal
Material Playing Cards
Day 21 - Interactive Dribbble Invite Modal
Flat Login Form 3.0
Code Module - Floating Action Menu
Login Form - Modal
Draggable Chatbox
Flat Horizontal Navigation
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!