Following are Menu Samples of vertical and horizontal drop down menus
designed in JavaScript, CSS and HTML.
(click on images to see the actual sites)
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.
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.
The following horizontal drop down menu with the sub menu showing is written in HTML and CSS with JavaScript enhancement for mouseovers.
Horizontal Drop Down menu sample
This horizontal drop down menu, using CSS, Javascript and HTML, (and the one used on Lori's Web Design logo at top of page), is available from the MyGoSuMenu site. It is a free menu and also free for commercial use. The version used above was DropDownMenu1 (horizontal) and displays correctly on all Major browsers including Win XP IE 6. Several menu styles come in one download.
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.
Horizontal Menu Samples
The following websites have horizontal drop down menus:
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).
Indented Individual Menu Items on Mouseover with CSS
The following animation shows a menu item being indented on mouseover with CSS as installed on AntiAging Research
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:
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 all 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
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. See the source code on this page for the list formatting with CSS and how to load the button image.
NOTE: I had to take the code for this vertical menu off the page as too many idiots were copying it without changing the urls to point to their own site and then I was getting a lot of bogus site-wide links from other sites. Just set up a simple menu for your site encased in a list format and it should work.
Here is an color coded, updated CSS support chart CSS Browser Support which compares several Mac and Windows browsers support of CSS including IE, Netscape and Opera.
Serving Spokane, WA, Colfax WA, Deer Park WA, Medical Lake WA, all of Eastern WA and across the USA
Lori's Web Design Spokane: 509-443-8693 or Colfax: 509-397-6000
