首页
所有分类
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 相关文章推荐
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
微信小程序学习总结（三）条件、模板、文件引用实例分析
Jun 04 Javascript
在vue中使用Base64转码的案例
Aug 07 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
检举信(8) 协议书(568) 说明书(38) 任命书(51) 担保书(46) 口号(179) 委托书(259) 公证书(45) 标语(336) 党团范文(807)
You might like
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
php class类的用法详细总结
2013/10/17 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP实现生成唯一编号（36进制的不重复编号）
2014/07/01 PHP
php内嵌函数用法实例
2015/03/20 PHP
深入浅析PHP7.0新特征（五大新特征）
2015/10/29 PHP
PHP加密解密实例分析
2015/12/25 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
python数据结构之链表的实例讲解
2017/07/25 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Django框架验证码用法实例分析
2019/05/10 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
python实现飞机大战游戏（pygame版）
2020/10/26 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
HTML5 拖放（Drag 和 Drop）详解与实例代码
2017/09/14 HTML / CSS
YOOX美国官方网站：全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
美国隐形眼镜网：Major Lens
2018/02/09 全球购物
WatchShop法国：英国排名第一的独立手表零售商
2020/02/17 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
个人求职信范文分享
2014/01/31 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
考试保密承诺书
2014/08/30 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
使用Redis实现实时排行榜功能
2021/07/02 Redis