Are you a member? Register or Login

Open Menu

CSS Tabs Rollover Menu

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 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 1 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Explore Envato Elements

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-5e2aa53554265935181054 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-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-5e2aa53554265935181054-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-5e2aa53554265935181054-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-5e2aa53554267285061351 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-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-5e2aa53554267285061351-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-5e2aa53554267285061351-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=div-gpt-ad-1500475375974-0 style='height:90px; width:728px;'> <script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1500475375974-0'); });</script> </div></div></article><aside><section class=membership><h3>Become a Member</h3><p>Join our 30,000+ members to receive our newsletter and submit your design work.</p><form action=/membership/join/ method=post> <input type=hidden value name=email> <input type=text class=email onfocus="this.value=''" value="Email Address" name=l2ADb2kaDB22 id=l2ADb2kaDB22 aria-label="Email Address"> <input type=submit value="Subscribe →"><div class=membership-privacy><p>We'll use your email address to send one newsletter every week, and occasional promotions from us and our partners. See our <a href=/privacy/ >privacy policy</a>.</p></div></form></section><section class=carbon> <script async src="//cdn.carbonads.com/carbon.js?serve=CK7IV2QU&placement=designshacknet" id=_carbonads_js></script> </section><section class=ad-300-250><div id=div-gpt-ad-1500475375974-3 style='height:250px; width:300px;'> <script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1500475375974-3'); });</script> </div></section><section class=ad-300-600><div id=div-gpt-ad-1505731337658-0 style='height:600px; width:300px;'> <script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1505731337658-0'); });</script> </div></section><section class="social-share sticky-social"><h3>Share This Post</h3><div class=social-links> <a href="https://twitter.com/intent/tweet?text=CSS+Tabs+Rollover+Menu&url=https://designshack.net/articles/css-tabs-rollover-menu/&via=designshack" class=icon-twitter title="Share on Twitter"><span>Share on Twitter</span></a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://designshack.net/articles/css-tabs-rollover-menu/" class=icon-facebook title="Share on Facebook"><span>Share on Facebook</span></a> <a href="http://pinterest.com/pin/create/button/?url=https://designshack.net/articles/css-tabs-rollover-menu/&description=CSS+Tabs+Rollover+Menu&media=https://designshack.net/images/twitter-card.jpg" class=icon-pinterest title="Share on Pinterest"><span>Share on Pinterest</span></a></div></section></aside></div></div></div></main><div class="wrapper wrapper-footer footer-features"><h3>Our Most Popular Features</h3><ul><li><a href=https://designshack.net/background-textures/ title="Background Textures">Background Textures</a><span>Updated</span></li><li><a href=https://designshack.net/brochure-templates/ title="Brochure Templates">Brochure Templates</a></li><li><a href=https://designshack.net/business-card-templates/ title="Business Card Templates">Business Card Templates</a></li><li><a href=https://designshack.net/cv-resume/ title="CV & Resume Templates">CV & Resume Templates</a></li><li><a href=https://designshack.net/flyer-templates/ title="Flyer Templates">Flyer Templates</a></li><li><a href=https://designshack.net/font-collections/ title="Font Collections">Font Collections</a></li><li><a href=https://designshack.net/google-slides-themes/ title="Google Slides Themes">Google Slides Themes</a></li><li><a href=https://designshack.net/how-to-design-a-brochure/ title="How to Design a Brochure">How to Design a Brochure</a><span>Updated</span></li><li><a href=https://designshack.net/how-to-design-a-logo/ title="How to Design a Logo">How to Design a Logo</a><span>Updated</span></li><li><a href=https://designshack.net/instagram-templates/ title="Instagram Templates">Instagram Templates</a></li><li><a href=https://designshack.net/iphone-mockups/ title="iPhone Mockups">iPhone Mockups</a></li><li><a href=https://designshack.net/keynote-templates/ title="Keynote Templates">Keynote Templates</a></li><li><a href=https://designshack.net/lightroom-presets/ title="Lightroom Presets">Lightroom Presets</a><span>Updated</span></li><li><a href=https://designshack.net/logo-templates/ title="Logo Templates">Logo Templates</a></li><li><a href=https://designshack.net/photoshop-actions/ title="Photoshop Actions">Photoshop Actions</a><span>Updated</span></li><li><a href=https://designshack.net/photoshop-brushes/ title="Photoshop Brushes">Photoshop Brushes</a></li><li><a href=https://designshack.net/poster-design/ title="Poster Design">Poster Design</a></li><li><a href=https://designshack.net/powerpoint-templates/ title="PowerPoint Templates">PowerPoint Templates</a><span>Updated</span></li><li><a href=https://designshack.net/website-mockups/ title="Website Mockups">Website Mockups</a></li><li><a href=https://designshack.net/wedding-design/ title="Wedding Design">Wedding Design</a></li></ul></div><div class="wrapper wrapper-footer"><footer><div class=copyright-social><p><a href=https://compactcreative.com>Made by Compact Creative © 2020</a></p><p class=social-links> <a href=https://twitter.com/designshack class=icon-twitter title="@designshack on Twitter"><span>Twitter</span></a> <a href=https://facebook.com/designshack class=icon-facebook title=Facebook><span>Facebook</span></a> <a href=https://www.pinterest.com/designshack/ title=Pinterest class=icon-pinterest><span>Pinterest</span></a> <a href=http://feedpress.me/designshack title="RSS Feed" class=icon-rss><span>RSS Feed</span></a></p></div><div class=footer-links><p><strong><a href=https://designshack.net title="Design Shack">Home</a></strong> / <strong><a href=https://designshack.net/category/articles/ title="Design Articles & Tutorials">Articles</a></strong> / <strong><a href=https://designshack.net/features/ title="Design Features">Features</a></strong> / <strong><a href=https://designshack.net/gallery/ title="Design Gallery">Gallery</a></strong></p><p><a href=https://designshack.net/about/ title="About Design Shack">About</a> / <a href=https://designshack.net/membership/ title="Design Shack Advertising">Membership</a> / <a href=https://designshack.net/advertising/ title="Design Shack Advertising">Advertising & Sponsorship</a> / <a href=https://designshack.net/privacy/ title="Privacy Policy">Privacy</a></div><div class=siteground-partnership><p><a class=siteground-link href="https://www.siteground.com/index.htm?afcode=2d47fb9cdbcdde4febce905b72f4b736"><span>In Partnership with</span></a></p></div></footer></div> <script src=//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js></script> <script src=/framework/scripts.js></script> <script>/* Fix Masonry Image Loading */ var cw = $('.item-thumbnail').width(); cw = (cw + 50) * 0.66666; $('.item-thumbnail').css({'height':cw+'px'}); $(window).on('resize', function(){ $('.item-thumbnail').css({'height':'auto'}); $('.item-thumbnail').css({'min-height':'0px'}); }); /* Masonry Grid */ function resizeGridItem(item){ grid = document.getElementsByClassName("masonry")[0]; rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows')); rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')); rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap)); item.style.gridRowEnd = "span "+rowSpan; } function resizeAllGridItems(){ allItems = document.getElementsByClassName("item"); for(x=0;x<allItems.length;x++){ resizeGridItem(allItems[x]); } } function resizeInstance(instance){ item = instance.elements[0]; resizeGridItem(item); } window.onload = resizeAllGridItems(); window.addEventListener("resize", resizeAllGridItems); allItems = document.getElementsByClassName("item"); for(x=0;x<allItems.length;x++){ imagesLoaded( allItems[x], resizeInstance); } /* Gallery Dropdown */ $('#archive-category-list').change(function() { window.location = $(this).val(); }); /* Search Box */ $(".searchbox").on("click", function() { if ($(this).val() == "Search Design Shack") $(this).val("") });</script> <script src=/framework/lazyloading.js></script> <script>// lazy loading lozad(".lazy-load", { rootMargin: "800px 0px", loaded: function (el) { el.classList.add("is-loaded"); } }).observe()</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>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 src=https://designshack.net/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js></script> <script src=//m.servedby-buysellads.com/monetization.js></script> <script>(function() { if (typeof _bsa !== 'undefined' && _bsa) { _bsa.init('stickybox', 'CKYDLK3I', 'placement:designshacknet'); } })();</script> </body></html>