编程 Javascript

jquery+css实现绚丽的横向二级下拉菜单-附源码下载

Posted in Javascript onAugust 23, 2015

首先给大家展示下效果图：

查看效果源码下载

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 相关文章推荐

checkbox勾选判断代码分析

Jun 11 Javascript

JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

Nov 26 Javascript

简单讲解jQuery中的子元素过滤选择器

Apr 18 Javascript

node.js路径处理方法以及绝对路径详解

Mar 04 Javascript

利用forever和pm2部署node.js项目过程

May 10 Javascript

vue实现的上传图片到数据库并显示到页面功能示例

Mar 17 Javascript

vue translate peoject实现在线翻译功能【新手必看】

Jun 07 Javascript

微信小程序textarea层级过高(盖住其他元素)问题的解决办法

Mar 04 Javascript

了解Javascript中函数作为对象的魅力

Jun 19 Javascript

Vue通过配置WebSocket并实现群聊功能

Dec 31 Javascript

Vue 基于 vuedraggable 实现选中、拖拽、排序效果

May 18 Javascript

nginx部署多个vue项目的方法示例

Sep 06 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

合并ThinkPHP配置文件以消除代码冗余的实现方法

2014/07/22 PHP

浅析THINKPHP的addAll支持的最大数据量

2015/02/03 PHP

Laravel框架Request、Response及Session操作示例

2019/05/06 PHP

基于jquery用于查询操作的实现代码

2010/05/10 Javascript

date.parse在IE和FF中的区别

2010/07/29 Javascript

JQuery优缺点分析说明

2011/04/10 Javascript

jquery获取css中的选择器(实例讲解)

2013/12/02 Javascript

indexOf 和 lastIndexOf 使用示例介绍

2014/09/02 Javascript

基于jQuery实现仿51job城市选择功能实例代码

2016/03/02 Javascript

mvc中form表单提交的三种方式(推荐)

2016/08/10 Javascript

AngularJs E2E Testing 详解

2016/09/02 Javascript

JS 全屏和退出全屏详解及实例代码

2016/11/07 Javascript

常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)

2016/12/20 Javascript

jQuery实现的简单排序功能示例【冒泡排序】

2017/01/13 Javascript

详解Html a标签中href和onclick用法、区别、优先级别

2017/01/16 Javascript

详解angular 中的自定义指令之详解API

2017/06/20 Javascript

Vue自定义过滤器格式化数字三位加一逗号实现代码

2018/03/23 Javascript

从零开始学习搭建React脚手架项目

2018/08/23 Javascript

Vue.js 中的实用工具方法【推荐】

2019/07/04 Javascript

javascript实现鼠标点击生成文字特效

2019/12/24 Javascript

python检查序列seq是否含有aset中项的方法

2015/06/30 Python

django基础之数据库操作方法(详解)

2017/05/24 Python

对Python中TKinter模块中的Label组件实例详解

2019/06/14 Python

python实现将字符串中的数字提取出来然后求和

2020/04/02 Python

详解在Python中使用Torchmoji将文本转换为表情符号

2020/07/27 Python

Python中实现一行拆多行和多行并一行的示例代码

2020/09/06 Python

巴西女装购物网站：Eclectic

2018/04/24 全球购物

Structs界面控制层技术

2013/10/11 面试题

奥巴马演讲稿

2014/01/08 职场文书

公务员政审个人总结

2015/02/12 职场文书

2016年母亲节寄语

2015/12/04 职场文书

2016年度师德标兵先进事迹材料

2016/02/26 职场文书

管理者日常工作必备：22条企业管理流程模板！

2019/07/12 职场文书

婚礼必备主持词范本！

2019/07/23 职场文书

MySQL Router的安装部署

2021/04/24 MySQL

Win11 引入 Windows 365 云操作系统，适应疫情期间混合办公模式：启动时直接登录、模

2022/04/06 数码科技