首页
所有分类
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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
js 倒计时（高效率服务器时间同步）
Sep 12 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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
Get(1) Post(1) 目录管理(1) 延时任务(1) Word(2) 二维码(2) 日志(1) 太阳码(1) 条码(1) 磁盘管理(1)
You might like
html静态页面调用php文件的方法
2014/11/13 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
网站页面自动跳转实现方法PHP、JSP（下）
2010/08/01 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
javascript类型转换示例
2014/04/29 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
python数组复制拷贝的实现方法
2015/06/09 Python
Python实现的爬虫功能代码
2017/06/24 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python中return如何写
2020/06/18 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
舞蹈毕业生的自我评价
2014/03/05 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
5s标语大全
2014/06/23 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android