Menu Tabs Menu tabs tutorial using the sliding doors method

[Baniboy 3]

This is for all you guys/girls there who want to learn to make tab-like horisontal menus for your websites:

Now, I'm going to use the sliding doors technique on this, all you need is two images and some simple css.
The whole idea bases on moving the position of the backgrounds when hovered, this is where css is getting involved.

First of course, you need html code for the tab menu:

<div id="tabs">  <ul>	<li><a href="#"><span>Link 1</span></a></li>	<li><a href="#"><span>Link 2</span></a></li>	<li><a href="#"><span>Link 3</span></a></li>	<li><a href="#"><span>Link 4</span></a></li>	<li><a href="#"><span>Link 5</span></a></li>	<li><a href="#"><span>Link 6</span></a></li>	<li><a href="#"><span>Link 7</span></a></li>  </ul></div>

Place that where you want on your webpage. Now, we need 2 images, one for the left side and other for the middle and right side. Why we need two of them? Well if you want to have a nice rounded corner for your tab, you're gonna need two.

and
You can make your own custom ones, I'm using these as an example here.

Here the CSS kicks in, you need some code to make the tab's background "slide"

#tabs {	  font-size:23px;	  line-height:normal;	  }	#tabs ul {	margin:0;	padding:10px 10px 0 50px;	list-style:none;	  }	#tabs li { /* Changing the list to be in one line... and stuff like that, you should know this if you know CSS  */	  display:inline;	  margin:0;	  padding:0;	  }	#tabs a {	  float:left;	  background:url("tableftJ.gif") no-repeat left top; /* aligning this background to top left, so it has always the top visible even if you use small font */	  margin:0;	  padding:0 0 0 5px;	  text-decoration:none;	  }	#tabs a span {	  float:left;	  display:block;	  background:url("tabrightJ.gif") no-repeat right top; /* the same thing here... */	  padding:5px 15px 4px 6px;	  color:#24618E;	  }	/* Commented Backslash Hack hides rule from IE5-Mac \*/	#tabs a span {float:none;}	/* End IE5-Mac hack */	#tabs a:hover span {	  color:#FFF;	  }	#tabs a:hover {	  background-position:0% -42px; /* here's how the menu tabs "slide" */	  }	#tabs a:hover span {	  background-position:100% -42px;	  }

I hope you don't just simply copy paste the code, this can help you afterwards when you want sliding backgrounds. I didn't comment much, I hope you could understand.

!WARNING!: when you have a long tab, it might be empty background in the middle, you simply fix this by making 3 images, one for "li" and others span and other one span id="right". It's my nasty surprise for copy paste guys... code yourself will ya I'm sure you can easily figure the whole thing out in minutes if you have an average CSS knowledge. Just make 3 images, the middle one to repeat on a x axle, no-repeat for the side ones.

hope I helped,

baniboy
Edited November 29, 2010 by Baniboy (see edit history)

[triplebtalk 0]

That is a great tutorial, I am still having difficulty with list functions though. The CSS is nice and the background image is very good. Good job baniboy

[trapp17 0]

thank you! this is just what I needed.

[andreip 0]

Pretty helpful for people around which would like to learn CSS. I myself learnt it a little time ago but I don't really write all of that because it takes me too much time and because I use Dreamweaver which is pure awesome. It really helps you a lot. I can do a website which normally takes 3-4 hours in 2 hours. That's pretty great. But this is really nice . Keept the good work!

[Baniboy 3]

That is a great tutorial, I am still having difficulty with list functions though. The CSS is nice and the background image is very good. Good job baniboy

Maybe you could tell me what difficulties you are having so I could help?

thank you! this is just what I needed.

No problem, glad I could help.

Pretty helpful for people around which would like to learn CSS. I myself learnt it a little time ago but I don't really write all of that because it takes me too much time and because I use Dreamweaver which is pure awesome. It really helps you a lot. I can do a website which normally takes 3-4 hours in 2 hours. That's pretty great. But this is really nice . Keept the good work!

