I have collected another collection of CSS drop down menus to add to your library. This collection consists of amazing wonderful CSS drop-down menus themese with different styles.
This drop down menu uses more ‘colored’ classes to apply a background image to each category with the css property background.
Compatible with IE7, Firefox, Safari, Opera.
Compatible with IE6, using the .htc file .httc as explained in the tutorial (included in the zip file – not applied to the above example).
* Ability to easily “left”, “center”, or “right” align the menu items easily, just by modifying the CSS property “text-align”.
* Optional “swipe down” transitional effect for revealing the drop down menus.
* Main menu items appear “selected” when the mouse rolls over them, which includes while the mouse is over the corresponding drop down menu. Style this state as desired by customizing the “.selected” CSS class name inside “chromestyle.css.” New in v2.4
* Specify arbitrary HTML that gets added to the end of each menu item to indicate it carries a drop down menu. New in v2.4
* In IE6, drop down menus correctly appear on top of windowed controls (such as a SELECT element) using the “shim iframe” technique.
* Support for multiple Chrome menus on the same page.
Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs. The entire interface is rendered in plain HTML, making the script very easy to customize, plus all of its contents are search engine friendly. You can optionally set which tab should be selected by default when the page loads (ie: 1st tab, 2nd tab etc), or have the script automatically select a tab when the page loads based on a match between the current page’s URL and one of the menu tabs’. If there is a match, that tab is selected.
Drop Down Tabs comes with 5 sleek examples to let you quickly pick your favourite to use on your site. Customize each example’s CSS to modify the look as desired.
AnyLink CSS Menu is a flexible menu script that adds a drop down menu to any link on your page. Each drop down menu is simply implemented as plain HTML on the page, making them search engine friendly and easy to edit and deploy. The script supports a myriad of subtle but appealing features:
* Two different toggle methods- Each menu can be activated either Mouseover the anchor link, or Click instead.
* Two different orientations, “ud” or “lr”- Each menu can be set to either drop down below the anchor, or to the right of it instead. The later is desirable if the anchors are “side bar” or “vertical” links.
* Menu repositions itself if too close to any of the window’s four edges to avoid being obscured.
* Ability to style the currently selected anchor link using CSS, or for image anchors, toggle between two images. v2.1
* Global settings to set the delay before each menu disappears onMouseout, whether to enable shadows, and last but not least, a fade-in effect when the menu is revealed.
A drop down menu is associated with an anchor link on the page just by inserting a “rel” attribute inside the later that points to the desired menu’s ID attribute.
Requirements: Internet Explorer 5+, Firefox 1.5+, Opera 7+, Apple Safari 2+
1- Not only HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new css drop-down menu means creating only a new theme since structure is permanent. What is more, creating a new theme is easy with available templates and takes 10-15 mins.
2- Easily deployable. The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML format.
3- Easily transformable. Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.
- Modular, with themes. Not only HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new css drop-down menu means creating only a new theme since structure is permanent. What is more, creating a new theme is easy with available templates and takes 10-15 mins.
- Easily deployable. The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML format.
- Easily transformable. Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.
- Cross browser Compatibility. Configurations available for Windows Internet Explorer 5 or later, Mozilla Firefox 1.5 or later, Opera 7 or later, Apple Safari 2 or later, Google Chrome 1, etc.
- Super Fast. Having the above mentioned features it is not affected by any disturbances whatsoever.
- Continuous development. The project is constantly revised and improved.
Here are some other styles from the same menu.
Simple vertical left-to-right
Simple vertical right-to-left
Simple horizontal upward
Simple horizontal linear
Simple limited (for IE5.*)
Here are some other styles from the same menu.
NVIDIA.com horizontal improved css drop-down menu
NVIDIA.com horizontal improved css drop-down menu with no flash