Home arrow HTML arrow Page 2 - A Vertical Menu for All Browsers

A Vertical Menu for All Browsers

This is the eighth part of a nine-part series that shows you how to build a menu that will work in all browsers. Let us quickly look at the design of a vertical main menu in this part.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
June 24, 2009
  1. · A Vertical Menu for All Browsers
  2. · Layout with Vertical Main Menu
  3. · Third, Fourth and Fifth Drop Down Menus
  4. · The Second Drop Down Menu

print this article

A Vertical Menu for All Browsers - Layout with Vertical Main Menu
(Page 2 of 4 )

The main table of this series, which held the drop down and sub menus, is not used here. Instead, the table for the main menu is given an additional cell to hold the drop down and sub menus. We now call the table for the main menu the main table.

In the previous case, the main table held the drop down and sub menus; the table for the main menu was different. The main table here has only one row and only two cells. The first cell holds the table with the main menu items. The second cell holds all the drop down and sub menus. The outline diagram for the main table is:

Table with main menu items

The rest

Fig. 17.1

This table has the value "inline" for its display property. This allows elements on the BODY to appear on its right side, after the second cell. The next diagram shows the main table with an inner table containing the main menu items.

Fig. 17.2

Note that all the main menu items now have the ‘>’ character. This is because a drop down menu now appears on the right of its main menu item. So we have a table inside the first cell. Each cell of the inner table has a link. Each of these cells and a link form a main menu item. The next diagram includes the first drop down menu, that is, the drop down menu resulting when the mouse pointer is over the “Main Link 0” item.

Fig: 17.3

The first drop down menu is a table. The initial and default value for its display property is "none." When the mouse pointer goes over the “Main Link 0” item, it is changed to "block." All the sub menus work in this way. They are all in the second cell with the value of their display property set to "none." When any are to be seen, their display property is set to "block."

All the drop down menu tables have the value of absolute in their position property. This property is in their style attribute. None of them has the left and top properties in their style attribute. In this way, they remain at the position, where you put them in the normal flow. Any drop down menu or sub menu that is to be displayed has a z-index value of 10, so that it will appear covering other elements.

Note: make sure you give the following attribute to the second cell of the main table.


If you do not do this, the drop down or sub menus will appear shifted downwards.

The third, fourth and fifth drop down menus have been configured in the same way as the first. Remember that the sub menu produced from the fifth drop menu has been omitted here, for simplicity. Well, the third, fourth and fifth drop down menu tables are each in a table. This is to enable the top edge of the drop down menu to be at the same level as the top edge of the corresponding main menu item. We look at the details of this in the next section.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials