基于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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
JavaScript this 深入理解
Jul 30 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
Javascript中的arguments对象
Jun 20 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
node.js express框架简介与实现
Jul 23 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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
php session 写入数据库
2016/02/13 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
使用Python读取大文件的方法
2018/02/11 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
python调用百度API实现人脸识别
2020/11/17 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
如何写好自荐信
2014/04/07 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang