I won’t explain HTML and CSS code (is very simple and intutive):

		Previous
		Next
	

CSS file:

* {margin:0;padding:0;}

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}
.carousel {
	position: relative;
	overflow:hidden;
	height:500px;
	width:540px;
	margin:50px auto
}
	.carousel .ctrls {
		margin:10px
	}
	.carousel ul {
		position: absolute;
		width:8000px;
	}
		.carousel li {
			float:left;
			width:98px;
			height:98px;
			border: 1px solid #fff;
			list-style:none;
			margin-right:10px;
			text-align: center;
		}

The good part of this carousel is that you can have as many as you want in your page. You can have both fixed and fluid width and will work with no problem. Or at least no problem: on fluid layout, some images can be cutted. So, the best use is fixed width. Also, you can have autoscroll (with timers, i will say more later), but is not recommended because you may encounter some performance troubles.

After we include last version of jQuery, we have to do these things:

1) Iterate trough all .carousel containers (if you want to pick another name, this is the place and this is also the time!) and set the width.

$('.carousel').each(function(){
	var _this=this;
	var elWidth = $(_this).find('li:eq(0)').width()+12;
	$(_this).find('ul').width(elWidth*$(_this).find('li').length).css('left', 0);
});

We assume that all LI have same width, 10px margin and a border. So we adjust the width with 12 px (2px from border). If you have a wider margin (or none) change it, otherwise you will have some serious problems

The previous/next buttons we will control with a separate function, because we don’t have double scroll on double click, right? We put the function INSIDE of the each loop:

function carouselCtrls () {
	$(_this).find('a.prev').unbind().click(function(){
		$(this).unbind();
		if(parseInt($(_this).find('ul').css('left'))<0) {
			$(_this).find('ul').animate({
				left: '+='+elWidth
			}, function(){
				carouselCtrls();
			});
		}
		return false;
	});
	$(_this).find('a.next').unbind().click(function(){
		$(this).unbind();
		var maxWidth = (parseInt($(_this).find('ul').width())-$(_this).width()-10)-(-parseInt($(_this).find('ul').css('left')));
		if(maxWidth>0){

		$(_this).find('ul').animate({
			left: '-='+elWidth
		}, function(){
				carouselCtrls();
			});
		}else {
			$(_this).find('ul').animate({left:0},function(){
				carouselCtrls();
			});
		}
		return false;
	});
	};

Let see how it works (i will explain only one link because the other one works same – but reverted):

1. Unbind any action from current link. This is because some users use double click on web (yes, there is some users like that!). So, once clicked, you can’t click again on the same link. Will won’t work. Seriously!
2. We verify if the carousel is scrolled, and if it is, to be scrolled enough to not be outside the area
3. Animate the carousel and call the control function after the animation is complete. After the animation is complete, you can click on the next/prev button

So, the final code looks like this:

$('.carousel').each(function(){
	var _this=this;
	var elWidth = $(_this).find('li:eq(0)').width()+12;
	$(_this).find('ul').width(elWidth*$(_this).find('li').length).css('left', 0);
	carouselCtrls();

	function carouselCtrls () {
	$(_this).find('a.prev').unbind().click(function(){
		$(this).unbind();
		if(parseInt($(_this).find('ul').css('left'))<0) {
			$(_this).find('ul').animate({
				left: '+='+elWidth
			}, function(){
				carouselCtrls();
			});
		}
		return false;
	});
	$(_this).find('a.next').unbind().click(function(){
		$(this).unbind();
		var maxWidth = (parseInt($(_this).find('ul').width())-$(_this).width()-10)-(-parseInt($(_this).find('ul').css('left')));
		if(maxWidth>0){

		$(_this).find('ul').animate({
			left: '-='+elWidth
		}, function(){
				carouselCtrls();
			});
		}else {
			$(_this).find('ul').animate({left:0},function(){
				carouselCtrls();
			});
		}
		return false;
	});
	};
});

And that’s all!
You can see a demo HERE. In few days i will show you how to make a pagination on this carousel and how to make an autoscroll carousel Stay tuned!

• big size – around 50k, maybe more, without another 20k for jQuery
• some IE6 problems – yes, IE6 still has a huge market share. We still need to pull out our hair to make this piece of crap display good all pages
• you cannot highlight current tab – if you want to use it as a tab pagination, you simply cannot highlight selected tab. Or current page.

So, on an older project of mine, i wanted to use a very light script for doing this. Because i was in a really rush, i didn’t focus on unobtrusive scripts so i put some inline javascript (yes, shame on me).

 Tab 1
 Tab 2
 Tab 3

Ok, this is for control. The most important thing is that you can put this ANYWHERE in your page. For example, you can put controls on header and slider on footer of your page. Only your imagination is the limit.

The next thing you have to do is to put some markup:

Tab 1 content
Tab 2 content
Tab 3 content

This script also has some limitation:

• You can have only one on page;
• Is pretty obtrusive;
• Doesn’t do auto slide. Of course, you can set a timer for this, but i wanted an easy example.

The next thing we have to do is to set some CSS.

