by 清泉
7. 九月 2008 09:10
Chrome CSS Drop Down Menu
Chrome Menu是一个CSS 和 JavaScript 结合的下拉菜单, 它的使用非常简单, 且对搜索引擎友好.
本下拉菜单引用自官方网站http://dynamicdrive.com/dynamicindex1/chrome/index.htm
这里下载chromemenu.zip (10.00 kb)
下面是关于此下拉菜单的几个演示:
下面是引用的官方的使用说明:
Note: Updated: July 23rd, 08 to v2.4. See changelog for full details.
Description: We decided to create this script when we needed a compact CSS drop down menu for a project. Chrome Menu is a CSS and JavaScript hybrid drop down menu. It's easy to configure and search engine friendly. The main menu bar consist of a CSS list, while the drop down menus are simply regular DIV tags on page. Thanks to JavaScript, the menu supports subtle but important effects such as delay before menu disappearance, and repositioning of the menu if too close to any one of the four corners of the window. The entire menu, including images and external files, is extremely compact. Thanks to CSS, the menu can be styled with a different "theme" easily, just by modifying a few CSS attributes and changing a couple of images' colors. Some highlights of this menu:
- 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.
Directions: Simply download chromemenu.zip, which contains all the files that make up the menu:
- demo.htm (view)
- chromejs/chrome.js (view)
- chrometheme/chromestyle.css (view)
- chrometheme/chromebg.gif
- chrometheme/chromebg-over.gif
- down.gif (drop down arrow image used).
Note: Also included in the zip are slightly modified versions of the above ".gif" and ".css" files that create a different theme for the menu instantly.
订阅