转自官方引用网站http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm.
Drop Down Tabs (5种样式)
Drop Down Tabs是一个横向的CSS 选项卡菜单, 每个选项卡都支持二级下拉菜单.
提供了5种下拉菜单显示效果,自己修改CSS文件可以控制下拉菜单显示为别的样式.
这种下拉菜单不会导致下拉菜单偏移.建议使用.
dropdowntabs.zip (20.26 kb)
下面是官方的使用说明:
注下载的附件里面有官方下拉菜单显示效果的演示
Directions
To get Drop Down Tabs, simply download "dropdowntabs.zip", which contains all the files that make up this menu and its accompanying 5 styles. For your reference, some files included within the zip are shown below:
Customization
Setting up and customizing Drop Down Tabs is very simple, as the entire menu consist of regular HTML and styled using CSS. Logically it makes sense to think of the menu in the following three parts:
1) HTML for the menu tabs:
<div id="bluemenu" class="bluetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/resources/" rel="dropmenu2">Partners</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
</ul>
</div>
As you can see, the menu tabs is simply an ordinary HTML list wrapped inside a DIV. Give this DIV a unique ID to be used to identify it on the page. The arbitrary class attribute provides the desired style for the tabs. Now, to specify that a particular tab carry a drop down menu (shown when mouse rolls over tab), just insert the code rel="unique_id" inside its <a> element, where "unique_id" is the ID of the drop down menu DIV on the page to show (see below). Tabs that don't carry a "rel" attribute will simple be single level in nature.
2) HTML for drop down menu(s):
The drop down menus associated with the desired tabs above are defined as individual DIV tags on the page. For example:
Notice how each DIV carries an arbitrary but unique ID attribute that matches up with the value of the "rel" attribute inside the tab it is to be associated with. The CSS class name is just there to provide styling, and can be modified/ removed as desired.
3) Script to call following the HTML for both of the above to initialize a Tab Menu instance:
Finally, with both parts of a Drop Down Tabs defined, you should call the following script to initialize it on the page:
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu", 0)
</script>
The first parameter (highlighted in red) should be the ID of the Menu Tab to initialize once the page has fully loaded. The second parameter is optional, and lets you set which tab should be selected by default- enter either an integer (0=1st tab, 1=2nd tab etc), or "auto" to have the script try to automatically select the tab that matches the current page's URL *. And that's it!
* Note that the "auto" select tab feature mentioned above is rudimentary and isn't meant to replace directly selecting or using server side scripting to identify which tab corresponds to the current page. It won't account for all possibilities where two URLs are the same. Use it as a convenience and fallback plan!
订阅