Width and height for carousel:

#slider {
	width:674px;
	height:185px;
}

The magic of this script (and also of all carousel scripts) consists in playing with position relative and position absolute:

#slider .slider {
	width:660px;
	overflow:hidden;
	margin:0 auto;
	position: relative;
	height:160px;
}
#slider .slideWrapper {
	width:2640px;
	position: absolute;
	height:160px;
}

The slideWrapper container must have a big width: a tab width * number of tabs. If you have five tabs with 500px wide each, the slideWrapper must have around 2500px wide (even more, nobody will be upset).

The next thing we have to stylize is each tab-box (.box). For this, we need to float each box:

#slider .box {
	width:660px;
	float:left;
	padding:20px 0;
}

The result will be a wide container which has all boxes on one row. Well.. The html/css part is ends here. The next is… Javascript (or jQuery) part.

The most basic use is this:

var currentslide = 1
function showSlide(nrSld) {
	currentslide = parseInt(nrSld)
	$('#slider .slideWrapper').animate({left:-660*(parseInt(nrSld)-1)})
	redrawBullets(nrSld);
};

What we do? Long story short: we move the slideWrapper container in its parent from left to right and from right to left, according to our needs. Simple, eh?

The redrawBullets function is for highlighting the current selection:

function redrawBullets(slide) {
	var currentBullet = 's'+slide;
	$('#slideCtrl a').each(function(){
	$(this).removeClass('s');
	if($(this).hasClass(currentBullet)){
		$(this).addClass('s')
		}
	});
};

What do we need next? Well.. We only need to test. Here it is a demo (is already used in a site). If you want, you can use EaseIn plugin to add some nice effects on slide.

We have a nice tabbed based navigation with a very cool effect which is ready to use on your site.

1. If I cut out too much parts (yes, some parts like ALT-TAB window, start menu showing, and so on are missing). I considered that those parts are not essential so, to reduce size, I’ve cut them out.
2. If it’s taking too long. The tutorial consists in two parts, both are around 30 minutes. I wanted to play them at 150-200% speed, but I quit. I offer a download alternative (besides the online playing), so you can download files and play them in your favorite media player with higher speed.
3. If I have language errors. English is not my native language, so I made mistakes. Some mistakes I’ve seen, some not. But it takes way to long to edit the videos again and again. I consider that errors are acceptable because the final result (which is that you understand how it’s made) is more important.

Download:

Part one Part two. Great for offline views.

Files used in movies: HERE.

EDIT: Because i received complains about codec and browser crash because of videos, i put only FLV version. If you prefer, under each player, you find a link for VMW version (which have waaaay better quality).

Part one

VMW version, higher quality.

Part two

VMW version, higher quality.

I use E-texteditor, which is THE BEST editor i ever seen, so don’t worry if things appear from nowhere. Is just my snippets.

READ THIS PLEASE

I really need feedback on this movies, because i want to know if i should continue or not on creating (video) tutorials. So, you like it? If you don’t like it, what was wrong? What is missing? And the most important: did you understand what’s happening there? After you did this tutorial, you are able to make this on your own?

Thanks and enjoy!

I almost forgot.
The host for videos is provided by Miodrag, because on my host i have limited amount of both space and bandwidth.

Status: rendering first part of video.

Layout: this one. I put my designer skills on work and this is what i got. I’m sure it is not the best design in the world, but i’m sure is more that we need for undestand how stuff work, right?

The result: here. At the end you will have the zip file with all files. PSD is included

I hope in one hour to have first part (30 min) up & running on my site. It’s about how to slice images and how to create header with top menu. In the second part, you will learn how to made the sidebar and content.

Updates.

I uploaded first part on google videos. Quality SUCKS! I exported with 640×480 resolution and is the most HORRIBLE thing.

Anyway, i reconverted first part and i uploaded on Vimeo. I’m waiting to see how it’s working. The new video have around 30Mb, 30minutes and is encoded as WMV.

Now i’m rendering (50%) the second part of video. Wish me luck

You still need to stay tuned

I will make examples for very basic layouts (and also most used): Header, Sidebar, Content area and Footer.

Here is all steps. Step 1: markup

		Header
	




			left side
		



			right side
		


	

		footer
	

Step 2: Floatings. We float left and right sidebar and content:

#wrap {
	width:970px;
	margin:0 auto;
	border: 1px solid #eee;
}
	#header {
		height:150px;
		border-bottom:1px solid #eee;
	}
	#left,
	#right {
		height:500px;
	}
	#left {
		width:200px;
		float:left;
		background:#f2f2f2;
	}
	#right {
		width:760px;
		float:right;
		background:#f4f4f4;
	}

Step 3: Done Here is the demo. Yeah, i know, too easy, right? Sorry for that (i like to work easy )

The next example is just a little bit more complicated, because, as i said, the content will be the first thing in source, so the search crawler can find content more easy.

Step 1: Markup (with content first!)

			right side
		



			left side
		


	

		Header
	



		footer
	

Next step, the only need to float is the right side:

