How we can create a minimal tab using JS or any JavaScript library? Solution: See this jQuery UI Tabs With Minimal and Sexy Design, Dark & Light Background.
Previously I have shared some tabs related programs, but this one has a minimal and attractive design and it is based on the jQuery UI library. Basically, a Tab is a graphical control element that allows multiple documents or panels to be contained within a single window. Tabs are for navigating or switching between multiple sets of documents.
Today you will learn to create tabs with Dark & Light Background. Basically there are 2 tabs, one is with a light background and one is with a dark background. Otherwise, these two tabs are similar there are common effects and designs. The tab has a minimal and sexy design, there is a link between heading and contents. When you will click on any heading, then its content will visible and a bottom side arrow will add on active heading.
So, Today I am sharing jQuery UI Tabs With Minimal and Sexy Design. There I have used the jQuery UI library to create the tabs. jQuery UI is a library that is based on jQuery, and it is based on JavaScript. That’s why I am putting this program in the JavaScript category. This is a complete program that you can use it on your website.
If you are thinking now how this minimal tabs actually are, then see the preview given below.
Preview Of Dark & Light Tab
See this video to getting an idea of how this tab program looks like.
Now you can see this 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:
jQuery UI Tabs With Minimal and Sexy Design Source Code
Before sharing source code, let’s talk about it. First I have created 2 different sections using HTML div for creating the light and dark tabs. The tab’s headings are based on HTML list tags <ul> & <li>Â and the tab’s content are based on simple divs and paragraphs. There I have used ID name on hyperlink tag to navigating, link gave an ID name to content and gave the ID in the link href ( <a href="#IDname">Â ).
Now using I have placed all the elements in the right place, as you can see in the preview. With CSS, I have done a lot of works like size, position, margin, padding, border, etc. Also, I have created the cool things with CSS like a glowing border on the active tab, hover effect, focus effect, etc. There I have used CSS @media query to creating responsive elements.
JS part has only 4 lines of codes because this program is based on a library. Only I have declared the animation-delay and style for showing and hiding items. 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, and the third file for JavaScript. Follow the steps to creating this 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 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 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>jQuery UI Minimal Sexy Tabs | Webdevtrick.com</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>jQuery UI Minimal Sexy Tabs</h1> <div class="lightTab"> <div class="minimalTabs"> <ul> <li><a href="#Web"> <span>Web D</span></a></li> <li><a href="#Graphic"> <span>Graphic D</span></a></li> <li><a href="#SEO"> <span>SEO</span></a></li> </ul> <div class="contents"> <div id="Web"> <h2>Web</h2> <img src="https://webdevtrick.com/wp-content/uploads/computer.png"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis dui quis convallis sagittis. Praesent nec varius dui. Nam sed fringilla diam. Donec sed ligula turpis.</p> <p>Maecenas ornare id orci in cursus. Phasellus eleifend, lorem lobortis placerat efficitur, dolor diam posuere elit, sit amet tempor massa tortor</p> </div> <div id="Graphic"> <h2>Graphic</h2> <img src="https://webdevtrick.com/wp-content/uploads/email.png"> <p>In mattis scelerisque tellus eget consectetur. Donec interdum sem arcu. Etiam molestie, ex nec pharetra vulputate, quam ante sodales nibh, quis consectetur metus neque at velit. Nam nec nibh vitae quam bibendum posuere non sit amet sapien.</p> </div> <div id="SEO"> <h2>SEO</h2> <img src="https://webdevtrick.com/wp-content/uploads/work.png"> <p>In mattis scelerisque tellus eget consectetur. Donec interdum sem arcu. Etiam molestie, ex nec pharetra vulputate, quam ante sodales nibh, quis consectetur metus neque at velit. Nam nec nibh vitae quam bibendum posuere non sit amet sapien. Pellentesque at nulla varius, malesuada nunc in, mattis lectus</p> </div> </div> </div> </div> <div class="darkTab"> <div class="minimalTabs dark"> <ul> <li><a href="#Web"> <span>Web D</span></a></li> <li><a href="#Graphic"> <span>Graphic D</span></a></li> <li><a href="#SEO"> <span>SEO</span></a></li> </ul> <div class="contents"> <div id="Web"> <h2>Web</h2> <img src="https://webdevtrick.com/wp-content/uploads/computer.png"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis dui quis convallis sagittis. Praesent nec varius dui. Nam sed fringilla diam. Donec sed ligula turpis.</p> <p>Maecenas ornare id orci in cursus. Phasellus eleifend, lorem lobortis placerat efficitur, dolor diam posuere elit, sit amet tempor massa tortor</p> </div> <div id="Graphic"> <h2>Graphic</h2> <img src="https://webdevtrick.com/wp-content/uploads/email.png"> <p>In mattis scelerisque tellus eget consectetur. Donec interdum sem arcu. Etiam molestie, ex nec pharetra vulputate, quam ante sodales nibh, quis consectetur metus neque at velit. Nam nec nibh vitae quam bibendum posuere non sit amet sapien.</p> </div> <div id="SEO"> <h2>SEO</h2> <img src="https://webdevtrick.com/wp-content/uploads/work.png"> <p>In mattis scelerisque tellus eget consectetur. Donec interdum sem arcu. Etiam molestie, ex nec pharetra vulputate, quam ante sodales nibh, quis consectetur metus neque at velit. Nam nec nibh vitae quam bibendum posuere non sit amet sapien. Pellentesque at nulla varius, malesuada nunc in, mattis lectus</p> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.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 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 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 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400); body { font-size: 1em; background: #fafafa; font-family: Lato; font-weight: 300; } h1 { text-align: center; font-size: 20px; } .minimalTabs { width: 90%; min-width: 360px; margin: auto; } .contents { padding: 20px 50px; min-height: 200px; } .darkTab { background: #333; color: white; } .darkTab, .lightTab { padding: 50px 0; } img { width: 60px; float: left; margin: 0 1em 1em 0; } .minimalTabs > ul { text-align: center; font-weight: 500; margin: 50px 0 0; padding: 0; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.2); z-index: 1; } .minimalTabs > ul > li { display: inline-block; background: #fafafa; padding: 0.6em 0; position: relative; width: 33%; margin: 0 0 0 -4px; } .minimalTabs > ul > li:before, .minimalTabs > ul > li:after { opacity: 0; transition: 0.3s ease; } .minimalTabs > ul > li.ui-tabs-active:before, .minimalTabs > ul > li.ui-tabs-active:after, .minimalTabs > ul > li.ui-state-hover:before, .minimalTabs > ul > li.ui-state-hover:after, .minimalTabs > ul > li.ui-state-focus:before, .minimalTabs > ul > li.ui-state-focus:after { opacity: 1; } .minimalTabs > ul > li:before, .minimalTabs > ul > li.ui-state-active.ui-state-hover:before, .minimalTabs > ul > li.ui-state-active.ui-state-focus:before { content: ""; position: absolute; z-index: -1; box-shadow: 0 2px 3px rgba(22, 195, 255, 0.5); top: 50%; bottom: 0px; left: 5px; right: 5px; border-radius: 100px / 10px; } .minimalTabs > ul > li:after, .minimalTabs > ul > li.ui-state-active.ui-state-hover:after, .minimalTabs > ul > li.ui-state-active.ui-state-focus:after { content: ""; background: #fafafa; position: absolute; width: 12px; height: 12px; left: 50%; bottom: -6px; margin-left: -6px; transform: rotate(45deg); box-shadow: inset 3px 3px 3px rgba(22, 195, 255, 0.5), inset 1px 1px 1px rgba(0, 0, 0, 0.3); } .minimalTabs > ul > li.ui-state-hover:before, .minimalTabs > ul > li.ui-state-focus:before { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); } .minimalTabs > ul > li.ui-state-hover:after, .minimalTabs > ul > li.ui-state-focus:after { box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.2), inset 1px 1px 1px rgba(0, 0, 0, 0.3); } .minimalTabs > ul > li.ui-state-focus a { text-decoration: underline; } .minimalTabs > ul > li:focus { outline: none; } .minimalTabs > ul > li a { color: #444; text-decoration: none; } .minimalTabs > ul > li a:focus { outline: none; } .minimalTabs > ul > li a span { position: relative; top: -0.5em; } .minimalTabs.dark > ul { border-bottom-color: rgba(255, 255, 255, 0.3); } .minimalTabs.dark > ul > li { background: #333; } .minimalTabs.dark > ul > li:before, .minimalTabs.dark > ul > li.ui-state-active.ui-state-hover:before, .minimalTabs.dark > ul > li.ui-state-active.ui-state-focus:before { box-shadow: 0 2px 3px rgba(255, 255, 255, 0.3); } .minimalTabs.dark > ul > li:after, .minimalTabs.dark > ul > li.ui-state-active.ui-state-hover:after, .minimalTabs.dark > ul > li.ui-state-active.ui-state-focus:after { background: #333; box-shadow: inset 3px 3px 3px rgba(255, 255, 255, 0.3), inset 1px 1px 1px rgba(255, 255, 255, 0.5); } .minimalTabs.dark > ul > li.ui-state-hover:before, .minimalTabs.dark > ul > li.ui-state-focus:before { box-shadow: none; } .minimalTabs.dark > ul > li.ui-state-hover:after, .minimalTabs.dark > ul > li.ui-state-focus:after { box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.4); } .minimalTabs.dark > ul > li a { color: white; } @media screen and (min-width: 1000px) { .darkTab, .lightTab { width: 50%; float: left; padding: 0; } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(".minimalTabs").tabs({ show: { effect: "slide", direction: "left", duration: 200, easing: "easeOutBack" } , hide: { effect: "slide", direction: "right", duration: 200, easing: "easeInQuad" } }); |
That’s It. Now you have successfully created jQuery UI Tabs With Minimal and Sexy Design, Dark & Light Background. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Thank you
Hello,
Thanks for the jQuery Tabs code.
I am generating tabs through php code in joomla and pasted all the code in one file. Tabs are generating perfectly, but not stacked. I generated two tabs like Day 1 and Day 2, but both are horizantally aligned but not stacked over each other. I checked for errors in browser developer tools console. The console found the error in jQuery and it says that:
TypeError: jQuery(…).tabs is not a function
pointing at error line:
jQuery(“.minimalTabs”).tabs({
Thanks