Design Web Menu 2
Find your way around web menu design and website navigation
Contact us
Custom Search
|
Share this Page
Cool Clicks
Web Menu Design and Site Navigation - Part 2 of 2
Other Navigation issues
Navigation within a web page can also be important. If your page is long, you can provide links to enable visitors to return to the top of the page, or perhaps, to other bookmarked positions within the page. Some web surfers hate scrolling.
If you have a lot of pages, you don't need to clog up your primary web menu with items such as Contact us, About us, Privacy Policy, Terms of use, Site map and Links, which do not form part of the main information content of your site. If you have such items, you can place them in a secondary web menu.
External links are often included within the text (where they may detract from the smooth flow of the reading) or in an external links page (where they may never be discovered by your visitor). On this site we have used a Links / Resources column to overcome these disadvantages.
Web menu articles and Web menu generators
There are many good articles about website navigation available on the Internet. You'll find a selection in Links / Resources.
There are also quite a number of menu generator programs which you can buy. You tell them what your menu must look like and they generate the code (java scripts, CSS scripts and HTML) which you insert in your HTML code, wherever you want your web menu to appear.
For this site, we used a free product called CSS Menu Generator, from Wonderwebware.com. Another free menu generator is available from Coffee Cup.
Some web editor programs will also generate menus for you.
The menu for this website is inserted into the page layout
Web menus need changing from time to time, so I had to think about how I would handle that. If possible, I wanted to avoid having to change every web page in my site (40 pages), just because I wanted to add one new destination page into my web menu. This is how I handled it:
Using CSS Menu Generator, I generated the web menu HTML code for this site and placed it in a shared code block.
(Your web editor may provide a similar shared code facility. The idea is that, whenever you change the shared code block original, the web editor automatically updates all copies of it, so you don't have to.)
Then I copied the shared code block into my master web page layout.
Later, when I copy from my master web page layout to create my various web pages, the shared code block containing the web menu will be copied too. Then I'll have 40 copies of that shared code, one in each web page.
What happens when I want to change my menu?
When my web menu needs amendment, I will only change the original version of the shared code. The web editor will do the rest, copying the amended menu code into each of my 40 web pages.
A side benefit of this approach is that I can be sure that the menu displayed on every web page of my site will be identical.
At this stage, having placed the shared code block into my master page layout, my web page looked like Page Layout Design Step 4.
Then I added some additional navigation and identification information, as well as the copyright notice, to create Page Layout Design Step 5.
Is it starting to look a bit like a website, would you say?
Our next tutorial is about adding web design extras and decoration to your site...
Links / Resources
Example of a site with a secondary menu:
Natural Eye Care
Website Navigation articles:
Mardiros: Good web site navigation
Web Developers Notes (4 pages)
About.com: Simple Web Menu
Free Web Menu Generators:
Wonderwebware CSS Menu Generator
Coffee Cup Free DHTML Menu Builder
Page Layout Design Step 1
Page Layout Design Step 2
Page Layout Design Step 3
Page Layout Design Step 4
Page Layout Design Step 5
Build Site: Design Web Menu / Navigation Part 2 Top Prev Next: Website Design Extras
Copyright © 2009 - 2011 EasyWebsitePrimer.com Last updated: September 2011
Find your way around web menu design and website navigation issues