首页
所有分类
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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
微信小程序实现简单的select下拉框
Nov 23 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
i5 9400(1) i7 6700(1) i5 10400(1) win10(43) ipad(1) Tomcat(18) win11(40) React(6) GTX1660(1) 速龙(1)
You might like
骨王战斗力在公会成员中排不进前五，却当选了会长，原因竟是这样
2020/03/02 日漫
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php adodb操作mysql数据库
2009/03/19 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
服务器安全设置的几个注册表设置
2007/07/28 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
Jquery 扩展方法
2010/05/06 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
javascript学习笔记（一）基础知识
2014/09/30 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
python如何实现DES加密
2020/09/21 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
Nike挪威官网：Nike.com (NO)
2018/11/26 全球购物
自我反省检讨书
2014/01/23 职场文书
美容院考勤制度
2014/01/30 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
如何在Python项目中引入日志
2021/05/31 Python