How to make tabbed content slider

Total
0
Shares

psd file exampleDEMO.Tabbed Slider DOWNLOAD.

Credits goes to graphicsfuel.com where you can download psd version of this content slider.

Surfing internet you bump into great tabbed content slider, but the problem is that you have only the psd file.

Today we are going to reveal some basic tips in order to make this psd file alive.

First of all – ANALYSE.ANALYSE

Secondly – PREPARATION. PREPARATION

Thirdly – STRICTURE. After we`ve prepared all necessary jpeg, png, text files. We are going to create HTML file. Afterwards we create style sheet and then make our slider alive by means of jQuery.

Finally – CODING.

HTML file. First of all in head section going all necessary information. We import 2 external files (jquery-ui-personalized-1.5.2.packed.js & jquery-1.2.6.min.js) which help us to make slider more dynamic.

[sourcecode language=”html”]<br /><br /><br /><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><br /><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br /><br />
<head><br /><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><br />
<title>Tabbed Slider Content Demo</title><br /><br />
<link href="style.css" rel="stylesheet" type="text/css" /><br /><br />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script><br /><br />
<script type="text/javascript" src="jquery-ui-personalized-1.5.2.packed.js"></script><br /><br />
<script type="text/javascript" src="code.js"></script><br /><br />
</head><br /><br />
[/sourcecode]



Afterwards we code our menu. I`ll write only main piece of code, rest you should finish by yourself.

[sourcecode language=”html”]<br /><br />
<div id="wrapper"><br /><br />
<div id="main"><br /><br />
<ul class="nav" id="nav2"><br /><br />
<li class="selected"><a href="#1"><p>Custom Websites<br/>&nbsp</p></a></li><br /><br />
<li><a href="#2"><p>Security Shield Badge <br/>&nbsp</p></a></li><br /><br />
<li><a href="#3"><p>Ecommerce Website PSD<br/>&nbsp</p></a></li><br /><br />
<li><a href="#4"><p>Product Website<br/>&nbsp</p></a></li><br /><br />
<li><a href="#5"><p>Creative Portfolio<br/>&nbsp</p></a></li><br /><br />
<br /><br />
</ul><br /><br />
<br /><br />
<div id="1"><br /><br />
<div id="intabdiv"><br /><br />
<h1>Clean Corporate & Business Website</h1><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
Suspendisse odio risus, volutpat at bibendum ut, facilisis quis mauris.<br /><br />
Ut viverra diam non ante scelerisque accumsan. Cras quis suscipit elit. Quisque ornare molestie lacus sed tempus. Praesent id ante arcu, a luctus nibh. Fusce laoreet blandit quam, nec accumsan dolor iaculis nec.<br /><br />
</p><br /><br />
<br/><br /><br />
&nbsp &nbsp &nbsp<br /><br />
<a href="https://land-of-web.com"><br /><br />
<img src="images/download.png" width="250" height="64" border="0px solid white" /><br /><br />
</a><br /><br />
</div><br /><br />
<div id="tabdivimg"><br /><br />
<img src="images/1.png" width="435" height="320" /><br /><br />
</div><br /><br />
<br /><br />
</div><br /><br />
<br /><br />
<div id="2"><br /><br />
<div id="intabdiv"><br /><br />
<h1>Download security shield badge and icons</h1><br /><br />
<p>Etiam a ligula ut erat auctor ornare. Donec adipiscing porta tortor, ac pulvinar velit ultricies eu.<br /><br />
Maecenas a erat vel ipsum scelerisque blandit. Aliquam nec magna dui, id elementum urna. Morbi varius pellentesque libero, ultrices laoreet eros suscipit at. Donec<br /><br />
<a href="https://land-of-web.com"> read more </a><br /><br />
</p></div><br /><br />
<br /><br />
<div id="tabdivimg"><br /><br />
<img src="images/2.png" width="371" height="358" /><br /><br />
</div><br /><br />
</div><br /><br />
[/sourcecode]

