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实现绚丽的横向二级下拉菜单-附源码下载就完成了,希望大家喜欢。

Javascript 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
js只执行1次的函数示例
Jul 20 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
JS实现贪吃蛇游戏
Nov 15 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
You might like
星际玩家的三大定律
2020/03/04 星际争霸
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
Python科学计算之NumPy入门教程
2017/01/15 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python logging设置和logger解析
2019/08/28 Python
python批量处理文件或文件夹
2020/07/28 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
高校学生干部的自我评价分享
2013/11/04 职场文书
军训自我鉴定100字
2014/02/13 职场文书
《老王》教学反思
2014/02/23 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
《春笋》教学反思
2014/04/15 职场文书
服务之星事迹材料
2014/05/03 职场文书
创先争优标语
2014/06/27 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书