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:

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" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<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>

多级联动导航栏（top导航）的更多相关文章

  1. 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle

    ​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...

  2. React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）

    摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...

  3. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  4. phpcms 完美实现 导航栏当前栏目高亮

    我们在用phpcms做网站的时候,经常碰到导航栏高亮功能,或者侧栏高亮,这个会涉及到几个问题: .栏目列表页子栏目高亮判断,如果当前页面为子栏目,他的顶级栏目如果在导航栏也要高亮. .内容页高亮,这个 ...

  5. 【转】【iOS】导航栏那些事儿

    原文网址:http://www.jianshu.com/p/f797793d683f 参考文章 navigationItem UINavigationItem UINavigationBar UIBa ...

  6. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  7. CSS：CSS 导航栏

    ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...

  8. zhuang 定制iOS 7中的导航栏和状态栏

    近期,跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外观上有大量的改动.从开发者的角度来看,导航栏和状态栏就发生了明显的变化.状态栏现在是半透明的了,这也就意味着导航栏 ...

  9. 【原创+译文】官方文档中声明的如何创建抽屉导航栏(Navigation Drawer)

    如需转载请注明出处:http://www.cnblogs.com/ghylzwsb/p/5831759.html 创建一个抽屉导航栏 抽屉式导航栏是显示在屏幕的左边缘,它是应用程序的主导航选项面板.它 ...

  10. iOS 7 教程：定制iOS 7中的导航栏和状态栏

    目录(?)[-] iOS 7中默认的导航栏 设置导航栏的背景颜色 在导航栏中使用背景图片 定制返回按钮的颜 修改导航栏标题的字体 修改导航栏标题为图片 添加多个按钮 修改状态栏的风格 隐藏状态栏 总结 ...

随机推荐

  1. Dropbox 有哪些鲜为人知的使用技巧？

    作者:Feeng链接:http://www.zhihu.com/question/20104959/answer/13991578来源:知乎著作权归作者所有,转载请联系作者获得授权. 原文:The B ...

  2. idea15 如何设置代码不自动折叠

    IDEA默认情况下,如果方法体中只有一行,这个方法体会折叠起来,就像这种

  3. Image.FrameDimensionsList 属性-----具体使用案例

    上一篇中说到了图片的具体产生以及属性,本篇主要是具体的使用,详情案例见下面的具体视图及代码 using System;using System.Collections.Generic;using Sy ...

  4. .net 程序员成长路线图？

    https://www.zhihu.com/question/25474641 得看赵四本, @赵劼 推荐的. CLR via C# .net Essentials C# in Depth Frame ...

  5. iOS学习笔记：iOS核心动画中的常用类型

    CATransaction 当我们在自定义的图层上修改某些支持动画的属性时,系统会为该属性的修改自动产生动画.这种其实属于隐式动画.隐式动画要得益于CATransaction. 一个CATransac ...

  6. HDU 4946 共线凸包

    题目大意: 一些点在一张无穷图上面,每个点可以控制一些区域,这个区域满足这个点到达这个区域的时间严格小于其他点.求哪些点能够控制无穷面积的区域. 题目思路: 速度小的控制范围一定有限. 速度最大当且仅 ...

  7. C#委托的介绍(delegate、Action、Func、predicate)【转】

    转自 http://www.cnblogs.com/akwwl/p/3232679.html 委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递.事件是一种特殊的委托. 1 ...

  8. 待实践二：MVC3下的3种验证 (1)前台 jquery validate验证 (2)MVC实体验证 (3)EF生成的/自己手写的 自定义实体校验(伙伴类+元素据共享)

    MVC3下的3种验证 (1):前台Jquery Validate脚本验证 引入脚本 <script src="../js/jquery.js" type="text ...

  9. HDU 3746 Cyclic Nacklace 环形项链（KMP，循环节）

    题意: 给一个字符串,问:要补多少个字符才能让其出现循环?出现循环是指循环节与字符串长度不相等.比如abc要补多个变成abcabc.若已经循环,输出0. 思路: 根据最小循环节的公式,当len%(le ...

  10. 【JS】js获得下拉列表选中项的值和id

    function tijiao(){ var elem = document.getElementById("dish_sort"); var index=elem.selecte ...