Tab menus are one of the most common form of navigation buttons used in web design, the most common of which is usually a round cornered tab. To make round cornered tabs, you will usually have to use images for the corners/edges to get the effect. I have implemented a dynamic Tab menu using jQuery and CSS without using images. Taking the concept from my previous post on Round Cornered Div tags without using images, I have implemented this round cornered tab menu using the nifty power of jQuery which makes it dynamic in nature.
Why should you use this Tab Menu:
- VERY easy to use and modify.
- Easy to understand and modify the CSS.
- Faster to load because no images are used.
- The changeTab() function can change the tab selection dynamically.
- This Tab Menu can be used with Ajax like functionalities as well where the contents can be loaded dynamically based upon the click event.
- Can be used with your dynamic code just by setting the <li> class to ‘sel’ using your code.
- Scalable to any size by modifying the CSS only.
This is how the tabbed menu looks like:
How does it work: The trick is pretty simple; The header for every tab is set dynamically by using jQuery. When a tab selection is made, the inactive tab header is replaced by the active tab header and vice versa.
The JavaScript/jQuery code:
The jQuery code is pretty simple to understand because only selectors are used to select the appropriate tab and change the CSS styles and colors. When the page loads for the first time, rounded corners and CSS is applied to the li tag with class ‘sel’ and a click event is assigned to all the p or a tags inside the Tab Menu.
The changeTab() function is used to handle the tab click event for swapping the active and inactive tabs. Along with that any kind of Ajax calls or page redirects can be made based upon the tab button clicked. The TabRoundedCorners() function is used to populate the Tab header based upon active or inactive type.
Put the following code in the head section of your page:
/* Developed by: Abhinay Rathore [web3o.blogspot.com] */
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Add Inactive tab round corners where class not equals to 'sel'
$("#tabs > ul > li[class!='sel']").prepend(TabRoundedCorners('inactive'));
//Add Active tab round corners where class equals to 'sel'
$("#tabs > ul > li[class='sel']").prepend(TabRoundedCorners('active'));
//Select tab where li class equal to 'sel'
$("#tabs > ul > li[class='sel'] > p").addClass('sel');
$("#tabs > ul > li[class='sel'] > a").addClass('sel');
//Assign click event to all the tabs
$("#tabs > ul > li > p").click(function(){ changeTab(this) });
$("#tabs > ul > li > a").click(function(){ changeTab(this) });
});
function changeTab(tabId)
{
//Remove Active tab round corners where class equals to 'sel'
$("#tabs > ul > li[class='sel']").children(":first-child").remove();
//Add Inactive tab round corners where class equals to 'sel'
$("#tabs > ul > li[class='sel']").prepend(TabRoundedCorners('inactive'));
//Remove 'sel' class for the currently selected tab
$("#tabs > ul > li[class='sel']").children().removeClass('sel');
$("#tabs > ul > li[class='sel']").removeClass('sel');
//Remove Inactive rounded corners from clicked tab
$(tabId).parent().children(":first-child").remove();
//Add 'sel' class to p tag under clicked tab
$(tabId).parent().children(":first-child").addClass('sel');
//Add 'sel' class to the clicked tab li
$(tabId).parent().addClass('sel');
//Add Active tab round corners to the clicked tab
$(tabId).parent().prepend(TabRoundedCorners('active'));
// Perform Action based upon the selected tab button
// if you are using
switch($(tabId).text())
{
case "Home": break;
case "Work": break;
case "Personal": break;
case "Blog": break;
case "About": break;
case "Contact": break;
}
}
function TabRoundedCorners(type){
return "<div id=\'" + type + "_tab_rounder\'>" +
"<div class=\'top_left\'><div class=\'top_left_inside\'>•</div></div>" +
"<div class=\'top_right\'><div class=\'top_right_inside\'>•</div></div>" +
"</div>";
}
</script>
CSS code:
The CSS code contains very minimal amount of CSS for the tabs and the round cornered tab headers. There are two sets of round cornered header CSS for active and inactive tabs. To make any modifications in the size of the tabs should be done to both these sets for consistency. To change the Tab colors, you only need to replace LightBlue and Gainsboro with your custom colors values in the whole CSS section.
Place the following CSS code in the head section of your page:
<style type="text/css">
<!--
#tabs {
margin: 0px;
padding: 0px;
}
#tabs ul
{
margin: 0px;
padding: 0px;
list-style: none;
}
#tabs li
{
margin: 0px 1px 0px 1px;
float: left;
padding: 0px;
/*Set width to 'auto' for automatic width*/
width: 80px;
}
#tabs p, #tabs a
{
display: block;
color: #069;
font-family: Verdana,
font-size: small;
text-decoration: none;
background-color: Gainsboro;
padding: 0px 8px 4px 8px;
margin: 0px;
cursor: pointer;
text-align: center;
}
#tabs p:hover, #tabs a:hover
{
color: #FFF;
}
#tabs p.sel, #tabs a.sel
{
color: #FFF;
background-color: LightBlue;
font-weight: bold;
}
/* Active Tab rounded corners */
#active_tab_rounder { height: 5px; position: relative; background-color: LightBlue;}
#active_tab_rounder .top_left, #active_tab_rounder .top_right {
height: 5px; width: 5px;
position: relative; overflow: hidden;
background-color: White;
}
#active_tab_rounder .top_left { float: left; }
#active_tab_rounder .top_right { float: right; }
#active_tab_rounder .top_left_inside, #active_tab_rounder .top_right_inside {
height: 5px; width: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px; color: LightBlue;
position: relative; line-height: 10px;
}
#active_tab_rounder .top_left_inside { left: -2px; }
#active_tab_rounder .top_right_inside { left: -6px; }
/* Inactive Tab rounded corners */
#inactive_tab_rounder { height: 5px; position: relative; background-color: Gainsboro;}
#inactive_tab_rounder .top_left, #inactive_tab_rounder .top_right {
height: 5px; width: 5px;
position: relative; overflow: hidden;
background-color: White;
}
#inactive_tab_rounder .top_left { float: left; }
#inactive_tab_rounder .top_right { float: right; }
#inactive_tab_rounder .top_left_inside, #inactive_tab_rounder .top_right_inside {
height: 5px; width: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px; color: Gainsboro;
position: relative; line-height: 10px;
}
#inactive_tab_rounder .top_left_inside { left: -2px; }
#inactive_tab_rounder .top_right_inside { left: -6px; }
-->
</style>
HTML code:
The HTML code for the Tab Menu is very simple and easy to modify. The Tab Menu is represented by an unordered HTML list. The list elements can contain HTML links or Paragraph tags for tab heading. The default selected tab can be set by assigning the ‘sel’ class to the li tag.
Modify and place the following code inside the your HTML page body:
<div id="tabs">
<ul>
<li><a href="javascript:void(0)">Home</a></li>
<li><p>Work</p></li>
<li class="sel"><p>Personal</p></li>
<li><p>Blog</p></li>
<li><p>About</p></li>
<li><p>Contact</p></li>
</ul>
</div>
Thank you for such a fantastic blog. Where else could anyone get that kind of info written in such a perfect way? I have a presentation that I am presently working on, and I have been on the look out for such information.
ReplyDeletepython training in bangalore | python olnine training
ReplyDeleteaws training in Bangalore | aws online training
artificial intelligence training in bangalore | artificial intelligence online training
machine learning training in bangalore | machine learning online training
data science training in bangalore | data science online training
online learning management system software
ReplyDeletegoogle meet alternative
online student management system
school software
school management erp
This is innovative site. Keep it up.
ReplyDeleteShort Term Investment Tips
Thank you so much for sharing a great article. Keep up the great work!
ReplyDeletemanaging call center operations