Lesson 3: Part 2 - Designing Widgets: Horizontal & Vertical Tab Design

Tabs and alert dialog boxes can be created using some plugins. But if we can create it using simple CSS and javascript code, then it makes more sense to design it rather than downloading any plugins and adding unnecessary files to our project. This lesson is about horizontal and vertical tab design. 

TABS

Tabs are mainly used to create categorized navigations on the web page. There are 2 types of tabs commonly used. They are horizontal tabs and vertical tabs. Let us see how we can create these tabs one by one.

1. Horizontal Tabs

Horizontal tabs look something like the below image:

Example of Horizontal Tab

The tabs are made up of a list of tab items along with the list of tab content so, we will be creating 2 unordered lists for the tab item and the content. The Html code would be:

HTML Code for the Horizontal Tab

I have not shown the complete code for the content list because I have only changed the title for each list item. I have added an active class to the first li of both the lists because by default the first tab will be active. 

Now let us write CSS for this to look like a horizontal tab. 

We will start designing the tab first. Here is the code for the tabs:-

CSS code for the tabs

This will give you the below result:

Now, let us see how this content part can be designed along with the fading effect while switching the tabs.

Intermediate CSS code for the content

This would give you the output like below:

Output for the intermediate CSS Code

Now, let us design the active tab. The CSS for the active tab would be:

CSS code for the active tab and content

So, we have designed the tabs successfully.

Final Output of the Tab

Now, to switch the tabs on click, I have used jQuery in the example. If you are new to jquery, don't worry right now. I am going to write a post on that. As of now just include the jQuery file in your code (Download the latest version of jquery from jQuery Download Page and include <script src="jquery file path" type="text/javascript"></script> in the head tag and place the jQuery code for the tab click inside script tag before ending the body tag (</body>)). If you are using jsFiddle to learn this, then you need to select this option as shown below:

Adding jquery in fiddle

Below is the jQuery code for the tab click:

jQuery for the tab click event

Here is the jsFiddle URL for your reference: jsFiddle Example. There is one question from me for you:- Is this CSS code compatible with cross-browsers? Write to: info@beawesomewithprogramming.co.in

2. Vertical Tabs

Vertical tabs look like below:

Vertical Tab Example

Here, we do not have a tabular structure, the 2 unordered lists would be wrapped inside a division and we can change the display property of division to flex. This is the use-case of the display flex. If you are unaware of this property please refer: Lesson 2 - Part 4: 10 Important CSS properties: The display property. Rest of the things are the same as we did for the vertical tabs. Can you try this yourself? If you are facing any issue creating this, you can refer to the jsFiddle link:- jsFiddle Example.

For any queries and suggestions, you can reach me at info@beawesomewithprogramming.co.in and join the Facebook Page for more updates.

Subscribe to Be a full stack .NET developer by Email