首页
所有分类
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 相关文章推荐
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
javascript学习笔记（二）数组和对象部分
Sep 30 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
微信小程序登录session的使用
Mar 17 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
生命周期(1) reduce()(1) 远程连接(2) 轮询锁(1) 进度条(1) springCloud(6) 信号同步(1) 死锁(3) 异步机制(1) 限流器(1)
You might like
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
layui清空,重置表单数据的实例
2019/09/12 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
Python处理PDF与CDF实例
2020/02/26 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
教师演讲稿范文
2014/01/08 职场文书
个人评价范文分享
2014/01/11 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
python非标准时间的转换
2021/07/25 Python
JavaScript实现队列结构过程
2021/12/06 Javascript
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS