Laying Out Popup Menus

Hopefully, the logic behind popup menus is straightforward. Making popup menus work practically in your layout can take some hard work.

Believe it or not, the best approach is actually a mathematical one, so get out your scratch paper before you start coding and make a few sketches and calculations.

Let's say you have a nav bar with five main categories. Let's say that you also know the nav-bar height is 19 pixels, and you want the nav bar to fit across an 800-width screen. Shave off 40 pixels for scrollbars and the like, and you have a nav bar of width 760. Divide it into five equal sections of 152 pixels each, as in Figure 10.5.

Figure 10.5. Begin by sketching your rough nav-bar design and calculating the size of each ...

Get Web Design Garage now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.