Thanks. I always code my webspages, although dreamweaver is good, I like coding since I can keep track of everything, it's just my style.
But you can learn a lot from just coding your webpages, like what doesn't work with IE and stuff like that.

Thanks for comments, I'll submit more of these when I come up with something worth sharing.

[andreip 0]

Maybe you could tell me what difficulties you are having so I could help?


No problem, glad I could help.



Thanks. I always code my webspages, although dreamweaver is good, I like coding since I can keep track of everything, it's just my style.
But you can learn a lot from just coding your webpages, like what doesn't work with IE and stuff like that.

Thanks for comments, I'll submit more of these when I come up with something worth sharing.

Yes that's true but since in really aware of CSS and I don't really have much time spending on coding the websites I just use Dreamweaver. It's also organized too and helps me keeping track of how and what I code too. You should try because it's really good !

[krillinng 0]

well that's kinda hard for me, im still a noob with these.

[Aytac01 0]

Nice work!Css is good...Keep it up!

[Phoenix.Illusion 0]

Many thanks baniboy I also wanted this.- Dark

[fadillzzz 0]

This is for all you guys/girls there who want to learn to make tab-like horisontal menus for your websites:
Now, I'm going to use the sliding doors technique on this, all you need is two images and some simple css.
The whole idea bases on moving the position of the backgrounds when hovered, this is where css is getting involved.

First of course, you need html code for the tab menu:

<div id="tabs">   <ul>	 <li><a href="#"><span>Link 1</span></a></li>	 <li><a href="#"><span>Link 2</span></a></li>	 <li><a href="#"><span>Link 3</span></a></li>	 <li><a href="#"><span>Link 4</span></a></li>	 <li><a href="#"><span>Link 5</span></a></li>	 <li><a href="#"><span>Link 6</span></a></li>	 <li><a href="#"><span>Link 7</span></a></li>   </ul> </div>

Place that where you want on your webpage. Now, we need 2 images, one for the left side and other for the middle and right side. Why we need two of them? Well if you want to have a nice rounded corner for your tab, you're gonna need two.

and
You can make your own custom ones, I'm using these as an example here.

Here the CSS kicks in, you need some code to make the tab's background "slide"

#tabs {	   font-size:23px;	   line-height:normal;	   }	 #tabs ul {	 margin:0;	 padding:10px 10px 0 50px;	 list-style:none;	   }	 #tabs li { /* Changing the list to be in one line... and stuff like that, you should know this if you know CSS :D */	   display:inline;	   margin:0;	   padding:0;	   }	 #tabs a {	   float:left;	   background:url("tableftJ.gif") no-repeat left top; 7* aligning this background to top left, so it has always the top visible even if you use small font */	   margin:0;	   padding:0 0 0 5px;	   text-decoration:none;	   }	 #tabs a span {	   float:left;	   display:block;	   background:url("tabrightJ.gif") no-repeat right top; /* the same thing here... */	   padding:5px 15px 4px 6px;	   color:#24618E;	   }	 /* Commented Backslash Hack hides rule from IE5-Mac \*/	 #tabs a span {float:none;}	 /* End IE5-Mac hack */	 #tabs a:hover span {	   color:#FFF;	   }	 #tabs a:hover {	   background-position:0% -42px; /* here's how the menu tabs "slide" */	   }	 #tabs a:hover span {	   background-position:100% -42px;	   }

I hope you don't just simply copy paste the code, this can help you afterwards when you want sliding backgrounds. I didn't comment much, I hope you could understand.

!WARNING!: when you have a long tab, it might be empty background in the middle, you simply fix this by making 3 images, one for "li" and others span and other one span id="right". It's my nasty surprise for copy paste guys... code yourself will ya I'm sure you can easily figure the whole thing out in minutes if you have an average CSS knowledge. Just make 3 images, the middle one to repeat on a x axle, no-repeat for the side ones.

hope I helped,

baniboy

thank you for the tutorial, i really need this