多级联动导航栏（top导航）

zoukankan html css js c++ java

多级联动导航栏（top导航）
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window's right edge.

Demo:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

Important: Make sure your page contains a valid doctype for this menu to render properly.

HTML 5 advocates the use of the very simple doctype:<!DOCTYPE HTML>

The external files: The menu requires the following support files, which you should upload by default all to the same directory as your page itself:
- jqueryslidemenu.css
- jqueryslidemenu.js (inside this file, you should confirm the full URL to the 2 arrow images below)
If you wish to upload the above files to a different directory, be sure to edit "jqueryslidemenu.js" to update the URLs to the two arrow images used.

The CSS/ JavaScript: The below code should be added to the HEAD section of your page:

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="jqueryslidemenu.js"></script>
The HTML:

<div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li> </ul> <br style="clear: left" /> </div>
查看全文

相关阅读:
用户体验评价
 第十四周进度总结
 寻找水王
 第十三周进度总结
 第一阶段意见评论
 梦断代码阅读笔记02
第十二周进度总结
 冲刺（第十天）
单词统计续
 冲刺（第九天）

原文地址：https://www.cnblogs.com/mmcmmc/p/3883556.html