首页
所有分类
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 相关文章推荐
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
JS排序之选择排序详解
Apr 08 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
vue实现多级菜单效果
Oct 19 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) 收信机(3) 晶体管(2) 摩托罗拉(1) MOTOROLA(1) 66-XI(1) VOLVO(1) 77A(2) S900(1) 沃尔沃(1)
You might like
用PHP生成html分页列表的代码
2007/03/18 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
CSS3 3D立方体效果示例－transform也不过如此
2016/12/05 HTML / CSS
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
中国首家奢侈品O2O网购平台：第五大道奢侈品网
2017/12/14 全球购物
Notino意大利：购买香水和化妆品
2018/11/14 全球购物
领先的荷兰线上超市：荷兰之家Holland at Home（支持中文）
2021/01/21 全球购物
敬老文明号事迹材料
2014/01/16 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
商业街策划方案
2014/05/31 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
广播稿：校园广播稿范文
2019/04/17 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis