CSS Tabs Rollover Menu
3 years, 7 months ago 
Using a tabbed rollover menu in the header of your website can add functionality, as well as making the navigation look good. Doing this in CSS means that you can use it to it’s greatest capacity, easily add or remove tabs and change the colour in different styles.
The purpose of this tutorial is to show how this can be done, in a similar way to how it has been achieved on this website. Just follow the steps below and you should be fine:
Step 1 - Decide on the Navigational Elements and Colours
- It is initially important to decide on which tabs you will want to place on your site, and what the colour scheme will be. You need to have an idea of how many tabs there will be, and what the default background and rollover background colour will be. Make a note of these!
Step 2 - How It Works
- The tab area is set as a layer, to hover over a specific part of the page - you set this manually, based on where you would like it to be located.
- Simply take the CSS code, and simply change the commented values to fit in with the colour scheme of your website
- You can go deeper and change elements such as the height, width and position of the menu bar if you want
- The code works with Firefox by default, slight alterations must be made to work in IE (see CSS code)
Step 3 - Download the CSS Code
- You can download a copy of the CSS code to upload to your site here.
Step 4a - Insert the CSS file into your HTML Code (WordPress users)
- If you are using this menu with WordPress, I recommend you upload the tabsample.css file into your main directory
- Then, place the following line into your index.php file (before the </head> tag):
- <link rel="stylesheet" type="text/css" href="tabsample.css" />
Step 4b - Insert the CSS file into your HTML Code (Other users)
- For those of you not using WordPress, the solution is relatively similar. Upload the tabsample.css file to your server, then place the following line in your <head> area to link to the stylesheet.
- <a href="/" onclick="setActiveStyleSheet(’default’); return false;">Default</a>
Step 5 - Place the Tabs in your HTML Code
- OK, so you’ve got all the formatting done for tabs in the CSS file, now you just need to place the correct HTML code in your index.php page.
- For each tab you want to display, enter:
- <ul id="supernav">
- <li<? if ($page=="home") { echo " id="selected""; } else {} ?>><a href="/index.php" title="The Weblog">Blog</a></li>
- Repeat as necessary
- </ul>
- For each different tab, change the items in red to be appropriate.
- Note: It doesn’t really matter where you place this source code, as the position they appear in is set in the CSS file. I would recommend somewhere near the header area.
Step 6 - What’s the PHP for?
- The PHP code in the above line allows you to have an alternative look and feel for the tab on the current page (see the ‘Blog’ tab above?)
- Simply place this line underneath the <title> tag of each page of your blog:
- <? $page="home"; ?>
- As before, change the item in red to match that on the tab area.
- If you do not want to use this functionality, replace the code in Step 5 with the following:
- <li><a href="/index.php" title="The Weblog">Blog</a></li>
If you have any problems implementing this script, please feel free to contact me. If there are several queries about one particular aspect of the tutorial, I will update it or create a Frequently Asked Questions section.
Css, Navigation, Tabs, Menu, Wordpress
February 23rd, 2005 at 11:50 am
hmmm. does this work in 1.5?
i´ve implemented it in header.php
i get:
Parse error: parse error, unexpected T_STRING, expecting ‘,’ or ‘;’ in /home
code:
>Blog
February 23rd, 2005 at 12:33 pm
It’s working fine in my 1.5 copy - It’s difficult to say what the problem could be without looking at the exact errors etc.
February 23rd, 2005 at 4:16 pm
guess im doomed
where to you put the code into in 1.5? the index.php or the header.php?
i¬¥ve tried to implement it in the header.php - but as soon as i upload the file i get the error message…to test it again i¬¥ve just used the sample code of step 5.
>Blog
February 23rd, 2005 at 4:20 pm
You should place it in the same location as your page content - above it, in the place where the rest of your header images etc are. This is generally in index.php. Make sure you place in in a HTML code area, and not inside tags.
February 23rd, 2005 at 4:42 pm
oh my…
no matter where i put the ul´s. and i´m (no, im no instant messenger 
) using wp 1.5 final.
error, error, error
Parse error: parse error, unexpected T_STRING, expecting ‘,’ or ‘;’ in /home/mx45c2b/public_html/weblog/wp-content/themes/mx4info/index.php on line 5
why putting the code into index.php? so you have to manually insert the code into all those single.php, archive.php etc. pages?
February 23rd, 2005 at 4:45 pm
If the error is on line 5, you haven’t placed it in the correct part of index.php - it should be much lower down, probably just after the tag. See if that makes any difference.
February 23rd, 2005 at 4:59 pm
first of all thank you for your effort david!
had to mention that…
i¬¥ve even placed it inside the “post” div. i get the errors everywhere…
February 23rd, 2005 at 5:01 pm
If you email me a link to the page in question (rather than commenting), I’ll look into it further with you. Hope we can find a way to fix things…
February 24th, 2005 at 8:02 am
just got your email david - thank you very much!
my thoughts:
there´s no problem with the no-php navigation at all. it shows up on the page exactly as expected. but as soon as i add the highlight php code i get the error message: see http://www.mx4.info/weblog/.
and there¬¥s no way to put the (step 6) pagename code inside the single pages as the “head” part is inside the header.php. i¬¥ve tried to insert the code somewhere inside the single pages (index.php, single.php etc.) but strangely it screws up the page (seems that the_content doesnt work anylonger then…)
hmmm. my brain hurts
March 29th, 2005 at 4:09 pm
mike, try
echo ” id=’selected’”;
instead of
echo ” id=”selected”";
June 17th, 2005 at 1:40 pm
[…] ed sources that proved of assistance: David Appleyard, for the initial tab and CSS guide # pixies.ca, nifty code to identify pages correctly # javascriptkit.com, IE browser java code # NB: The c […]
June 18th, 2005 at 10:35 pm
hi METAL GEAR SOLID SITE JOIN WWW.SONSOFMGS.TK , I WANT A NEW skin putting on my selector list but i dont know how to upload the code.
July 29th, 2005 at 2:21 pm
ok.. got it to work.. after some sweat and tears..
maybe someone can learn from my pain?.. we shall see.
0> read and downloaded, tried and failed, restarted and after a few tries got it to go.. (note: i am using wordpress 1.5.. i have a header.php, index.php, sidebar.php (where the pages go.. ok, it is on top, but topmenu.php doesn’t work!?) and page.php wereby i am using pages from what i have created within wordpress which are given permalinks
1> copied and pasted the tabsample.css into my style.css
2> copied the style stuff above into the header.php between and .. this stuff
3> after some time got to the following code, and placed it into both my index.php and page.php in the necessary locale (i am unable to get the “menu” as part of the header
>home
>about
>stuff
4> changed the look to fit what i want
i supose there must be a way to do this so the computer does most of the work.. but oh well, this should be aok for now
thanks for your help.. without your code bits i wouldn’t have made it;
perhaps your and my info can help others?.. the codex needs updating..
http://codex.wordpress.org/Dynamic_Menu_Highlighting
a> would you like to update it with your info?
c> help to update it?
d> be listed as a reference?
e> linked?
f> you can do whatever you want to do!
g> none of the above?
h> ???
July 29th, 2005 at 2:23 pm
crap.. the code disappeared.. forgot the pre’s.. if you don’t want to fix it, see here…
0> read and downloaded, tried and failed, restarted and after a few tries got it to go.. (note: i am using wordpress 1.5.. i have a header.php, index.php, sidebar.php (where the pages go.. ok, it is on top, but topmenu.php doesn’t work!?) and page.php wereby i am using pages from what i have created within wordpress which are given permalinks
1> copied and pasted the tabsample.css into my style.css
2> copied the style stuff above into the header.php between and .. this stuff
3> after some time got to the following code, and placed it into both my index.php and page.php in the necessary locale (i am unable to get the “menu” as part of the header
>home
>about
>stuff
July 29th, 2005 at 2:25 pm
ok.. that is what i get..
0> read and downloaded, tried and failed, restarted and after a few tries got it to go.. (note: i am using wordpress 1.5.. i have a header.php, index.php, sidebar.php (where the pages go.. ok, it is on top, but topmenu.php doesn’t work!?) and page.php wereby i am using pages from what i have created within wordpress which are given permalinks
1> copied and pasted the tabsample.css into my style.css
2> copied the style stuff above into the header.php between and .. this stuff
3> after some time got to the following code, and placed it into both my index.php and page.php in the necessary locale (i am unable to get the “menu” as part of the header
>home
>about
>stuff
July 29th, 2005 at 2:25 pm
sorry.
July 30th, 2005 at 7:47 pm
found a plugin that should fix most of all of this in a bit easier way (well.. since most of the code has already been done
)
http://www.adsworth.info/wp-pagesnav
May 23rd, 2006 at 5:12 pm
hello piople!!!piople was burn here!!! i am hope.