How to Create Tabbed Navigation with CSS and No Images

Full Frame Shot Of Program Codes On Screen
Degui Adil / EyeEm / Getty Images
01
of 06

How to Create Tabbed Navigation with CSS and No Images

CSS 3 Tabbed Menu
CSS 3 Tabbed Menu. Screen shot by J Kyrnin

Navigation on web pages is a form of a list, and tabbed navigation is like a horizontal list. It's fairly easy to create horizontal tabbed navigation with CSS, but CSS 3 gives us a few more tools to make them look even nicer.

This tutorial will take you through the HTML and CSS needed to create a CSS tabbed menu. Click on that link to see how it will look.

This tabbed menu uses no images, just HTML and CSS 2 and CSS 3. It can be easily edited to add more tabs or change the text in them.

Browser Support

This tab menu will work in all major browsers. Internet explorer won't show the rounded corners, but otherwise, it will show tabs just like Firefox, Safari, Opera, and Chrome.

02
of 06

Write Your Menu List

All navigation menus and tabs are really just an unordered list. So the first thing you want to do is write an unordered list of links to where you want your tabbed navigation to go.

This tutorial is assuming that you're writing your HTML in a text editor and that you know where to place the HTML for your menu on your web page.

Write your unordered list like this:


  • class="tablist">

    You'll notice that the code calls out two things: class="tablist" and id="current". The first is required. If you don't put the tablist class on your unordered list, the tabs won't work. The second is optional. Put the id="current" on whichever tab you'd like to be highlighted on that page. I usually use this to highlight the page that I'm on, but you can use it to highlight the most important tab. Or you can remove it completely.

03
of 06

Start Editing Your Style Sheet

You can use either an external style sheet or an internal style sheet. The sample menu page uses an internal style sheet in the <head> of the document.

First We'll Style the UL Itself

This is where we use the classtablist .in the HTML. Rather than styling the UL tag, which would style all unordered lists on your page, you should style only the UL class.tablist So the first entry in your CSS should be:


.tablist {

}

I like to put in the ending curly brace (}) ahead of time, so I don't forget it later.

While we're using an unordered list tag for the tab menu list, but we don't want any bullets or numbers creeping in. So the first style you should add is.list-style:none; This tells the browser that while it's a list, it's a list with no pre-determined styles (like bullets or numbers).

Then, you can set the height of your list to match the space you want it to fill. I chose 2em for my height, as that's double the standard font size, and gives about half an em above and below the text of the tab. height:2em; But you can set your width to whatever size you'd like. UL tags will automatically take up 100% of the width, so unless you want it to be smaller than the current container, you can leave the width out.

Finally, if your master style sheet doesn't have presets for UL and OL tags, you will want to put them in. This means that you should turn off the borders, margins, and padding on your UL. padding:0; margin:0; border: none; If you already have reset the UL tag, you can change the margins, padding, or border to something that fits with your design.

Your final .tablist class should look like this:


.tablist {
 list-style:none; 
 height:2em;
 padding:0; 
 margin:0; 
 border: none;
}
04
of 06

Editing the LI List Items

Once you've styled your unordered list, you need to style the LI tags inside it. Otherwise, they will act like a standard list and each move to the next line without placing your tabs correctly.

First, set up your style property:


.tablist li {

}

Then you want to float your tabs so that they line up on the horizontal plane. float:left;

And don't forget to add some margin between the tabs, so they don't merge together. margin-right:0.13em;

Your li styles should look like this:


.tablist li {
 float:left; 
 margin-right:0.13em; 
}
05
of 06

Making the Tabs Look Like Tabs with CSS 3

To do most of the heavy lifting in this style sheet, I'm targeting the links within the unordered list. Browsers recognize that links do more on a web page than other tags, so it's easier to get older browsers to comply with things like hover states if you attach them to the anchor tag (links). So first write your style properties:


.tablist li a {

}
.tablist li a:hover {

}

Because these tabs should act like tabs in an application, you want the entire area of the tab to be clickable, not just the linked text. To do this, you have to convert the A tag from it's normal "inline" state into a block element. display:block; (If you're interested in knowing more about the difference, read Block-Level vs. Inline Elements.)

