Tabs are popular navigation components of web pages. There's one post on the web saying 37 techniques of make tabs. 37 is too much for me. I need an easy, flexible way to design my tabs according the needs. That's why I spent almost 2 weeks time to explore how to make the tabs.
There are 2 kinds of techniques arousing my interest - CSS and CSS with javascript. In terms of functionality, tabs can be used as page navigation or content navigation. CSS method is preferred designing tabs for page navigation. But it is limited for content navigation. CSS plus javacript is preferred for this purpose. Whatever tabs you want to design, CSS is the fundermental. So let's start from the very basics.
For page navigation, <a> is the element I must use because of its attribute href to link to other page. Besides this, there are other 2 CSS syntax for <a> which are very useful. a:hover {background:#fff} changes background color to white on hover, which in fact removes the use of javascript onmouseover. Another useful css syntax is {display:block}. It could expand hover area to the whole area of parentNode with proper {padding:xx}.
Another way to get this effect is changing the parentNode of <a> to inline using CSS {display:inline}. Of course, we can use inline element such as <span> directly to get the same effect.
inline <span> + <a>Although we could use <span> or <div> as the parentNode of <a> , we use <li> instead because it's simple for naming in CSS. <li> is a block element. So we can foresee there are 2 techniques to generate tabs.
CSS li {display:inline} changes the elements of <li> to inline ones. And they will display horizontally as inline elements. <ul> serves as a natual container for all <li> elements. You could select to add a content box or not.
One point that may be aware is you may not use CSS li {margin:0px} to set the gaps between the tabs to 0. There are always 5px of gap between the tabs. The reason for that is when a block elements are changed to inline. If there's whitespace between the elements, the browser will display 5px space for the whitespace between the inline elements. So if you don't like the gap between the tabs. Remove the whitespace between the <li> elements and set li {margin:0px}.
CSS {display:block} changes the element <a> to block ones so we get better hover effect. CSS li {float:left} makes <li> elements float horizontally. This is another way of making tabs, which you don't need to consider the effect of white space between the <li> elements. But
The tabs can be designed under the content box by changing the position of the <ul>and content box <div> upside down.
A javascript script has been developed to make it possible for the tabs located in the top, bottom, left and right side of the content box for the content navigation. We will discuss this in another topic.
See also two level CSS tabs.
Social Bookmark if the page is useful.