脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery+css实现绚丽的横向二级下拉菜单

jquery+css实现绚丽的横向二级下拉菜单-附源码下载

 更新时间：2015年08月23日 11:54:35   投稿：mrr  
这篇文章主要介绍了jquery+css实现绚丽的横向二级下拉菜单-附源码下载,需要的朋友可以参考下

首先给大家展示下效果图：

查看效果 源码下载

html代码部分：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/lanrenzhijia.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript" src="js/lanrenzhijia.js"></script>
<title>jquery+css实现横向二级下拉菜单</title>
</head>
<body>
<div id="menu">
<ul id="nav">
  <li class="mainlevel"><span class="note">Chocolate Bar</span></li> 
  <li class="mainlevel" id="mainlevel_01"><a href="#">browsers</a>
  <ul class="sub_nav_01">
  <span class="Triangle_con"></span>
  <li><a href="#">firefox</a></li>
  <li><a href="#">chrome</a></li>
  <li><a href="#">opera</a></li>
  <li><a href="#">IE</a></li>
  <li><a href="#">Netscape</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_02"><a href="#">html</a>
  <ul class="sub_nav_01">
  <span class="Triangle_con"></span>
  <li><a href="#">html</a></li>
  <li><a href="#">xhtml</a></li>
  <li><a href="#">html5</a></li>
  <li><a href="#">css</a></li>
  <li><a href="#">TCP/IP</a></li>
  </ul>
  </li> 
  <li class="mainlevel"><a href="#">xml</a>
  <ul class="sub_nav_01">
  <span class="Triangle_con"></span>
  <li><a href="#">XSL</a></li>
  <li><a href="#">XSLT</a></li>
  <li><a href="#">XSL-FO</a></li>
  <li><a href="#">XPath</a></li>
  <li><a href="#">XQuery</a></li>
  <li><a href="#">XLink</a></li>
  <li><a href="#">XPointer</a></li>
  <li><a href="#">DTD</a></li>
  <li><a href="#">Schema</a></li>
  <li><a href="#">XForms</a></li>
  </ul>
  </li>
  <li class="mainlevel"><a href="#">browsers<em></em>scripting</a><!--input an em tag as a space,IE is gread need-->
  <ul class="sub_nav_01">
  <span class="Triangle_con"></span>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">DHTML</a></li>
  <li><a href="#">VBScript</a></li>
  <li><a href="#">AJAX</a></li>
  <li><a href="#">jQuery</a></li>
  <li><a href="#">E4X</a></li>
  <li><a href="#">WMLScript</a></li>
  </ul>
  </li>
  <li class="mainlevel"><a href="#">server<em></em>scripting</a>
  <ul class="sub_nav_01">
  <span class="Triangle_con"></span>
  <li><a href="#">SQL</a></li>
  <li><a href="#">ASP</a></li>
  <li><a href="#">ADO</a></li>
  <li><a href="#">PHP</a></li>
  </ul>
  </li>
  <li class="mainlevel"><a href="#">dot<em></em>net</a></li> 
  <li class="mainlevel"><a href="#">multimedia</a>
  <ul class="sub_nav_01">
  <span class="Triangle_con"></span>
  <li><a href="#">Media</a></li>
  <li><a href="#">SMIL</a></li>
  <li><a href="#">SVG</a></li>
  </ul>
  </li>
</ul>
</div>
</body>
</html>

以上代码很简单，jquery+css实现绚丽的横向二级下拉菜单-附源码下载就完成了，希望大家喜欢。

您可能感兴趣的文章:

相关文章

  • 读jQuery之四（优雅的迭代）

    读jQuery之四（优雅的迭代）

    前面提到jQuery库如何通过其中的jQuery.extend及jQuery.fn.extend去扩展自身的。第三篇给zChain.js添加了常用选择器，但目前为止zChain.js仍然做不了任何事情。
    2011-06-06
  • jQuery学习笔记之jQuery.fn.init()的参数分析

    jQuery学习笔记之jQuery.fn.init()的参数分析

    这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下
    2014-06-06
  • jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】

    jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】

    这篇文章主要介绍了jQuery插件FusionCharts绘制的2D双面积图效果,结合实例形式分析了jQuery使用插件FusionCharts结合xml格式数据绘制2D双面积图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-04-04
  • 360提示[高危]使用存在漏洞的JQuery版本的解决方法

    360提示[高危]使用存在漏洞的JQuery版本的解决方法

    今天用360检测网站，提示高危]使用存在漏洞的JQuery版本，说是这个文件有问题jquery.min.js,这里脚本之家小编就为大家分享一下解决方法
    2017-10-10
  • jquery控制背景音乐开关与自动播放提示音的方法

    jquery控制背景音乐开关与自动播放提示音的方法

    这篇文章主要介绍了jquery控制背景音乐开关与自动播放提示音的方法,实例分析了背景音乐开关的技巧与自动播放提示音的常见用法,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • jQuery的end()方法使用详解

    jQuery的end()方法使用详解

    本文给大家分享的是jQuery中的end()的定义和使用方法及示例，非常简单实用，有需要的小伙伴可以参考下。
    2015-07-07
  • 『jQuery』名称冲突使用noConflict方法解决

    『jQuery』名称冲突使用noConflict方法解决

    jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号，这样就会发生名称冲突，使用名为 noConflict() 的方法来解决该问题
    2013-04-04
  • JQuery困惑—包装集 DOM节点

    JQuery困惑—包装集 DOM节点

    我使用了JQuery进行了一段时间的前端开发，它让我从选择需要操作的元素痛苦中解放出来，因为提供的选择功能是如此的强大。 同时在开发过程中我被一个问题困惑了很久，也许在别人看来这根本不是问题！
    2009-10-10
  • jQuery中bind,live,delegate与one方法的用法及区别解析

    jQuery中bind,live,delegate与one方法的用法及区别解析

    本篇文章主要是对jQuery中bind,live,delegate与one方法的用法及区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    使用过AJAX技术的人都知道大名鼎鼎的JQuery。虽然我来学习之前有看过AJAX的视频，但那时对WEB应用这个东西还比较模糊，不清楚HTML、JSP与Servlet是怎么工作的，甚至不知道JQuery包装的是什么东西。
    2011-02-02

最新评论