Stu Nicholls | CSSplay | Professional variable width menu #4

Professional variable width dropdown menu #4

15th October 2008

HOME
ABOUT US
PRODUCTS
- Tripods
- Films
  - 35mm
  - Color Print
  - Black and White
  - Roll
  - Color Slide
- Cameras
  - Compact
    - Canon
    - Nikon
    - Minolta
    - Pentax
  - Digital
    - Canon
    - Nikon
      - Lenses
        
        Standard
        
        Telephoto
        
        Wide Angle
        
        Fish Eye
        
        Mirror
        
        Macro
      - Speedlight
      - Coolpix
        
        Coolpix S10
        
        Coolpix L2
        
        Coolpix S500
        
        Coolpix P5000
        
        Coolpix 4600
        
        Coolpix S6 Silver
      - D200
      - D80
    - Minolta
    - Pentax
  - SLR
    - Canon
    - Nikon
    - Minolta
    - Pentax
    - Panasonic
- Flash
- Video
FAQs
PRIVACY
- Privacy Policy
- Privacy Statement
CONTACT US

Pull Down Menu

Also called a "drop-down menu" or "pop-down menu," the common type of menu used with a graphical user interface (GUI). Clicking a menu title causes the menu items to appear to drop down from that position and be displayed. Options are selected either by clicking the menu item or by continuing to hold the mouse button down and letting go when the item is highlighted.

On Web pages, menu items are often displayed automatically as soon as the cursor is positioned over the menu title.
JavaScript is widely used to implement pull-down menus on the Web. However, it is now possible to have dropdown/flyout menus without having to resort to javascript.

Pull Down Menu

Pull-down menu - (Or "drop-down menu", "pop-down menu"). A menu in a graphical user interface, whose title is normally visible but whose contents are revealed only when the user activates it, normally by pressing the mouse button while the pointer is over the title, whereupon the menu items appear below the title. The user may then select an item from the menu or click elsewhere, in either case the menu contents are hidden again. A menu item is selected either by dragging the mouse from the menu title to the item and releasing or by clicking the title and then the item.

When a pull-down menu appears in the main area of a window, as opposed to the menu bar, it may have a small, downward-pointing triangle to the right.

Description source: pull-down menu

Information

Having developed my previous menu to use IE CSS expressions to set the width of the sub menus I have found that it is only a small step to use expressions to do what suckerfish does with javascript.

In this demo I use the same expression but rewritten to work out the widths of the sub menus and have a single line to also add the class .cssplay_hover to the li tag when the mouse is over the element and remove the class when the mouse is moved off the element. So a simple one line expression to replace the suckerfish javascript. I know that expressions are javascript driven but with this method there is no waiting for the page to load before the routine works and it is all combined within the stylesheet.

It also means that you do not need the conditional comments in the menu structure which is now just an ordinary set of nested lists.

This menu has been tested and works in IE6, IE7, Firefox, Opera, Safari(PC) and Google Chrome.

Donations

A donation to support CSSplay is required if you wish to use this menu.

Terms and Conditions

This menu can be used subject to the following terms and conditions.

If you wish to use this menu in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
You may NOT place this menu on another site for others to download.
You may NOT redistrubute or resell this menu.
Users agree not to remove or edit the credit notice within the stylesheet, or claim that this menu is their own.
A donation to support CSSplay is required for the use of this menu.

Recommended Sites

Web design in Dorset
Bournmouth based web design agency
SEO
First Rate - Australian SEO Company
CSS Menus
A CSSplay develoment
web hosting, dedicated servers
web reseller, managed servers
VPS Hosting
Virtuozzo VPS Hosting - $19.95/mo
Create Free Flash website
Create amazing websites with Wix.com

"The web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."