Funky sliding door tabbed menus
// August 2nd, 2008 // 4 Comments » // Design, Free Stuff, css, downloads, tutorials
Tabbed sliding doors menus look funky and elegant as well as being scalable. You can add as much text as you want and the tabs just expand and don’t break apart, they also re-size nicely when you bump up the text in your browser.
So today I’m going to show you how to create my own little twist on the very popular Sliding Doors of CSS menus by Douglas Bowman
As you can see in the image (above) I have an overlapped current state or ‘on’ tab which is very simple to produce using some minimal HTML and CSS. First, lets get our hands dirty with some mark up.
The mark up
All we need is a simple unordered list like below:
<div id="mainNav">
<ul>
<li id="current"><a href="home.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
Notice the first list item has an id of “current”
<li id="current"><a href="home.html">Home</a></li>
This is our ‘hook’ to set the ‘on’ state in our menu. In this case it is set for our home page. On subsequent pages, the “current” hook will be set on the other pages like the example below for our second page which will be our ‘Blog’ page.
<li><a href="home.html">Home</a></li>
<li id="current"><a href="blog.html">Blog</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
And that’s all folks (the mark up that is). I told you it was simple!
Lets get funky!
Now we need some images for our menu, so open up the image tool of your choice (I used Adobe Fireworks for this tutorials example) and set a canvas size of 20 pixels wide and 45 pixels in height. Set the canvas color to transparent. This will be our background for our menu.
Fig 1
Now draw a rectangle on the top half of the canvas with a height of 32 pixels and a height of 20 pixels and set the colour fill to white.
Fig 2
With our rectangle still selected, select the gradient tool and choose the colours #B02E3E (red) and #FFFFFF (white) like in the example below.
Fig 3
Now draw the gradient from top to bottom so you get a gradient like the image below
Fig 4
Our final step will be to add a solid colour to the bottom, so again grab the rectangle tool and draw a rectangle shape on the bottom of the canvas with a width of 20px and a height of 14px. Set the colour fill to #B02E3E and you should now have a completed image like below. Save this as bg.png
Fig 5
Let’s make some funky tabs!
Here comes the tricky part – creating the rounded corner tabs – ok I’m kidding – it’s not that hard! So heres how:
Create the ‘on’ tab right hand ‘door’
Open a new document and make a canvas of 400 pixels wide and 150 pixels in height. Set the background colour to transparent.
Now grab our friend the rectangle tool and draw a slightly over-sized rectangle on the canvas about 417 pixels wide and 172 pixels in height and set the stroke colour to #999999 at 1 px. Position the top right corner of the rectangle to line up just against the top right of the canvas so you can just see the stroke outline (see below)
Fig 6
Set the rectangle roundness to 8 so you get a curved corner at the top right.
Fig 7
Lastly, lets add some effects to make the tab stand out. With the rectangle still selected, go to the properties menu and click on the filters button. Select inner shadow from the drop down menu and input the settings in the pic below:
Fig 8
Finally crop the image to size and you should have the right hand door completed like this:
Fig 9
Save the image as onRight.png
The left ‘door
Open a new document and make a transparent canvas of 9 pixels wide and 150 pixels in height. Again we draw another over sized rectangle with the rectangle tool (about 400 pixels wide and 157 pixels in height) and set the colour fill to #FFFFFF with a 1px stroke set to #777777.
Fig 10
Like with our right hand door, set the rectangle roundness to 8 and click on the filter menu in the properties panel, select inner glow and enter the settings below.
Fig 11
Crop it to size and you have completed the second part of our first sliding door tab. When we get stuck into the CSS we will be putting these two guys together. Save the image as onLeft.png
Fig 12
Making the ‘off’ door tabs
Quite simply, follow the same steps as figures 6-12 only this time we are going to change the filter effects with a different inner glow colour and settings. Use the following settings for both images set the glow colour to #B02E3E and save the left side tab as “leftOff.png” and the right sided one as “rightOn.png”
Fig 13
Heres what your completed images should look like for your “off” state tabs
Fig 14
Fig 15
Now we have all our images, lets get to work and style these bad boys!
Styling it up!
Lets start by setting up some defaults to the body. Notice I have set the font size to 62.5%. This knocks the base font size down to 10px which we can notch up in EM’s later within our menu.
body {
margin:0 auto;
padding:0;
width:550px;
font-size:62.5%;
background: #fff;
font-family:Tahoma, Arial, Helvetica, sans-serif, Verdana;
}
Now we are going to position our menu by floating it left and setting the width to 100% so that it fills the width we set in the body. We have also used our first image – the background (bg.png) which we set to tile on the x-axis across the width of our menu. This will be our cool funky background gradient image.
#mainNav {
margin-top:100px;
float:left;
width:100%;
background: url(img/bg.png) repeat-x bottom;
font-size:93%;
line-height:normal;}
Here lets nullify any margins to our unordered list and set a list style to “none” to get rd of those nasty bullet points and set some padding.
#mainNav ul {
margin:0;
padding:10px 25px 0;
list-style:none;}
Next step is to float the list elements in our menu left and insert the first of our tabbed images – our off left side “door”. We set this to be positioned top left and not to repeat.
#mainNav li {
float:left;
background: url(img/offLeft.png) no-repeat left top;
margin:0;
padding:0px 0 0 9px;}
A menu is not a menu unless we can click it, so lets add some CSS to our anchors. Again we float left and display our anchors as Block so that they are clickable. We add our second image (offRight.png) which is the right sided “door” and add some padding around our anchors or linked text which gives some breathing space inside the tabs when they are joined together. Notice the positioning of the image? We set it not to repeat, but this time we position it at the top right. As this is the “off” state we set the text decoration to none to get rid of the default underlining of text.
#mainNav a {
float:left;
display:block;
background:url(img/offRight.png) no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;}
The last thing we need to do with the tabs is add a ‘hover’ to them. Here I have chosen a colour and an underline state when the cursor hovers over the tabs.
#mainNav a:hover {color:#b02e3e;text-decoration:underline;}
Setting the Current state
To show your site visitors what page they are currently on we set the images up for the “current” state by using the first set of “doors” we created earlier. I have given a height of 25 pixels so that the tab overlaps the bottom of our background image and stands out.
#mainNav #current {
background-image:url(img/onLeft.png);
color:#b02e3e;}
And finally……..
#mainNav #current a {
background-image: url(img/onRight.png);
color:#b02e3e;
padding-bottom:5px;
height:25px;}
And thats it folks! All there is to it – 5 images, an unordered list and 8 blocks of CSS to create a cool stylish menu. If you are stuck and are having trouble creating the images, you can download the source files including the HTML and the CSS for you to experiment with or even use on your website.
The menu is cool with all standards compliant browsers (Firefox/Safari/IE7/Opera etc..) and also works as far back as IE5.5 and IE6! Only watch out when using transparent PNG’s as I have done as IE 6 and below will not display the images with alpha transparency backgrounds so either serve up an alternative version using conditional comments or keep it the same using gifs. The choice is yours!
Have Fun! 
Download
This work is licensed under a
Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License.
