多级联动导航栏（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>
查看全文

相关阅读:
nginx-syslog
loki
idea安装中文插件
 nginx虚拟目录alias
个人软件系统整理
 Python 遍历Sheet 每个Sheet都单独保存为一个Excel
SQL Server 多表关联的update语句
 电商生意参谋抓取访客数据 JS版/谷歌插件版
 EF 多表关联
 个人圈外同学对比分析

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