Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our page is coming out very well so far, but a nice thing to add would be some tabs on the top of this page. We are going to use the Sliding Doors technique for putting these tabs in place. The Sliding Doors technique was invented by Douglas Bowman and you can read about it on the alistapart website. The Sliding Door tab technique works by having two images. A narrow left rounded corner image and a much wider, longer, rounded corner right image. Together they slide on top of each other to expand or contract depending on the length of the navigation words inside of the tab. This is great for content management system where we are never really quite sure how long or how short a given tab is going to be or whether someone will add one later.
The images that we are going to need to make up the tabs can be found in our Media Manager. If you go to the backend of the website and go to Site, Media Manager and then go to the stories folder, assuming you have installed the exercise files, you will find these tabbed images there. There are two that we were going to use for most of these. One is tabpinkleft. So here is the narrow left tab with the rounded left corner as seen here in this Shadow Box.
On the right is a longer tab with a rounded right corner, which is tabpinkright. We also have two images that we will use for the You are Here tab. Usability guidelines state that if you are going to use the tab on the page, the tab for the You are Here stage should have the same background color as the webpage. So since our webpage has a background blue color we have a tab for that You are Here state which has also got a background blue color. So we have these here in tabblueleft and tabblueright.
Now that we have our images in place, let's go back to the front end of the website and let's work on styling our tabs. So we are going to go to Edit, CSS and we are going to go to the default. css tab and we are going to scroll down to the top navigation. Now we are going to start making a few changes. First of all under our li, I am going to get rid of all of the padding. That's going to run all of the words into each other. I am also going to change the background color of our top bar from our hot pink to brown, which is 46311c.
Next in our li I am going to set our Padding to 0 and our Margin to 0. I will bring back some Padding and some Margin later, but for the moment I don't want any. Now I am going to add the background for the right tab on our li. So I am going to add a background with a URL of, in my case /ChocolateBliss1/images/stories/ tabpinkright.gif. That URL may vary depending on how you have your website setup. What you see right now is a solid pink bar across our navigation and that's because our background images are repeating.
So let's set them to not repeat via no-repeat. We are going to align these images to the right top and you can see the rounded corners coming into place. Now we are going to provide a little bit of separation between these tabs by putting in a margin on the right. So we are getting some good separation. Next I want to style all of the a links generically. First of all, I am going to display them as a block and then I am going to assign them the left tab background image. Your URL may be slightly different than mine and right now that tabpinkleft is tiling across the words, which is giving it that sort of shark-fin sort of look. So we don't want that to repeat and we are going to align this to the left and the top.
So now you can see the shape of our tabs but we need a little bit of padding because as you can see some of the words are hanging outside of the tabs and it doesn't quite look attractive. So let's put in some padding, like so. Our 2 pixels of padding on our ul is pushing our tabs down into the main body of this webpage. So we are going to need to take that out. We will set that to 0. Now our tabs are sitting comfortably right on the top of the webpage. As a last step for our active state for the homepage, we are going to need to change those background images for Home to the blue of the webpage below.
That means we are going to the New Style specifically again, the li and then the a of Home. So after we have styled top a:link we are going to insert a #top li.active and we are going to add a background image here. Very, very similar to what we just did. We are going to add a background image, again the URL may be slightly different. In Images, stories, tabblueright.gif, no-repeat and right-top. That view is kind of helpful so you can really see what's going on and the way the two tabs are working together.
Now I am going to add the left side of my blue tab. So #top li.active a, once again we are going to add a background image with a URL that may be slightly different for you, Images/stories/ tabblueleft.gif, no-repeat, left top and close that bracket.
Now finally, I think that home, the text inside is brown and that doesn't stand out very well for me. It sort of blends into the background a little bit. So I am going to change that #top li. active a link and visited color to white. Finally, I am going to need to copy all of this code into our Joomla! Template once again. Ctrl+A or Command+A, Ctrl or Command+C and then we are going to switch over to the backend of our website. We are going to go to Extensions > Template Manager, inside, Edit, Edit CSS, default.css, Ctrl or Command+A, Ctrl or Command+V and Save And now let's go back to the Front end of our website and Refresh.
Now we have some great looking tabs going across the top of our webpage. Once again, tabs are a wonderful way of organizing websites. They seem to be very intuitive to users and it's an advanced styling technique that you can use on your Joomla! websites, especially those with lots of content on them. Just make sure that you have a You are Here indicator for the tab that you are on, so that these function correctly and as I switch to Products, you will see that the tab will, in fact, follow it along and have fun with it.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99178 Viewers
56 Video lessons · 112451 Viewers
71 Video lessons · 81270 Viewers
131 Video lessons · 39027 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.