jquery ui tabs minimal and sexy design

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.

Live Demo

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.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given below.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

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.

2 COMMENTS

  1. 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

LEAVE A REPLY

Please enter your comment!
Please enter your name here