基于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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
基于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
PHP daddslashes 使用方法介绍
2012/10/26 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
php比较相似字符串的方法
2015/06/05 PHP
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
学Python 3的理由和必要性
2019/11/19 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
公司办公室岗位职责
2014/03/19 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
刑事起诉书范文
2015/05/19 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL