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.
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!
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 (see below), and 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.
3. Download the CSS Code
Download a copy of the CSS code, then link to it as explained below.
4. Insert the CSS file into your HTML Code
Upload the tabsample.css file to your server, then place the following line in your <head> area to link to the stylesheet.
<link rel="stylesheet" type="text/css" href="tabsample.css" />
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<?php if ($page=="home") { echo " id="selected""; } else {} ?>>
<a href="/index.php" title="The Weblog">Blog</a>
</li>
-- Repeat as necessary for other tabs --
</ul>
For each different tab, change the following:
"home" – this is a one word description of the page (for the reason why, see below)
"/index.php" – this is the link to that particular page
"The Weblog" – a description of the page you’re linking to
Blog – the word you want to appear in your navigation bar as a link
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.
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
tag of each page of your website:</p>
<pre>
<?php $page="home"; ?>
</pre>
<p>As before, change <code>"home"</code> section to match that on the tab area.</p>
<p>If you do not want to use this functionality or are not using <span class="caps">PHP</span> in your pages, replace the code in Step 5 with the following:</p>
<pre>
<li><a href="/index.php" title="The Weblog">Blog</a></li>
</pre>
<p>You should end up with a menu looking similar to the one at the top of this page in no time. It’s a simple method, and spices up your pages navigation!</p>
<br />
<br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-0222895541289977";
/* Design Shack Tutorial */
google_ad_slot = "6275995287";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br /><br />
<br /></div>
<br /><h2>Comments and Discussion</h2><br />
<div class="commentinfo">On 26th September 2007 , <a href="http://apexvideo.blogspot.com" rel="nofollow">shaid</a> said:</div>
<div class="comment">
<p>
All excellent! nicely elaborate!!! CaR</p></div>
<div class="commentinfo">On 30th September 2007 , <a href="http://www.3wshare.com" rel="nofollow">Feng</a> said:</div>
<div class="comment">
<p>
Green color is more popular now.. i find it looks like Digg navigation</p></div>
<div class="commentinfo">On 4th January 2008 , <a href="http://www.joomlabased.com" rel="nofollow">joomlabased</a> said:</div>
<div class="comment">
<p>
Good tutorials. thank you</p></div>
<div class="commentinfo">On 5th April 2008 , <a href="" rel="nofollow">n0ta</a> said:</div>
<div class="comment">
<p>
Hi man.
I just arrive here from a stumble jump, and I want to add something.
First of all, good tutorial and good easy use of php.
But what I want to share is that there is a more easy, no server-side solution for that problem, only using CSS.
It´s quite easy. You have only to put an "id" attribute to the tabs markup, and to use a "id" in the "body" tag. Smthg like:
...
Home
Portfolio
...
And after that, it´s pretty simple. Just add a css line to change the tab you want when the page you visit is the appropiate. How does it know where it is? Easy, the body "id". So...
/*In the CSS */
body#home a#menu_home {/*And put the effects to make it different*/}
Same for others sections...
Voilá. It´s done.</p></div>
<br /><br /><h2>Add your thoughts</h2><br /><br />
<form method="post" action="">
<table cellpadding="4" cellspacing="0" border="0">
<tr>
<td>
<label for="name">Name</label>
</td>
<td colspan="2">
<input type="text" name="name" value="" size="25" class="comment_name_input" id="comment_name_input" />
</td>
</tr>
<tr>
<td>
<label for="email">E-mail</label>
</td>
<td colspan="2">
<input type="text" name="email" value="" size="25" class="comment_email_input" id="comment_email_input" />
</td>
</tr>
<tr>
<td>
<label for="web">Website</label>
</td>
<td colspan="2">
<input type="text" name="web" value="http://www." size="25" class="comment_web_input" id="comment_web_input" />
</td>
</tr>
<tr>
<td>
<label for="message">Message</label>
</td>
<td colspan="2">
<textarea id="message" name="message" cols="40" rows="7" class="txpCommentInputMessage"></textarea>
</td>
</tr>
<tr>
<td>
<label for="message">What colour is the grass?</label>
</td>
<td colspan="2">
<select name="sea">
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="preview" value="Submit" class="smallbox" />
</td>
</tr>
</table>
<input type="hidden" name="ip" value="38.103.63.17" />
<input type="hidden" name="parentid" value="32" />
<input type="hidden" name="insertcomment" value="y" />
<input type="hidden" name="slug" value="css-tabs-rollover-menu" />
</form></div>
<div id="sponsoredcolumn">
<h2>Subscribe</h2>
<br />
<a href="http://feeds.feedburner.com/designshack" class="img"><img src="/images/feed_gallery.gif" alt="Design Shack CSS Gallery RSS Feed" border="0" width="40" height="53" /></a>
<a href="http://feeds.feedburner.com/designshacklinks" class="img"><img src="/images/feed_news.gif" alt="Design Shack News RSS Feed" border="0" width="40" height="53" /></a>
<a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=130990&loc=en_US" target="popupwindow" onclick="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=130990&loc=en_US', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="img"><img src="/images/feed_email.gif" alt="Design Shack Email Newsletter" border="0" width="40" height="53" /></a>
<a href="http://twitter.com/designshack" class="img"><img src="/images/feed_twitter.gif" alt="Design Shack Twitter" border="0" width="40" height="53" /></a>
<br /><br />
<br />
<h2>Tutorial Archives</h2> <br />
<form action="/tutorials" method="post">
<input type="search" name="search" autosave="designshack-autosave" results="10" /><br /><br />
<input type="submit" value="Search" class="smallbox" />
</form> <br /><br />
<h2><a href="/sponsorship.php">Sponsored By</a></h2><br />
<a href="http://www.psd2html.com/order-now.html"><img src="/images/psd2html_large.jpg" alt="PSD to HTML" title="PSD to HTML" border="0" width="200" height="140" /></a><br /><br />
<a href="http://goodbarry.com/TP.aspx?ID=4&EID=12"><img src="/images/goodbarry.gif" alt="GoodBarry - The best way for web designers to build online businesses, not websites for their clients. eCommerce, Email Marketing, Content Management, Integrated CRM, Reporting and Analytics and web hosting in one integrated solution." width="200" height="140" /></a> <br /><br />
<a href="http://www.gooeytemplates.com/" title="Gooey Templates"><img src="/images/gooeyad.jpg" alt="Gooey Templates" width="200" height="140" /></a> <br /><br />
<a href="http://www.snapvillage.com/Subscriptions.aspx?cid=006" title="Royalty-free stock images from $0.16"><img src="/images/snapvillage_designshack.gif" alt="Royalty-free stock images from $0.16" width="200" height="140" /></a> <br /><br />
<script type="text/javascript">
Vertical1764 = false;
ShowAdHereBanner1764 = false;
RepeatAll1764 = false;
NoFollowAll1764 = false;
BannerStyles1764 = new Array(
"a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}",
"img{border:0;clear:right;}",
"a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}",
"a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
);
document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1764/1764.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
</script>
<a href="http://www.nublue.co.uk/web_hosting/magento" title="25% off all hosting and
domains"><img src="/images/nublue-hosting.gif" alt="NuBlue UK Web Hosting" width="200" height="70" /></a> <br /><br />
<script type="text/javascript">
Vertical1765 = false;
ShowAdHereBanner1765 = false;
RepeatAll1765 = false;
NoFollowAll1765 = false;
BannerStyles1765 = new Array(
"a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}",
"img{border:0;clear:right;}",
"a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}",
"a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
);
document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1765/1765.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
</script>
<a href="http://www.e2save.com">Mobile Phone Offers</a><br />
Unlimited <a href="http://www.designload.net/?aff=designshack" rel="nofollow">Website Templates</a><br />
<a href="http://www.askgraphics.com/" title="Blog Design" rel="nofollow">Blog Design</a>
<br />
<ul style="width: 100%; list-style: none; margin: 0; padding: 0;">
<li style="margin: 0; padding: 0; clear: none;"> <a href="http://www.dreamtemplate.com">Website Templates</a> </li>
<li style="margin: 0; padding: 0; clear: none;"> <a href="http://www.cashprior.com/cash_advances.php">Merchant Cash Advance</a> </li>
</ul><br /><br />
</div>
</div>
</div>
<div id="bottom">
<div id="bottom_wrapper">
<div id="inspiredcolumn">
<h1>I'd like to be<br /><span class="white">inspired</span> by:</h1><br /><br />
<div class="inspireme">
<h2>Colour</h2><br />
<a href="/gallery/colour/red/"><img src="/images/c_red.gif" alt="Red Designs" /></a>
<a href="/gallery/colour/blue/"> <img src="/images/c_blue.gif" alt="Blue Designs" /></a>
<a href="/gallery/colour/green/"><img src="/images/c_green.gif" alt="Green Designs" /></a>
<a href="/gallery/colour/yellow/"><img src="/images/c_yellow.gif" alt="Yellow Designs" /></a>
<a href="/gallery/colour/brown/"><img src="/images/c_brown.gif" alt="Brown Designs" /></a>
<a href="/gallery/colour/orange/"><img src="/images/c_orange.gif" alt="Orange Designs" /></a>
<a href="/gallery/colour/pink/"><img src="/images/c_pink.gif" alt="Brown Designs" /></a>
<a href="/gallery/colour/greyscale/"><img src="/images/c_grey.gif" alt="Grey Designs" /></a>
<a href="/gallery/colour/various/"><img src="/images/c_various.gif" alt="Multi Coloured Designs" /></a> <br /><br /><br />
</div>
<h2>Category</h2><br />
<div class="categories"><a href="/gallery/category/blog/">Blog</a> | <a href="/gallery/category/portfolio/">Portfolio</a> | <a href="/gallery/category/charity/">Charity</a> | <a href="/gallery/category/community/">Community</a> | <a href="/gallery/category/corporate/">Corporate</a> | <a href="/gallery/category/css/">CSS</a> | <a href="/gallery/category/design/">Design</a> | <a href="/gallery/category/education/">Education</a> | <a href="/gallery/category/food and drink/">Food & Drink</a> | <a href="/gallery/category/magazine/">Magazine</a> | <a href="/gallery/category/misc/">Misc</a> | <a href="/gallery/category/music/">Music</a> | <a href="/gallery/category/photoblog/">Photoblog</a> | <a href="/gallery/category/photography/">Photography</a> | <a href="/gallery/category/podcast/">Podcast</a> | <a href="/gallery/category/software/">Software</a> | <a href="/gallery/category/sport/">Sport</a> | <a href="/gallery/category/television/">Television</a></div><br /><br />
<div class="inspireme">
<h2>Layout</h2><br />
<a href="/gallery/layout/1column/"><img src="/images/layout_1column.gif" alt="One Column CSS Layout" /></a>
<a href="/gallery/layout/2column/"><img src="/images/layout_2column.gif" alt="Two Column CSS Layout" /></a>
<a href="/gallery/layout/3column/"><img src="/images/layout_3column.gif" alt="Three Column CSS Layout" /></a>
<a href="/gallery/layout/grid/"><img src="/images/layout_grid.gif" alt="Grid CSS Layout" /></a>
<a href="/gallery/layout/other/"><img src="/images/layout_other.gif" alt="Other CSS Layout" /></a>
</div>
<br /><br />
</div>
<div id="learncolumn">
<h1>I'd like to <br /><span class="white">learn</span> about:</h1><br /><br />
<div id="tutorialcategories">
<ul>
<li><a href="/tutorials/category/accessibility/">Accessibility</a></li>
<li><a href="/tutorials/category/cssbasics/">CSS Basics</a></li>
<li><a href="/tutorials/category/fonts/">Fonts & Typography</a></li>
<li><a href="/tutorials/category/forms/">Forms</a></li>
<li><a href="/tutorials/category/htmlbasics/">HTML Basics</a></li>
<li><a href="/tutorials/category/inspiration/">Inspiration</a></li>
<li><a href="/tutorials/category/images/">Images & Graphics</a></li>
<li><a href="/tutorials/category/layouts/">Layouts</a></li>
<li><a href="/tutorials/category/navigation/">Navigation</a></li>
<li><a href="/tutorials/category/software/">Software</a></li>
<li><a href="/tutorials/category/standards/">Web Standards</a></li>
</ul>
</div>
</div>
<div id="aboutcolumn">
<h1>I've got a <br /><span class="white">question</span>...</h1><br /><br />
<h2>What is Design Shack?</h2>
We showcase stunning CSS and Web 2.0 design, alongside resources and inspiration for you to succeed in the same way. We only offer the cream of great design, perfect for getting that spark of creativity going again.<br /><br />
<h2>Can you feature my site?</h2>
Of course - if it's up to the mark! Just fill in our <a href="/submitasite.php">simple form</a>.<br /><br />
<h2>Can I help out?</h2>
We are looking for new people to help update and maintain the website alongside us. If you're interested, feel free to <a href="mailto:info@designshack.co.uk">contact us</a>.
</div>
<div id="footer">
<div style="float:left;">
Copyright © Design Shack 2008 | Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://designshack.co.uk">CSS</a> | <a href="/sponsorship.php">Advertise</a><br /><br />
</div>
<div style="float:right;">
<a href="http://www.csstopsites.com/galleries/"><img border="0" src="http://www.csstopsites.com/b_221.gif" alt="Top CSS Galleries Sites" /></a>
</div>
</div>
</div></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2121991-2";
urchinTracker();
</script>
</body>
</html>