首页
所有分类
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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
js中生成map对象的方法
Jan 09 Javascript
谈一谈javascript闭包
Jan 28 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
vue-router单页面路由
Jun 17 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
使用jQuery实现掷骰子游戏
Oct 24 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
Eclipse(1) JOIN(1) JDBC(3) cypress(1) form表单(1) ant design(2) 弹窗(1) 变量提升(1) pdf(1) 缓冲区(1)
You might like
用 PHP5 轻松解析 XML
2006/12/04 PHP
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
浅谈php自定义错误日志
2015/02/13 PHP
使用javascript做的一个随机点名程序
2014/02/13 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
VueJS全面解析
2016/11/10 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
对python list 遍历删除的正确方法详解
2018/06/29 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
numpy.where() 用法详解
2019/05/27 Python
Python autoescape标签用法解析
2020/01/17 Python
Python类继承和多态原理解析
2020/02/05 Python
python模拟斗地主发牌
2020/04/22 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
超市优秀员工获奖感言
2014/08/15 职场文书
员工生日活动方案
2014/08/24 职场文书
2016教师节感恩话语
2015/12/09 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Python3 类型标注支持操作
2021/06/02 Python
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS