How to Make jQuery Horizontal and Vertical Tabs

How to Make jQuery Horizontal and Vertical Tabs
[rating itemreviewed=”How to Make jQuery Horizontal and Vertical Tabs ” rating=”10″ reviewer=”Filiz ÖZER” dtreviewed=”19.04.2013″ summary=”Best tutorial for jquery horizontal and vertical tabs” best=”10″ worst=”0″][/rating]

Each day we keeping up to sharing articles about web design and improvements. Today we prepared an educative article for you. What about to learn how to create horizontal and vertical shaped amazing tab elements created with JQuery? Please visit demo page for a sample page.

So what this tab elements does? There are countess of variations you can do with this horizontal and vertical tab elements. You can use this plugins in 3 zone widgets, text contents, site tours, services area and lots of areas more. They are really simple to use. All are 100% free and at your service. You can improve your projects with this elements with few simple steps. We created standart styles. Rest is on you.

Please share at your comments if there tab elements you have, so we can also share them with the rest of our friends and followers. Now let’s take a look what to do with this plugins.

tabs-preview

Live Preview Download Now

Step #1 – add jQuery

At first step, we need a jQuery file for this plugin to work. We are adding most up-to-date jQuery file released by Google. Skip this step if you already have jQuery.


Step #2 – call plugins

At next step, we need different plugins for our elements to work. We created different codes for each tab elements. Insert codes we shared below into the your designs footer area / or a script file you created. now your tab element is ready to work.


   

Step #3 – add CSS

At final step, lets make a classic style to our tab elements we work. I created a standart style for you. You can improve this style and share with us. Add codes we share below into the your style file.

.tab_content,
.tour_content {
	background:#fff;
	padding:10px;
	position:relative;
	margin-bottom:20px;
}

.tour {
	list-style:none;
	width:25%;
	float:left;
	margin:0;
}

.tour li {
	position:relative;
	padding:0;
}

.tour li a {
	padding-top:8px;
	padding-bottom:8px;
	display:block;
	position:relative;
}

.tour_box {
    display: none;
    float: left;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 75%;
}

.tour li {
	border-bottom:1px solid #ececec;
	overflow:hidden;
	position:relative;
}

.tour li a {
	text-transform:uppercase;
	font-size:13px;
}

.tour li a,
.tabs > li a {
	border-color: #d7d5cf;
	border-bottom-color: #d0cfc9;
	background: #ffffff; /* Old browsers */
}

.tour li a:hover,
.tabs > li a:hover, {
	border-color: #999999;
	border-bottom-color: #999999;
	background: #eeeeee; /* Old browsers */
}
		
.tour li a {
	line-height:20px;
	display:block;
	padding:10px;
	margin:0;
	position:relative;
}

.tab {
	margin-bottom:20px;
	overflow:hidden;
	position:relative;
}

.tabs {
	border-bottom:1px solid #ececec;
	margin:0;
	display:table;
	width:100%;
}

.tabs li {
	line-height:20px;
	padding-left:0;
	display:table-cell;
	position:relative;
}

.tabs > li a {
	font-size:14px;
	border-right:1px solid #DDDDDD;
	display:block;
	padding:10px 10px 10px 20px;
	line-height:20px;
}

.tabs > li:last-child a {
	border-right:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}

.tabs > li a.current {
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}

.tabs_tab, 
.tabs {
	overflow:hidden;
	position:relative;
}
.tabs_tab {
	background-color:#ffffff;
	display:none;
	padding:10px 0;
}

Step #4 – usage

Now it’s time for how to use it. You will see how simply it works with sample codes we shared below.

Horizontal Usage

            
                     

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Vertical Usage

	
	

Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

If you done steps properly, tab elements will appear same as demo page. All codes are available at download link. You can download and use free from there. We hope this educative article will be useful for you. Thanks a lot or spare time to read it. Please help us by sharing this article in your social media profiles and also bookmark us.

Our last article was about How to Make Image Hover Effects with jQuery. We recommend you to read it also and please share this article on your social media profiles and also bookmark us.

Post a Comment

Your email address will not be published. Required fields are marked *