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

A Menu for All Browsers

The aim of this series is to come up with code that can be used by all browsers without having code segments addressing the peculiarities of different browsers. I accomplished this in part in a previous series, but I needed to use extra code segments, and there were still some problems. This nine-part series addresses those problems while accommodating more browsers.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
May 06, 2009
  1. · A Menu for All Browsers
  2. · Tutorial arrangement of this series
  3. · The secret of the elaborated layout approach
  4. · Overall layout
  5. · The Main Menu

print this article

A Menu for All Browsers - Tutorial arrangement of this series
(Page 2 of 5 )

The first section of this series deals with the case where the background of a menu item is a color. The second section (very short) will deal with the case where the background is an image. Then we shall see how to design a menu where the main menu is vertical; it is more difficult to achieve this with the Simple Layout Approach. We summarize and conclude after that. In the last part we look at recommendations. 

Concerning the case where the background of the cell is a color, I will first of all describe the layout, which is very important in this series; then I will explain the code. In this series, the code is very different from what you may have seen in the previous series, where I walked you through the Simple Layout Approach. The layout in this series is more involved, but still fairly simple. 

The Example for this Series

The example we shall use here is the same as the one in the Simple Layout Approach, from the user’s perspective. When an ordinary user uses either design, he may not notice the difference. You have a main menu (horizontal) of five menu items. Sub menus can appear below it. In this example, there are five drop down menus, each corresponding to one of the main menu items. The second drop down menu can produce two sub menus. One of these sub menus can produce another sub menu. The last drop down menu can produce a sub menu on its left.

Well, there will be no drop down button. Each main menu item will respond to an onmouseover event to produce a drop down menu. When a mouse pointer goes over a main menu item, this produces a drop down menu. Some menu items in drop down menus have the ‘>’ character. When the mouse pointer goes over such a menu item, a sub menu is produced on the side of the drop down menu (this also applies to sub menus).

When the mouse pointer goes over any menu item (main menu item or the sub menu item), its background color changes from brown to firebrick. Note that I did not make the main menu item change color in the Simple Layout Approach series. When the mouse pointer goes away from the menu item, the brown color is returned.

The description is almost the same as we saw in the previous series, except for the absence of the drop down buttons. However, from a technical perspective, a lot is different.

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