Horizontal and Vertical Menu Samples
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.
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.
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
Lori's web Design
Sample of a Horizontal Drop Down menu
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 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 Responsive Web Design Portfolio
Copyright © 2004, updated 1-2-15
All Rights Reserved