基于jQuery实现二级下拉菜单效果


Posted in Javascript onFebruary 01, 2016

本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下

代码如下:

<html>
<head>
<meta charset=" utf-8">
<title>下拉菜单</title>
<style type="text/css">
nav a{ 
 text-decoration:none; 
} 
nav>ul>li{ 
 float:left; 
 text-align:center; 
 padding:0 0.5em;
 width:120px; 
}
nav li ul.sub-menu{ 
 display:none; 
 padding-left:0 !important; 
} 
.sub-menu li{color:white;} 
.sub-menu li:hover{background-color:black;} 
.sub-menu li:hover a{color:white;} 
ul{list-style: none;} 
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
 $('.box> li').hover(function(){ 
  $(this).find('.sub-menu').css('display', 'block'); 
 },function(){ 
  $(this).find('.sub-menu').css('display', 'none'); 
 }); 
}); 
</script> 
</head>
<body>
<nav>
 <ul class="box">
  <li><a href="#">前端专区</a>
   <ul class="sub-menu">
    <li><a href="#">jquery教程</a></li>
    <li><a href="#">css教程</a></li>
    <li><a href="#">js教程</a></li>
   </ul>
  </li>
  <li><a href="#">资源专区</a>
   <ul class="sub-menu">
    <li><a href="#">电脑模板下载</a></li>
    <li><a href="#">手机模板下载</a></li>
    <li><a href="#">特效下载</a></li>
   </ul>
  </li>
  <li><a href="#">交流专区</a>
   <ul class="sub-menu">
    <li><a href="#">运营交流</a></li>
    <li><a href="#">seo优化</a></li>
    <li><a href="#">站长交流</a></li>
   </ul>
  </li>
 </ul>
</nav>
</body>
</html>

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
详谈js模块化规范
Jul 07 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 #Javascript
理解javascript中的严格模式
Feb 01 #Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 #Javascript
jQuery 3.0 的变化及使用方法
Feb 01 #Javascript
jQuery与Ajax以及序列化
Feb 01 #Javascript
js格式化输入框内金额、银行卡号
Feb 01 #Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 #Javascript
You might like
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
关于js中for in的缺陷浅析
2013/12/02 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
python实现解数独程序代码
2017/04/12 Python
Django的分页器实例(paginator)
2017/12/01 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
用Python实现数据的透视表的方法
2018/11/16 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
How to spawning asynchronous work in J2EE
2016/08/29 面试题
高校自主招生教师推荐信
2015/03/23 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS