Jump to content
xisto Community
Sign in to follow this  
Baniboy

Menu Tabs Menu tabs tutorial using the sliding doors method

Recommended Posts

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.

post-71342-1238097613_thumb.gif and post-71342-1238097659_thumb.gif
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 by Baniboy (see edit history)

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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. :D

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 :P . 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.

Share this post


Link to post
Share on other sites

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


No problem, glad I could help. :P



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 :)!

Share this post


Link to post
Share on other sites

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.

post-71342-1238097613_thumb.gif and post-71342-1238097659_thumb.gif
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.