How to Create Menus in CSS3 - dummies

How to Create Menus in CSS3

By John Paul Mueller

Most sites use a menu system of some kind, which you can create using CSS3. In at least some cases, the menu system uses image maps or some other technique that isn’t supported by Dynamic Drive. However, most sites rely on horizontal, vertical, or combination menus.

Over the years, users have gotten used to working with menus, so using them on a site simply makes sense. A user understands how to use a menu intuitively, so there’s no learning curve. Of course, poorly defined or complex menu entries can still confuse users, but the mechanics of the menu itself are well understood.

How to develop horizontal menus in CSS3

Horizontal menus have selections that appear in a horizontal line. Normally these menus appear across the top of a content area, but menus can also appear at the bottom of the content area or any place between. The point is that a horizontal menu has a particular orientation.

For most sites, the horizontal menu represents main site selections, such as going to a list of products or seeing the about page. Dynamic Drive provides seven pages of horizontal menu offerings (as of this writing) that provide various special effects.


The menus all have a special effect. When you click a particular menu selection, you see a page with a demonstration. In order to see the special effect, you normally have to hover the mouse pointer over the characters or graphics supplied as part of the menu.

For example, with the example menu, hovering the mouse pointer over one of the hearts makes the heart spin around to indicate that the heart has been selected as a menu option.


Notice that the top of the page also includes a description of the menu, along with a listing of compatible browsers. The description usually contains some technical notes as well. It’s important to read the technical notes after reviewing the code to ensure you understand how to implement the menu.

The bottom half of the page contains the code for the example. Unlike the layouts, the CSS and HTML are placed in separate windows, which means you don’t have to separate them manually.

In addition, the HTML part doesn’t provide a complete page — it’s a fragment that you’ll need to embed in your own page to test. (You can find this particular example as a full page in the Chapter 07 folder of the downloadable code as HorizontalMenu.HTML.) However, you use the same technique as you do with the layouts to expand and copy the code when desired.


Notice the link after the code. The example provides one menu that relies on heart icons. You can click this link to download the icons if desired.

In some cases, these icons are provided by other sites. The other site may have made the icons inaccessible and you’ll find that you won’t be able to download them after all (such as the heart-shaped social media icons used for this example). A way around this problem is to download the icon directly from the Dynamic Drive site.

Not all of the menus are a single layer. The Split Drop Down Menu provides two levels of selections A few of these menus rely on third-party products, such as jQuery. The jQuery Drop Line Menu example provides multiple menu levels (up to four levels are shown in the example).

Because this isn’t a pure CSS solution, however, you need to ensure that the users who access the site will have JavaScript support enabled in their browsers.

How to develop vertical menus in CSS3

Vertical menus can be used for site redirection. However, many sites use them for page-specific or topic-specific links. You find the vertical menu options at CSS Library. There aren’t as many vertical menu options as there are horizontal menus (only three pages’ worth). In addition, you might have a hard time finding compatible horizontal and vertical menu pairs (the CSS3 shadow menus come in both horizontal and vertical formats).

The vertical menus work the same as the horizontal menus do. The only difference is their orientation. The example pages contain the same types of content and you must insert the HTML code into an existing page, just as you do with the horizontal menus.

The site doesn’t currently provide any multilevel vertical menus, so if you need more than one menu level, you must use a horizontal menu or locate a menu on another site.