Bob's Sample | Bob's Web Tools Page | Bob's Menus Page

Menu-making

  1. Plain demo menu... This is how I started a menu for my demo page, after breaking it into three parts. I pasted the same three links at the top of each of the three pages, but removed the link code around the name of the page I was on. On this page the "Bob's menus page" menu item is not a link; on the others it is:
    Bob's Sample | Bob's WebTools Page | Bob's Menus Page
    For that first menu I didn't do any special styling.
  2. Styling for menus can take many forms. One simple approach is to add background colors and dividers to plain text links (view the source code to see how the spacing was done)...
  3. The link anchors on this page are underlined and use the same colors. See the examples below for menus that use put menus within a page elements called "menu," "navigation" or "nav" and add colors and other attributes to make the menu more visually interesting.
  4. CSS makes possible a another very powerful menu-building technique. You can create a menu as an HTML "UL" list, then use CSS to restyle the list:
    • Remove the list bullets.
    • Change the font to make the menu stand out.
    • Choose link-text colors and background colors for each of the link anchor's "states" (link, visited, hover, active) to create "interactive" effects when your user mouses over a link..
    • Add borders and other attributes.
    • Bonus: By basing your menu on an HTML list, you make it "friendly" to browsers that ignore the CSS, including some smartphones. They will still show the menu as a recognizable list of items.
  5. Styled menu demos:

Bob's related CSS pages:

Related W3Schools page: CSS to restyle link colors