Things you want to know about websites

 

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,

tabs

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,

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!


Bookmark or Add to Favourites

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,