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.

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

Vertical Menu Samples in CSS and HTML using Lists


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.

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;
line-height:1.5em;
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).

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.



Google


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

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