Home arrow HTML arrow 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
(Page 1 of 4 )

Vertical Main Menu

In this section I show you how you can write code for a vertical menu. All along we have seen a horizontal main menu. It is not easy to use the technology of the previous series to come up with a vertical main menu. It is easy, however, to use the technology of this series to come up with a vertical main menu.

The Example

The difference between the example here and the example we have been using, is that the main menu is vertical. In fact we shall use the same menu items we used previously in this series. This is the second example of this series. The two are very similar.

The main menu items will now be in a vertical rather than a horizontal bar. These are the same items we had in the previous example. The main menu is now a short vertical bar around the left-top corner of the web page.

We cannot really talk about drop down menus here, since a drop down menu drops down from a menu item in a horizontal bar. The same drop down menus are still there, but this time they appear on the right side of the vertical main menu, just next to it. However, let us still call these particular sub menus "drop down  menus," since they are the menus that appear immediately from the main vertical menu.

The second drop down menu here can produce the same sub menus that it produced when we were dealing with the horizontal main menu; and some of the sub menu items will produce the same sub menus they produced before. With the horizontal main menu (and with the exception of the last drop down menu), the sub menus were produced to the right of the drop down menu. Here, all sub menus are produced to the right of the drop down menus. The code for producing sub menus will not change.

For simplicity, the last drop down menu will not produce any sub menu, as it did in the previous case, where it produced a sub menu to its left. So we shall not have to worry about writing code for this. Even if it had to produce a sub menu, in the present circumstance, it would produce it on the right, since there is space on the right.

When a sub menu is produced, its top edge is at the same level as the top edge of the main menu item.

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