首页
所有分类
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 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
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
mediapipe(1) python小游戏(5) 计算机视觉(2) cvzone(1) 索尼ICF-36(1) 索引(8) 备份(2) SnakeGame(1) 德生2P3(1) 贪吃蛇(2)
You might like
如何将数据从文本导入到mysql
2006/10/09 PHP
php中变量及部分适用方法
2008/03/27 PHP
php header示例代码(推荐)
2010/09/08 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
js实现三张图（文）片一起切换的banner焦点图
2015/08/25 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
vue调用微信JSDK 扫一扫，相册等需要注意的事项
2021/01/03 Vue.js
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
python实现人脸签到系统
2020/04/13 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Python3读写ini配置文件的示例
2020/11/06 Python
英国DIY汽车维修配件网站：DIY Car Service Parts
2019/08/30 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
个性发展自我评价
2014/02/11 职场文书
副董事长岗位职责
2014/04/02 职场文书
主题教育活动总结
2014/05/05 职场文书
人事局接收函
2015/01/31 职场文书
学校捐款活动总结
2015/05/09 职场文书
辛亥革命观后感
2015/06/02 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