首页
所有分类
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 相关文章推荐
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 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
SRF-22W(1) YH-R296(1) 德劲1107(1) 上海永华(1) A254(1) 安健(1) PR-D3L(1) 华普R-96(1) ICF-SW100(1) SRF-40W(1)
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php 邮件发送问题解决
2014/03/22 PHP
php运行提示：Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
浅谈PHP的反射API
2017/02/26 PHP
js选择并转移导航菜单示例代码
2014/08/19 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
Python简单生成8位随机密码的方法
2017/05/24 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
python中返回矩阵的行列方法
2018/04/04 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python 使用shutil复制图片的例子
2019/12/13 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
利用python实现逐步回归
2020/02/24 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
Java程序员综合测试题
2014/04/25 面试题
大专生简历的自我评价
2013/11/26 职场文书
模具毕业生推荐信
2014/02/15 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
详解JavaScript中Arguments对象用途
2021/08/30 Javascript