首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 23, 2015

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

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+css实现绚丽的横向二级下拉菜单-附源码下载

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
jQuery之动画效果大全
Nov 09 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jquery ajax 如何向jsp提交表单数据
Aug 23 #Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 #Javascript
javascript中Array()数组函数详解
Aug 23 #Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 #Javascript
js实现的二级横向菜单条实例
Aug 22 #Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 #Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 #Javascript
扫雷(1) 抽象类(1) router(1) Scheduled(1) 路由(1) NumPy(2) 单向链表(1) Date(1) 模拟登录(1) 双向链表(6)
You might like
PHP的简易冒泡法代码分享
2012/08/28 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JavaScript 创建对象
2009/07/17 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python os用法总结
2018/06/08 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
意大利综合购物网站：Giordano Shop
2016/10/21 全球购物
简约控的天堂：The Undone
2016/12/21 全球购物
AT&T Wireless：手机、无限数据计划和配件
2018/06/03 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
学术会议邀请函范文
2014/01/22 职场文书
生产文员岗位职责
2014/04/05 职场文书
我的梦想演讲稿
2014/04/30 职场文书
教师党员整改措施
2014/10/24 职场文书
后备干部推荐材料
2014/12/24 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
导游词之包公祠
2019/11/25 职场文书
pandas中DataFrame数据合并连接（merge、join、concat)
2021/05/30 Python