LWD logoLori's Web DesignLWD logo

Menu Samples

Following are Menu Samples of vertical and horizontal drop down menus
designed in JavaScript, CSS and HTML (click images to view websites).

Drop down menus can be designed in multiple formats. Vertical menus can be used when the site doesn't have a lot of images and contains only short pages because about 20% of the width of the page is used up for the menu and everything under the menu will remain blank and cause wasted space, otherwise a horizontal drop down menu should be used.

Simple Horizontal Menu Sample in HTML and CSS

Horizontal Menus should only be applied to a website with about 2 rows of links or it will take up too much space. Following is a horizontal menu sample designed with HTML and CSS to control mouseover colors.

Home | Contact | Links

See Horizontal Menu Code

horizontal menu sample

vertical menu sample

Simple HTML Vertical Menu Samples

The vertical menu on the left is designed in HTML. CSS is not needed unless you want color changes on mouseover. The code below is for setting up a menu in list format:
  • Home
  • Contact
  • Links

List Menu Code

Horizontal Drop Down Menus in CSS, HTML and Javascript

When you have a lot of sub menus and a lot of pages then a horizontal drop down menu may be needed. Most browsers support menus designed in HTML and CSS. Some search engines can't read Javascript, so a combination of all 3 is sometimes needed for drop down menus.

horizontal Drop Down menu sample
Horizontal Drop Down menu sample

The horizontal drop down menu, shown above called MyGoSuMenu, uses CSS, Javascript and HTML, and is the one used on Lori's Web Design (see top of page). It is no longer available online. The version used above was DropDownMenu1 (horizontal) and displays correctly on all Major browsers. Several menu styles come in one download.

The following websites are using the same horizontal drop down menu:

The Tree Doctor
Optima Learning
Kuefler Lighting

Vertical Menu Samples

The vertical fly-out menu on the left is the same as the drop down menu above although formatted differently.

The vertical fly-out menu sample on the right is also the same drop down menu in a vertical layout but this time using images for the buttons that change color on mouseover with text floating over the buttons to enhance ranking (text doesn't change on mouseover).

Menu item indented on Mouseover with CSS

The following animation shows a menu item being indented on mouseover with CSS.

The following CSS code will move the menu item over 15 pixels on mouseover. Enclose your menu code with a div with class="menu" and put the following in your CSS file:

arrl menu animation .menu a:link { color:#000000;
    text-decoration: none;
    font-family: 'Arial Narrow', Helvetica, sans-serif; }
.menu a:visited { color:#000000;
    text-decoration: none;
    font-family: 'Arial Narrow', Helvetica, sans-serif; }
.menu a:hover { color:#cccccc;
    text-decoration: none;
    font-family: 'Arial Narrow', Helvetica, sans-serif; }

Horizontal Menu Surrounding A Logo

Horizontal menu surrounding a Logo

The menu sample shown above can be seen on Poety by Eddie Wilcoxen. It has 4 buttons on each side of a centered image with actual text floating above the button instead of the text being part of the image (which search engines can't read). The position of the buttons and text as well as the font name, size and color and mouseover color is controlled by the CSS file. No Javascript needed.

The buttons were designed with a gradient background and a beveled edge for roundness. Each button is controlled by 4 different classes in CSS: 1) the placement of the logo 2) formatting of link text using the button image as a background 3) Formating of link colors and mouseovers, and 4) placement of individual buttons and text on the page surrounding the logo. This menu sample was not copied on inside pages because of it's size--only the home page.

Vertical Menu Samples in CSS and HTML using Lists

vertical menu sample
The vertical menu sample shown on the left is designed as a list and works on all major browsers and produces a menu with graphic 3-D buttons which are controlled by CSS but the text is controlled by HTML. This enables the text to change color on mouseover and floats over the buttons so search engines can read the text (they can't read text on images). There is actually only one button loading multiple times and thus you can change the style or color of the button without having to change the text. Here is another site using this same vertical menu method: Ego Matters

You can control the vertical spacing between menu links with CSS by setting up a class for the menu links and specifying line height as shown below. See the source code on this page for the list formatting with CSS and how to load the button image.

.menu a:link {color: #000000;
font-weight: bold;
background: transparent;
text-decoration: none;
font-size:11px; }

Follow Me on Pinterest

See other menu samples, designed with or without CSS,
in the Web Design Portfolio

Lori Eldridge
Copyright © 2004, updated 9-27-14
All Rights Reserved
Twitter     My blog     Google+     Wordpress blog     Facebook     linked in