incidence

Digitalblend-CL

Caraccessories.com home page tabs

Page tabs in Magento

The home page of the caraccessories.com website has a row of tabs for the custom products and popular products that are being promoted, everything was hand coded including the links to the products. I was looking around the internet and found a link to the below article and used it as a base for the tabs used in the website.

 

Tabs HTML

The code for the table sits in side of several DIV containers, all of the links, images and text sit in a unordered list; you will have one list for each of the tabs. The HTML code is not that complicated, for each product in the row there is a list item that is added, in this case there are four products for each tab.

All of the links inside of the Magento CMS Block are referenced with Magento Varialbles, when the code is inserted into the template the variables will be coverted into links to the images or pages.

	
	<div class="tab_container">
<!--************************************ 

#tab1 

*****************************************-->
<div class="tab_content" id="tab1" style="display: block;">
<div class="text"><span>
Customized and personalized car accessories:</span></div>
<ul id="tab1">
<li><span><a href="#" title="">
<img border="0" alt="" src="/blog/{{skin url="images/custom-porsche-cover-thumb.png"}}">
</a></span>
<p><a href="#" title="">Custom Car covers</a></p>
</li>
<li><span><a href="#" title="">
<img border="0" alt="" src="/blog/{{skin url="images/custom-dashmat-thumb.png"}}">
</a></span>
<p><a title="" href="/blog/{{store url="dash-mats-and-dash-covers"}}">Custom Dash Mats</a></p>
</li>
<li><span><a href="#" title="">
<img border="0" alt="" src="/blog/{{skin url="images/custom-floormat-thumb.png"}}">
</a></span>
<p><a href="#" title="">Custom floor mats</a></p>
</li>
<li><span><a href="#" title="">
<img border="0" alt="" src="/blog/{{skin url="images/custom-seat-cover-thumb.png"}}">
</a></span>
<p><a href="#" title="">Custom seat covers</a></p>
</li>
</ul>
</div>
<!--*************************************** 

#tab2 

*******************************************-->
<div class="tab_content" id="tab2" style="display: none;">
<div class="text"><span>The most popular products are:</span></div>
<ul id="tab2">
<li><span><a href="#" title="">
<img border="0" alt="" src="/blog/{{skin url="images/popular-dashmat-thumb.png"}}">
</a></span>
<p><a href="#" title="">Carpet dash board covers</a></p>
</li>
<li><span><a href="#" title="">
<img border="0" alt="" src="/blog/{{skin url="images/popular-side-window-thumb.png"}}">
</a></span>
<p><a href="#" title="">Side window deflectors</a></p>
</li>
<li><span><a href="#" title="">
<img border="0" alt="" src="/blog/{{skin url="images/popular-lebra-thumb.png"}}">
</a></span>
<p><a href="#" title="">Car bras</a></p>
</li>
<li><span><a href="#" title="">
<img border="0" alt="" src="/blog/{{skin url="images/popular-cargo-liner-thumb.png"}}">
</a></span>
<p><a href="#" title="">Cargo liners </a></p>
</li>
</ul>
</div>
	

Tabs Javascript Code

The JavaScript that we use for the actual trigger is very simple, and jQuery is loaded form google. I did not make any chages to the jQuery script except to remove the jQuery short cuts so that the tabs would work in the installed version of Magento.

I am operating under the assumption that you are able to install jQuery or already have it coded into the template of your install of magento.

This is the actual script used in the website tabs for the home page.

	
jQuery(document).ready(function() {
	jQuery(".tab_content").hide();
	jQuery(".tab_content:first").show();
	jQuery("ul.tabs li").click(function() {
		jQuery("ul.tabs li").removeClass("active");
		jQuery(this).addClass("active");
		jQuery(".tab_content").hide();
		var activeTab = jQuery(this).attr("rel");
		jQuery("#"+activeTab).fadeIn();
	});
});
	

Tabs CSS Code

The CSS for this tab has lots of absolute positioning and z-index so that the overlay will always appear over the tabs, I decided not to use jQuery UI for the tabs because of time constraints. I had very little time to get the CSS written, so I positioned everything absolutely; the images were positioned relatively when I discovered that they would not appear above the jQuery UI.


/************ Tabs Container ************/
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 28px;
	border: none;
	width: 100%;
	z-index: 100;
}
/************** Top Tabs ***********/
ul.tabs li {
	margin: 0;
	cursor: pointer;
	padding: 0px 21px;
	height: 31px;
	line-height: 31px;
	border: none;
	font-weight: bold;
	overflow: hidden;
	background: url(../images/hp_tabs/tab-inactive.png) top right no-repeat;
	z-index: 100;
}
ul.tabs li:hover {
	background: url(../images/hp_tabs/tab-hover.png) top right no-repeat;
	z-index: 200;
}
ul.tabs li.active {
	border-bottom: 1px solid #FFFFFF;
	background: url(../images/hp_tabs/tab.png) top right no-repeat;
	color: #ffffff;
	z-index: 200;
}
ul.tabs li#custom { 
	position: absolute;
	top: 0;
	left: 0;
}
ul.tabs li#popular {
	position: absolute;
	top: 0;
	left: 210px;
}
ul.tabs li.slogan { 
	position: absolute;
	top: 0;
	left: 450px; 
	width: 500px;
	background: none;
}
/************* Contetnt Containers **************/
.container {
	width: 1000px;
	height: 265px;
}
.tab_container { 						/* container for content tabs, images and links  */
	border-top: 2px solid #b90000;
	border-bottom: 2px solid #b90000;
	border-left: none;
	border-right: none;
	width: 100%;
	background: #FFFFFF;
	height: 230px;
	z-index: 90;
}
.tab_content { 							/* container for images and links */
	padding: 0 0 0 20px;
	font-size: 1.2em;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
.tab_content .text span {				/* tab title css */
	font-size: 18px;
	font-weight: 400;
	font-family: Arial, Helvetica, sans-serif;
	margin: 10px 10px 0 12px;
	color: #464646;
}

.tab_content .text,
.tab_content .text span,
div#tab1 ul#tab1, 
div#tab2 ul#tab2,
div#tab1 ul#tab1 li a img, 
div#tab2 ul#tab2 li a img,
div#tab1 ul#tab1 li p a, 
div#tab2 ul#tab2 li p a {
	position: relative;
	float: left;
	clear: left;
	display: inline;
}
ul.tabs,
.container,
.tab_container,
div#tab1 ul#tab1 li, 
div#tab2 ul#tab2 li {
	position: relative;
	float: left;
	clear: right;
	display: inline;
}

/************** Product slide content ***********/
div#tab1 ul#tab1, 
div#tab2 ul#tab2 {
	margin: 0;
	padding: 0;
}
div#tab1 ul#tab1 li, 
div#tab2 ul#tab2 li {
	margin: 0 !important;
	padding: 0 !important;
}
/********** Product Image links *********/
div#tab1 ul#tab1 li a img, 
div#tab2 ul#tab2 li a img {
	padding: 0;
	margin: 5px 10px 3px 10px;
	border: 1px solid #bfbfbf;
}
div#tab1 ul#tab1 li a:hover, 
div#tab2 ul#tab2 li a:hover {
	color: #b90000;
	border: none;
}
/********** Product Text Links *********/
div#tab1 ul#tab1 li p, 
div#tab2 ul#tab2 li p {
	display: inline;
	font-size: 14px;
	font-weight: 400;
}
div#tab1 ul#tab1 li p a, 
div#tab2 ul#tab2 li p a {
	padding: 0;
	margin: 3px auto;
	text-decoration: none;
	width: 100%;
	text-align: center;
	font-weight: 700;
}