Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Tabbed navigation using the sliding doors technique

From: Joomla! 1.5: Styling with CSS

Video: Tabbed navigation using the sliding doors technique

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.

Tabbed navigation using the sliding doors technique

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.

Show transcript

This video is part of

Image for Joomla! 1.5: Styling with CSS
Joomla! 1.5: Styling with CSS

22 video lessons · 15865 viewers

Jen Kramer
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Joomla! 1.5: Styling with CSS.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.