Then, an easy way to force your tabs to be symmetrical with one another, but still flex to fit the width of the text is to make the right and left padding the same. I used the padding shorthand property to set the top and bottom to 0 and the right and left to 1em. padding:0 1em;

I also chose to remove the link underlines, so that the tabs look less like links. But if your audience might be confused by that, leave out this line. link-decoration:none;

By putting a thin border around the tabs, it makes them look like tabs. I used the border shorthand property to put the border around all four sides border:0.06em solid #000; And then used the border-bottom property to remove it from the bottom. border-bottom:0;

Then I made some adjustments to the font, color, and background color of the tabs. Set these to the styles that match your site. font:bold 0.88em/2em arial,geneva,helvetica,sans-serif; color:#000; background-color:#ccc;

All of the above styles should go in the selector.tablist li a, the rule so that they affect the anchor tags in general. Then to make the tabs appear more clickable, you should add a few state rule.tablist li a:hover.

I like to change the color of the text and background to make the tab pop when you mouse over it. background:#3cf; color:#fff;

And I included another reminder to the browsers that I want the link to remain not underlined. text-decoration:none; Another common method is to turn the underline back on when you mouse over the tab. If you want to do that, change it to text-decoration:underline;

But Where is the CSS 3?

If you've been paying attention, you've probably noticed that there haven't been any CSS 3 styles used in the style sheet. This has the advantage of working in any modern browser, including Internet Explorer. But it doesn't make the tabs look like anything more than square boxes. By adding a CSS 3 style call border-radius (and it's associated browser-specific calls) you can make the edges rounded, to look more like tabs on a manila folder.

The styles you should add to the .tablist li a rule are: -webkit-border-top-right-radius:0.50em; -webkit-border-top-left-radius:0.50em; -moz-border-radius-topright:0.50em; -moz-border-radius-topleft:0.50em; border-top-right-radius:0.50em; border-top-left-radius:0.50em;

These are the final style rules I wrote:


.tablist li a {
 display:block;
 padding:0 1em;
 text-decoration:none;
 border:0.06em solid #000;
 border-bottom:0;
 font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
 color:#000;
 background-color:#ccc;

 /* CSS 3 elements */
 webkit-border-top-right-radius:0.50em;
 -webkit-border-top-left-radius:0.50em;
 -moz-border-radius-topright:0.50em;
 -moz-border-radius-topleft:0.50em;
 border-top-right-radius:0.50em;
 border-top-left-radius:0.50em;
}

.tablist li a:hover {
 background:#3cf; 
 color:#fff;
 text-decoration:none;
}

With these styles, you have a tabbed menu that works in all major browsers and looks like nice printed tabs in CSS 3 compliant browsers. The next page gives you one more option you can use to dress it up even more.

06
of 06

Highlight the Current Tab

In the HTML I created, the UL had one list element with an ID. This allows you to give one LI a different style from the rest. The most common situation is to make the current tab stand out in some way. Another way to think of this is that you want to gray out the tabs that aren't live. You then change where the id is on the different pages.

I style both the #current A tag as well as the #current A: hover sta so that both are slightly different. You can change the color, background color, even the height, width and padding of that element. Make whatever changes make sense in your design.


.tablist li#current a {
 background-color: #777;
 color: #fff;
}
.tablist li#current a:hover {
 background: #39C;
}

And you're done! You've just created a tabbed menu for your website.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Create Tabbed Navigation with CSS and No Images." ThoughtCo, Jun. 21, 2017, thoughtco.com/tabbed-navigation-with-css-no-images-3468963. Kyrnin, Jennifer. (2017, June 21). How to Create Tabbed Navigation with CSS and No Images. Retrieved from https://www.thoughtco.com/tabbed-navigation-with-css-no-images-3468963 Kyrnin, Jennifer. "How to Create Tabbed Navigation with CSS and No Images." ThoughtCo. https://www.thoughtco.com/tabbed-navigation-with-css-no-images-3468963 (accessed October 24, 2017).