Tab Header

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 area to link to the stylesheet.

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:

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><p></p><div id="crayon-57bdf88c0f129951276619" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;"><div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span><div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-mixed-highlight" title="Contains Mixed Languages"></span><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div><div class="crayon-info" style="min-height: 18.2px !important; line-height: 18.2px !important;"></div><div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 20px !important;"> <?php $page="home"; ?></textarea></div><div class="crayon-main" style=""><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-57bdf88c0f129951276619-1">1</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57bdf88c0f129951276619-1"><span class="crayon-ta"><?php</span><span class="crayon-h"> </span><span class="crayon-v">$page</span><span class="crayon-o">=</span><span class="crayon-s">"home"</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-ta">?></span></div></div></td></tr></table></div></div><p></p><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 PHP in your pages, replace the code in Step 5 with the following:</p><p></p><div id="crayon-57bdf88c0f12f561292510" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;"><div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span><div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div><div class="crayon-info" style="min-height: 18.2px !important; line-height: 18.2px !important;"></div><div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 20px !important;"> <li><a href="/index.php" title="The Weblog">Blog</a></li></textarea></div><div class="crayon-main" style=""><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-57bdf88c0f12f561292510-1">1</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57bdf88c0f12f561292510-1"><span class="crayon-o"><</span><span class="crayon-v">li</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">"/index.php"</span><span class="crayon-h"> </span><span class="crayon-v">title</span><span class="crayon-o">=</span><span class="crayon-s">"The Weblog"</span><span class="crayon-o">></span><span class="crayon-v">Blog</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">li</span><span class="crayon-o">></span></div></div></td></tr></table></div></div><p></p><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><div class="content-ad-728"><div id="bsap_1792" class="bsaPROrocks" data-serve="CVYI6KV"></div></div></div> </article></div><div class="fourcol last right-column"><div class="sidebar-box newsletter"><h3>Become a Member</h3><p>Join our 15,000+ members to submit your designs, collect inspiration, and receive our weekly newsletter.</p><form action="/membership/" method="post"> <input type="submit" value="Join Now →"></form></div><div class="sidebar-box darker"><p><a href="https://www.skillshare.com/membership/checkout?coupon=designshack16&utm_source=DesignShack&utm_medium=banner-ad&utm_term=500x500&utm_campaign=2016-08-01-designshack-sp" rel="nofollow"><img src="/images/skillshare.jpg" style="width:300px; height:auto;" alt="Skillshare 3 Month Trial" /></a></p><br /><p>Get unlimited access to Skillshare with a 3 month trial – <a href="https://www.skillshare.com/membership/checkout?coupon=designshack16&utm_source=DesignShack&utm_medium=banner-ad&utm_term=500x500&utm_campaign=2016-08-01-designshack-sp" rel="nofollow">only $0.99!</a></p></div><div class="sidebar-box darker"><p><a href="https://codemyviews.com/trusted-agency-development-partner" rel="nofollow"><img src="/images/codemyviews.png" style="width:300px; height:auto;" alt="Skillshare 3 Month Trial" /></a></p><br /><p>The best agencies choose Code My Views to deliver amazing digital products and experiences. <a href="https://codemyviews.com/trusted-agency-development-partner" rel="nofollow">Focus on the creative and let us handle the code.</a></p></div><div class="sidebar-box darker"><div class="ad-300250"><div id="bsap_1606" class="bsaPROrocks" data-serve="C6AIV2Y"></div></div></div></div><div class="fourcol last right-column"><div class="sidebar-box about-author"><div class="author-archive-intro"><h5>About the Author</h5><div class="author-archive-profileimage"><img alt='' src='https://secure.gravatar.com/avatar/6350b113f4410798e1ee74a14b8c25a3?s=100&d=%2Fimages%2Fgravatar.gif&r=g' srcset='https://secure.gravatar.com/avatar/6350b113f4410798e1ee74a14b8c25a3?s=200&d=%2Fimages%2Fgravatar.gif&r=g 2x' class='avatar avatar-100 photo' height='100' width='100' /></div><h3><a href="https://designshack.net/author/davidappleyard/">David Appleyard</a></h3><p><a href="http://davidappleyard.net">David Appleyard</a> manages the Tuts+ Editorial Team, along with having founded several design websites including <a href="https://designshack.net">Design Shack</a>, <a href="https://creativevip.net">Creative VIP</a>, and <a href="https://themelantic.com">Themelantic</a>.</p><br /><a href="http://twitter.com/davidappleyard" class="icon-twitter"></a> <a href="https://plus.google.com/108120757686210234798?rel=author" class="icon-googleplus"></a> <a href="http://dribbble.com/davidappleyard" class="icon-dribbble"></a></div></div></div></div></div><div class="container footer"><div class="row"><div class="col copyright"><p><a href="http://compactcreative.com">Made by Compact Creative © 2016</a></p><p class="footer-social"> <a href="http://twitter.com/designshack" class="icon-twitter"></a> <a href="http://facebook.com/designshack" class="icon-facebook"></a> <a href="https://plus.google.com/+designshack?rel=publisher" class="icon-googleplus"></a> <a href="https://designshack.net/feed" class="icon-rss"></a></p></div><div class="col footer-nav"><p><strong><a href="/" title="Design Shack">Home</a></strong> / <strong><a href="/articles" title="Design Articles & Tutorials">Articles</a></strong> / <strong><a href="/category/articles/inspiration" title="Design Inspiration">Inspiration</a></strong> / <strong><a href="/gallery" title="Design Gallery">Gallery</a></strong></p><p><a href="/about" title="About Design Shack">About</a> / <a href="/membership" title="Design Shack Advertising">Membership</a> / <a href="/advertising" title="Design Shack Advertising">Advertising</a> / <a href="/advertising" title="Write For Us">Write For Us</a></p></div><div class="col mediatemple last"> <a class="mediatemple-link" href="http://www.mediatemple.net/#a_aid=4e2dbbb0a0a4d"><span>In Partnership with</span></a> <a class="maxcdn-link" href="http://maxcdn.com"><span>and</span></a></div></div></div><script src="https://use.typekit.net/mfs7ifq.js"></script><script>try{Typekit.load({ });}catch(e){}</script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><script type="text/javascript" src="/min/f=js/designshack.js"></script><script> $( ".sk-fading-circle" ).addClass( "enabled" ); $( ".archive-list" ).addClass( "enabled" ); $( ".archive-list-item" ).addClass( "enabled" ); </script><script> var countUp, setCount, url, totalCount; totalCount = 0; url = "https://designshack.net/articles/css-tabs-rollover-menu/"; /*$.getJSON("https://cdn.api.twitter.com/1/urls/count.json?url=" + url + "&callback=?", function(json) { return setCount($(".twCount"), json.count); });*/ $.getJSON("https://graph.facebook.com/" + url, function(json) { return setCount($(".fbCount"), json.shares); }); $.getJSON("https://api.pinterest.com/v1/urls/count.json?url=" + url + "&callback=?", function(json) { return setCount($(".prCount"), json.count); }); $.getJSON("https://www.linkedin.com/countserv/count/share?url=" + url + "&callback=?", function(json) { return setCount($(".liCount"), json.count); }); setTimeout(function() { var sum = 11; $('.sum').each(function() { sum += +$(this).text()||0; }); $("#subtotal").text(''+sum+' Shares'); }, 500); </script><div class="share-values"> <a href="https://designshack.net/articles/css-tabs-rollover-menu/" class="btnFb" title="Facebook"><span class="fbCount sum">0</span></a> <a href="https://designshack.net/articles/css-tabs-rollover-menu/" class="btnPr" title="Pinterest"><span class="prCount sum">0</span></a> <a href="https://designshack.net/articles/css-tabs-rollover-menu/" class="btnLi" title="LinkedIn"><span class="liCount sum">0</span></a></div><script type='text/javascript'> /* <![CDATA[ */ var swiftypeParams = {"engineKey":"XXGxbaxA7yvo3bg9uzKp"}; /* ]]> */ </script><script type='text/javascript' src='/min/f=wp-content/plugins/swiftype-search/assets/install_swiftype.min.js?ver=4.3.1'></script><script type="text/javascript" async="" src="//s.swiftypecdn.com/cc.js"></script><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2121991-2', 'auto'); ga('send', 'pageview'); </script><script type='text/javascript'><!-- var seriesdropdown = document.getElementById("orgseries_dropdown"); if (seriesdropdown) { function onSeriesChange() { if ( seriesdropdown.options[seriesdropdown.selectedIndex].value != ( 0 || -1 ) ) { location.href = "https://designshack.net/series/"+seriesdropdown.options[seriesdropdown.selectedIndex].value; } } seriesdropdown.onchange = onSeriesChange; } --></script><link rel='stylesheet' id='crayon-css' href='https://designshack.net/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=_2.7.2_beta' type='text/css' media='all' /><script type='text/javascript' src='https://designshack.net/wp-includes/js/wp-embed.min.js?ver=4.6'></script><script type='text/javascript'> /* <![CDATA[ */ var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"https:\/\/designshack.net\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""}; var CrayonSyntaxStrings = {"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"}; /* ]]> */ </script><script type='text/javascript' src='https://designshack.net/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=_2.7.2_beta'></script><script> $(document).ready(function() { imagesLoaded( document.querySelector('.archive-list'), function( instance ) { $(".sk-fading-circle").fadeOut("slow", function() { $(".archive-list").fadeIn("slow") $('.archive-list').masonry({ itemSelector: '.archive-list-item', columnWidth: '.archive-list-sizer', "gutter": 20 }); }); }); }); </script><script type="text/javascript" src="//s.skimresources.com/js/44514X1151950.skimlinks.js"></script><script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://js-agent.newrelic.com/nr-100.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrf2","bam.nr-data.net","c3243eb641","1135151","MV0AZ0VZXUNQAhALXQgXN0FeF1peVQQcTEIOSA==",0,15,new Date().getTime()]);</script> </body></html>