#wrap {
	width:970px;
	margin:0 auto;
	border: 1px solid #eee;
}
	#header {
		height:150px;
		border-bottom:1px solid #eee;
	}
	#left,
	#right {
		height:500px;
	}
	#left {
		width:200px;

		background:#f2f2f2;
	}
	#right {
		width:760px;
		float:right;
		background:#f4f4f4;
	}

Ok, but how do we put the header back on top? Very simple: Header needs to be absolutely positioned and the content needs to be moved a little bid lower (exactly the header height):

#header {
	height:150px;
	border-bottom:1px solid #eee;
	position: absolute;
	top:0;
}
#content {
	margin-top:150px;
}

Next step is… You guess it right! DEMO. Again, sorry if you wanted more code to read and understand, fancy yada yada yada code and so on. I like to have a clean and easy to understand code

Any question?

Most html menus are created using list because LI tag is the most appropiate tag for this, giving the developer posibility to play in many ways, achivieng nice effects. I won’t touch the vertical lists because it’s their default display. Instead, i will cover some of horizontal lists.

Basic list

The basic setup for a horizontal list is to set float to list elements:

Menu item 1
Menu item 2
Menu item 3
Menu item 4

#list1 li {
	float:left;
	list-style:none;
	margin-right:10px;
}

At this point we have a one level horizontal menu, created with list and you can see this on many (and i mean MANY) sites. Ofcourse, you can add some extra styles such as border, background (color or image) for links inside LI elements for getting even a nicer look. Demo here.

One level drop down menu (suckerfish)

The next menu i show, is a little bit more complicated, but also is more useful when you have category and sub-category. For example, imagine this blog with main category Javascript and sub-category jQuery. If i had many sub-categories, i would probably used a dropdown menu for using less space. This kind of menu is named Suckerfish (A list apart).

For this, we will use nested list and we will show only parents:

Menu item 1

Sub menu 1
Sub menu 1
Sub menu 1
Sub menu 1


Menu item 2

Sub menu 1
Sub menu 1
Sub menu 1
Sub menu 1


Menu item 3

Sub menu 1
Sub menu 1
Sub menu 1
Sub menu 1


Menu item 4

Ofcourse, we still need to float first level in the same way as we did in first example:

#list2 li {
	float:left;
	list-style:none;
	margin-right:10px;
}

I said before we will hide all nested list elements, so here we go:

#list2 li ul{
	display:none
}

Right now, we have a basic horizontal list. Next step is to show second level of list on hover. Because IE6 don’t know what is hover on all elements (only on A tag), for this browser we will use some javascript (but later).

#list2 li:hover ul{
	display:block
}

Because we need to have a nice display for submenus, we have to relatively positioning main LI tags, so on the #list2 li rules add

	position:relative

Also, the inner UL tags we need to change to:

#list2 li ul{
	display:none;
	position: absolute;
	left:0;
	top:1em;
	width:150px;
}

In this point we have a very basic suckerfish menu that works on all browser except, ofcourse, IE6 As i said before, we will make a little javascript snippet for adding or remove over class for LI elements. If you are using jQuery (like i do), the whole thing is easier than you think:

	var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
	if(IE6){$(#list2 li).hover(function(){$(this).addClass('over')}, function(){$(this).removeClass('over')})}

If you don’t want to use a javascript library (either you have a small page or you like to develop your own code), you can use next code (and add just before body tag closes):

var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
if(IE6){
	startList = function() {
		navRoot = document.getElementById('list2');
		for (i=0; i

Well… Yes, that’s all. We only need to add an extra rule on CSS and #list2 li:hover ul become:

	#list2 li:hover ul,
	#list2 li.over ul

At this point we have a fully functional suckerfish menu (but still with an ugly look), working on all modern browsers (even IE6). You can see the demo here.

Breadcrumb

This one is one of my favorite toys With this type of menu we get a “vista explorer look” breadcrumb, ready to use on your site. We will use same markup as suckerfish and also a library (i like jQuery, so i will use it)

$(document).ready(function(){
	$('ul#list2 ul').toggle().hide();
	$('ul#list2 ul').parent('li').append('-');
	$('a.dropDown').click(function(){
		var t=this;
		$('ul#list2 ul').not($(t).parent('li').find('ul')).hide();
		$(t).parent('li').find('ul').toggle();
		$(document).unbind('click').click(function(e){
			if($(e.target).parents('ul#list2').length>1){
				$('ul#list2 ul').hide();
			}
		})

		return false;
	})
});

You can seehere the demo.

Ofcourse, you may want to change the content for drop down links (you may want to put an arrow, your choice) for even a nicer and authentic effect.

Conclusion

List is so simple yet so powerful tools available for creating nice menus (the final results is up to your imagination). The final result is cross browser (yes, even IE6!), the code make sense (is semanticaly, right?) and if you don’t have javascript enabled, you can still use drop down menus (for this time not in IE6 ). With a little imagination, you are able to create even nicer menus. For example, i made some time ago a scrollable menu, like iPhone menus (yes, with nested lists!). I didn’t spend too much time with it (so it won’t work too well) and i conssidered useless to post here.

What kind of menus do you use?