Then, lets set a few style for the main part of our slider. Of course,it`s not a complete style sheet, and rest you can find in download package.

STYLE.css

[sourcecode language=”css”]<br /><br />
ul.nav {<br /><br />
width:900px;<br /><br />
height:23px;<br /><br />
position: absolute;<br /><br />
bottom: 40px;<br /><br />
left:0px;<br /><br />
}<br /><br />
ul.nav li {<br /><br />
width:180px;<br /><br />
height:80px;<br /><br />
float:left;<br /><br />
}<br /><br />
<br /><br />
.nav li {<br /><br />
text-decoration:none;<br /><br />
list-style-type:none;<br /><br />
}<br /><br />
<br /><br />
.nav li p {<br /><br />
padding-left:50px;<br /><br />
padding-right:20px;<br /><br />
padding-top:5px;<br /><br />
text-decoration:none;<br /><br />
color:#71001a ;<br /><br />
font-size:16px;<br /><br />
font-weight:bold;<br /><br />
line-height: 20px;<br /><br />
background-image:url(images/separate.png);<br /><br />
background-position:right top;<br /><br />
background-repeat:no-repeat;<br /><br />
<br /><br />
}<br /><br />
li.selected<br /><br />
{<br /><br />
margin-top:-2px;<br /><br />
margin-left:-1px;<br /><br />
background-image:url(images/nav2.png);<br /><br />
background-repeat:no-repeat;<br /><br />
background-position:left top;<br /><br />
color:#ffffff;<br /><br />
}<br /><br />
[/sourcecode]

And finally, coding. I`ll show you only how to code first menu item, all next menu items will be coded in the same manner.

CODE.js

[sourcecode language=”js”]<br /><br />
$(function() {<br /><br />
//Set the position of small popup image<br /><br />
var offsetX = -10;<br /><br />
var offsetY = -85;<br /><br />
//Select the element of navigation<br /><br />
$(‘ul.nav li:first’).hover(function(e) {<br /><br />
//Insert image<br /><br />
$(‘<img id="popimg" src="images/11.png" alt="big image" />’)<br /><br />
//Set css property to #popimage using .css<br /><br />
.css(‘top’, e.pageY + offsetY)<br /><br />
.css(‘left’, e.pageX + offsetX)<br /><br />
.appendTo(‘body’);<br /><br />
}<br /><br />
, function() {<br /><br />
//Hide Popup when mouseout<br /><br />
$(‘#popimg’).remove();<br /><br />
});<br /><br />
<br /><br />
$(‘ul.nav li:first’).mousemove(function(e) {<br /><br />
$("#popimg").css(‘top’, e.pageY + offsetY).css(‘left’, e.pageX + offsetX);<br /><br />
});<br /><br />
//////////// Show visited item when mousedown<br /><br />
$(‘ul.nav li:first’).mousedown(function(e) {<br /><br />
//we remove class "selected" from all menu items<br /><br />
$(‘ul.nav li:nth-child(2)’).removeClass(‘selected’);<br /><br />
$(‘ul.nav li:nth-child(3)’).removeClass(‘selected’);<br /><br />
$(‘ul.nav li:nth-child(4)’).removeClass(‘selected’);<br /><br />
$(‘ul.nav li:nth-child(5)’).removeClass(‘selected’);<br /><br />
// put class "selected" on the visited menu item<br /><br />
$(‘ul.nav li:first’).removeClass(‘selected’).addClass(‘selected’);<br /><br />
});<br /><br />
});<br /><br />
[/sourcecode]
5 comments
  1. Absolutely Great! The contexts were very informational and educational. I’ve learned a lot of ideas through this stuff. Thank you!

Leave a Reply

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

You May Also Like

30 Amazing Examples of Vibrant Letterpress

Letterpress is a fairly common technique that allows to create unique and attractive print artworks. Whereas you like minimal style, black and white color scheme, or even prefer to make…

30+ Masterful Light and Clean Website Designs

When it comes to design sometimes less is more it means that you can simply use white (or light) background and black font to create high-quality website design. Using only…

Weekly Fresh Web Design Freebies – Vol. 22 (12-21-2011)

Penultimate showcase of  recent valuable freebies in this year. I`ve ащгтв 2 high-quality wordpress themes (one of which is useful job board template), 6 beautiful psd website templates, 3 ui…

Freebie: Coming Soon HTML/CSS Template

Today`s freebie is html/css coming soon page template. I`ve used 960 grid system and simple jquery countdown to make it alive. You can use it freely for any purpose, except…