How to make a simple tabbed menu with CSS and HTML

In the latest few years, I had to make a lot of menus of all kinds. One of the most efficient ones as you probably know, is the tabbed menu.

Most of the tutorials you can find on the internet are old,  with table based menus, with many lines of code and the list can continue.

Below you will find a very simple example based on ordered lists, with a stunning result.

Here is the HTML code:

<ul id="navigation">
	<li><a id="tab1" class="selected" href="javascript:void(0);">Tab 1</a></li>
	<li><a id="tab2" href="javascript:void(0);">Tab 2</a></li>
	<li><a id="tab3" href="javascript:void(0);">Tab 3</a></li>
	<li><a id="tab4" href="javascript:void(0);">Tab 4</a></li>
	<li><a id="tab5" href="javascript:void(0);">Tab 5</a></li>
</ul>

And the CSS:

ul#navigation {list-style:none;position:relative; z-index:2;top:1px;display:table;border-left:1px solid #f5ab36;}
ul#navigation li {float:left;}
ul#navigation li a {background:#ffd89b;color:#222;display:block;padding:6px 15px;text-decoration:none;border-right:1px solid #f5ab36;border-top:1px solid #f5ab36;border-right:1px solid #f5ab36;margin:0;}
ul#navigation li a.selected {border-bottom:1px solid #fff;color:#344385;background:#fff;}

Of course you can change the colors and the tabs or play with the code to make it better.

If you want to see the example in action, I prepared a small demo. It has some extra Javascript to help you see the tabs in action, but it is not required for implementation on your websites.

Here is the link: http://mihaifrentiu.com/tutorials/tabbed-menu.html

I hope you’ll find it useful.

12 Replies to “How to make a simple tabbed menu with CSS and HTML”

  1. Hi, need help, im trying use tabs to open different web pages. each time you click on the tab that one needs to be selected. using just css and html. anyone?

  2. That´s not A SIMPLE TABBED MENU WITH CSS AND HTML. It´s huge because it uses a big jquery-JavaScript lib. Too bad – I was looking for something light. :-/

  3. Newbie!!

    How do change content?
    As of now, I can only change “You have selected Tab 2”
    What if I want to have entirely new contant at every tab?
    Thanks in advance

  4. @Tice : I will update the code and remove the jQuery. In the article I stated that I’m using javascript code for demo purposes, but it is not required in your implementation. To remove this confusion, I will modify the example.

    @Bjorn: Entirely new content at every tab can be displayed by making Ajax reuqests, hiding it page and get it by ids, by loading iframes and many many more. When I will update the demo I will also make this more clear.

  5. I copied and pasted the code and added my own links. Thank you very much for this short simple menu. My only problem is that when I select a tab and go to a new page, the menu disappears. How do I keep the menu at the top as shown in your example?

    1. Ah! Looks like you have to put this menu on each page. Things are looking up. Now one more question, How can I center this menu on the page? Nothing I tried worked, but then again I am a novice at this.

Leave a Reply

Your email address will not be published. Required fields are marked *