| Home | Web Design Services | Web Design Tips | SEO Scams | SEO Tips | Graphics Tutorials | Graphic Designs |
Menu Samples of
| |||||||||||||||||||
|
The following Menu Samples provide a varied display of vertical or horizontal drop down menus designed in JavaScript, CSS and HTML. (click on images to see the actual sites) | |||||||
|
There are many different ways to design a drop down menu. A vertical menu can be used when the site is not image intensive 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. Horizontal Drop Down Menus in CSS, HTML and JavascriptWhen the website has a lot of pages and sub menus then horizontal drop down menus are often 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 following horizontal drop down menu with the sub menu showing is written in HTML and CSS with JavaScript enhancement for mouseovers.
Note: The above menu sample was positioned with absolute positioning from left edge of page. However, when using this menu sample over a centered image (see LWD menu above) you need to center the main table that holds the menu text and make it the same width as the image (the image can be set to load in the css file). Also if you have regular links set for visited or bold or another font family or anything else not specified in css then you also need to add them to the drop down CSS as it will inherit those specifications. Check different screen resolutions to make sure this drop down menu is working correctly. Besides the two sites mentioned above you can also see this menu working on the following sites: Jagbits - Jaguar Parts Kuefler Lighting Protection Systems Bibleline Radio Pastor Don Rhoads TIS Books - Treasury Information Services Books Indent Individual Menu Items on Mouseover with CSS
Vertical Menu Samples in CSS and HTML using Lists
The above CSS vertical menu sample was written by Michael Meadhra
See other menu samples, designed with or without CSS,
Lori Eldridge
Copyright © 2004, updated 2-24-08 All Rights Reserved
|
|
Lori's Web Design, 1815 E. Nebraska, Spokane Wa, 99208, 1-509-443-8693
Home: Lori's Web Design |
Website Redesign |
Web Design Portfolio #1 |
Portfolio #2 |
Portfolio #3 |
Website Evaluations
Web Design Services | Quotes | Rates | Graphics Tutorials | Landscape Logos | Site Map | ||||
|
|
Lori's Web Design, Spokane WA (Washington)
Copyright © 2000 - 2007 All Rights Reserved |
| ||