Creating Video

You are here : HomeCreating Graphics for the WebCreate a Navigation Bar

factfile3.8 Expanding navigation bars


AmazonSome large websites, such as the Halfords and Amazon websites shown here, use a drop down or expanding style of navigation bar. This means that they can fit more links into a small space. The customer is not immediately faced with a confusing mass of choices, but they can select a category to reveal a submenu of related links.

This type of drop down / pop out menus usually appear over the top of the page content, since moving the mouse away from the bar will clear the menu and allow the visitor to read any content again.

Some designers do not like this style of navigation bars because links are hidden from the user, who is obliged to hunt along the menu bar to find the link they are looking for.

Drop down menus can also close unexpectedly if the mouse moves out of the correct area. Users on small screens may even find the menu expands outside the visible area of their computer monitor. This may not be a problem for experienced web users, but they may seem awkward to visitors who are less comfortable in using the web, or users with disabilities. Even so, many major commercial sites make use of them, although they will also often provide alternative text-based navigation links that are more accessible, sometimes in the form of a single page “sitemap” that displays every link.


This style of drop-down navigation bar is often built using JavaScript code, and there are many script libraries on the web that can provide these kind of scripts: such as this one.

Copy and paste the relevant code into the html code of your page using Serif WebPlus. For more on how to do this, take a look at the Creating a Multimedia Webpage unit where you can find a helpsheet on how to insert JavaScript code.

You can also use Serif DrawPlus to build a similar kind of expanding navigation bar as a keyframe animation, and then export it as a Flash SWF file as explained in the next section.

Previous PageMain Site Indexsection indexNext page