A.E.Veltstra
2 Jan. 2004
(Re)creating the horizontal menu bar: hover over a menu item and a horizontal submenu will appear below the main bar. Javascript and CSS.
Functionality
The horizontal menu bar consists of two rows. The top row is the main menu bar, which is normally visible. The bottom row is the sub menu bar. The contents thereof differs per main item. The bottom row is shown when the user points at a main item.
Technical
The main menu and the sub menus are simple unordered list elements. The menu items are list item elements. Thus, a style-less browser would still show the menu items, though it would render them as a list. CSS turns them into horizontal bars, and javascript makes the correct sub menus appear.
Limitations
A javascriptless browser will not show the sub menus, however, the main menu items contain navigable hyperlinks.
The menu bar will not wrap to the window width. This proved too difficult.
Live example
The horizontal menu bar consists of two rows. The top row is the main menu bar, which is normally visible. The bottom row is the sub menu bar. The contents thereof differs per main item. The bottom row is shown when the user points at a main item.
Technical
The main menu and the sub menus are simple unordered list elements. The menu items are list item elements. Thus, a style-less browser would still show the menu items, though it would render them as a list. CSS turns them into horizontal bars, and javascript makes the correct sub menus appear.
Limitations
A javascriptless browser will not show the sub menus, however, the main menu items contain navigable hyperlinks.
The menu bar will not wrap to the window width. This proved too difficult.
Live example
Need problem solving?
Talk to me. Let's meet for coffee or over lunch. Mail me at “omegajunior at protonmail dot com”.