How we can create a tab program with auto or flexible height according to its content length? Solution: See this Flexible Height Tabs With Navigation Using CSS jQuery, Tabs Modal.
Previously I have shared some tabs program, but this program has a navigation button for next-previous and flexible height. Basically, Tabs are perfect for single-page web applications, or for web pages capable of displaying different subjects. Using tabs we can save space on the webpage because tab can contain multiple items. And the tab is the best way to organize content in category-wise.
Today you will learn to create Tabs Modal with navigation buttons. Basically, there is a tabs program with 5 items. There are 5 heading and 5 different contents, each heading items has its own content. On the top-right side, there are two arrow buttons left-arrow and right-arrow for select next and previous tab items. Also, there is underline in the active tabs for showing current or selected tabs item.
So, Today I am sharing Flexible Height Tabs With Navigation Using CSS jQuery. There I have used HTML to create the layout, CSS for styling and animation, jQuery for functioning. As we know jQuery is a JavaScript library that’s why I am putting this program is the JS category. You can use this tab on your website, it is ready to use because it has responsive design and auto height feature.
If you are thinking now how this flexible tabs modal actually is, then see the preview given below.
Preview Of Tabs Modal
See this video preview to getting an idea of how this tab program looks like.
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Resizable Table Columns
- Animated Download Button
- Material Button With Ripple Click
- Customized Circle Slider
Flexible Height Tabs With Navigation Source Code
Before sharing source code, let’s talk about it. First I have created the main div with class name ‘tabs’ and placed all items inside it. Inside the main div I have placed two sections using divs, one for header items and one for content or tab body. There I have used the HTML list for heading items and nav <nav> for next-previous buttons. I have linked the content with heading items using tab-id similar id method.
Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to the elements. There I have placed a linear gradient to the background for an attractive look. I used CSS @keyframe command to create the ripple animation.
jQuery handling here the active tab and navigation features in the program. There I have used if{} else{} statements to declare the conditions. There jQuery only adding and removing class names according to user’s action using .addClass & .removeClass commands. Also jQuery handling the ripple click feature which is created using CSS.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, third for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Tabs Modal | Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'> <link rel="stylesheet" href="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"></i><i class="material-icons" id="next" ripple="ripple" ripple-color="#FFF"></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> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ html { width: 100%; height: 100%; } body { background: linear-gradient(to right, #457fca, #5691c8); 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; max-width: 100%; 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: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; 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: flex; -webkit-box-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; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(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); }); }); |
That’s It. Now you have successfully created Flexible Height Tabs With Navigation Using CSS jQuery, Tabs Modal. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
