LWD logoLori's Web DesignLWD logo

Horizontal and Vertical Menu Samples

Following are several samples of vertical and horizontal menus that I have designed in both simple and drop down arrangements designed in JavaScript, CSS and HTML.

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. This type of menu needs to change into another arrangement for mobile devices. Following is a horizontal menu sample designed with HTML and CSS to control mouseover colors.

This is a sample of a simple horizontal menu:
horizontal menu sampleOdacrem Coffee

Here is the code for a simple Horizontal menu with CSS included:

Home | Contact | Links

See Horizontal Menu Code

Horizontal Menu designed for Mobile Devices

Here is a menu that collapses into a pull down selection menu on mobile devices

How it looks on a computer:
horizontal menu

How it looks on a mobile device
before menu is selected:

horizontal pull down menu before selection for Mobile
Here are instructions on how to set up this
type of dropdown menu.

How it looks on a mobile device
after menu is selected:

horizontal pull down menu after it's selected for Mobile devices

Simple HTML Vertical Menu Samples

Vertical menus can be used when the site has pages that match the length of the menu 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.

This vertical menu has buttons for the background with text floating over the buttons that change color on mouseover.
vertical menu with buttons sample
Rubes Cartoons
Here is the code for a simple vertical menu in list format with no CSS being used:
  • Home
  • Contact
  • Links
  • ;

See List Menu Code

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.

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. This site is no longer online

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

Horizontal Drop Down Menus in CSS, HTML and Javascript

Drop down menus can be designed in multiple formats. 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.

The horizontal drop down menu, shown below is from the MyGoSuMenu, which uses CSS, Javascript and HTML. It is the one used on Lori's Web Design (see top of page). The menu coding on the MyGoSuMenu site is no longer available but you might be able to find it on other sites. The version used above was DropDownMenu1 (horizontal) and displays correctly on all Major browsers. Several menu styles come in one download.

Lori's web Design
horizontal Drop Down menu sample

Sample of a Horizontal Drop Down menu

Dr. Jyl
horizontal Drop Down menu sample #2

This horizontal drop down menu bounces when it drops down

Vertical Fly-Out 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:

Anti Aging Research
fly out 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

The menu sample shown above has 4 buttons on each side of a centered logo 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.


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

Lori Eldridge
Copyright © 2004, updated 1-2-15
All Rights Reserved
Twitter     Google+     Facebook     linked in