Tabs
If you are a computer user for sometime now, chances are that you may be familiar with tabs. Windows operating system has plenty of them.
Example
See image from Windows operating system,
Horizontal top menus can be made effectively with tabs. They are mostly used in single level menus (without sub-menus) and two level menus (with one sub-menus) only.
Creating Tabs
Making tabs is similar to making a single level horizontal menu, but there is a difference.
In a single level menu when you click a link, a new content section is loaded, where as in the case of tabs, when you click a link you have to load a new content section and highlight the tab as well by changing its color.
Some more adjustments are needed if you have two rows of menu (tab) items, like in the example image above. In this case you have to bring the focus or clicked tab down stairs in the down row.
Tabs can be implemented by changing just a bit of CSS layout in the following page. I have made a simple tab menu by using Html and CSS
Example Code
The code produces the following tabs,
You can download the compressed file here to view the code. You will need Winrar to uncompress it.
Now you have seen some types of menus that you can play with. Just choose one and implement it on your website. Happy website building!
Related:
Navigation Methods
Pop out Menus
Drop down Menus
Link to this page :
Copy and paste the following code in an html document to link to this page,