Select a topic from the menu bar. Now, this text is not coupled to a topic on the Menu-bar, and can therefore never be recalled again (other than by refreshing the page).
The purpose of this page is to demonstrate the possibilities of using a 'Tab'-like menu on a webpage. The distinct tabs are all in a single webpage, but only a single tab-topic is displayed.
Characteristics of such a solution:
Fast loading (single page only);
Instantaneous switching between tabs;
Browser must be capable and allowed to use scripting (hardly a restriction);
Impossible to bookmark or hyperlink to a particular tab (hyperlink can be solved via hash-tag; try Tabmenu.html#3).
Here you can play with the appearance of the menu.
item
active
passive
Menu foreground color
Menu background color
Menu border
Menu bottom border
Topic text background color
Notes:
standard is the normal background color (light blue);
the options provided are not exhaustive at all, just some options for demonstrative purposes.
Try this , or this .
The menu-bar is implemented by a table with only a single row.
Table width is set at 100% (i.e. full page width; not required but provides a nice view).
The first cell (index 0) is hidden to support the selection of this invisible 0 cell at initialisation.
Other table cells use an 'onclick' to Javascript to show the related topic. Consequences:
Cells without the 'onclick' remain dead (as the first (hidden) and last cells on above menu bar);
The 'onclick'-parameter must correspond to the cell index (otherwise some script changes are required);
When you have many topics, they could be spread over multiple rows (requires minor adaptation of the script).
The topic texts are all cells in another table.
The table only consists of a single row.
The column number corresponds to the parameter in the 'onclick'.
However, by default all cells remain hidden and only the cell related to the topic appears when the script unhides it.
It is also possible to use another display/hide-scheme than simple blocks used here (requires some adaptations to the script).
This table has also width set at 100% to accommodate non-standard background color.
Instead of a table, a series of other HTML-elements (e.g. DIVs) can be used. This requires some adaptations in the script.
The changes in display when a tab is selected are carried out by a script. This script is a bit simplistic as it resets all topics to passive, even when a topic was already passive; thwn it sets the selected topic to active). This was done on purpose to get immediate and consistent results when playing with 'Display variants'.