Jquery实现下拉菜单案例
更新时间:2022年07月04日 10:27:50 作者:setTimeout()
这篇文章主要为大家详细介绍了Jquery实现下拉菜单案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文实例为大家分享了Jquery实现下拉菜单的具体代码,供大家参考,具体内容如下
需要实现的结构如下图:
关于布局:
布局采用ul里面包含4个li,li里面包含a标签(微博)以及ul(下面的下拉菜单),采用hover改变移动到下拉菜单后背景变色。
关于功能:
首先利用jquery获取元素,然后给li添加mouseenter方法显示下面的下拉菜单,然后给li添加mouseleave方法离开后又隐藏下拉菜单。
最终代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jq下拉菜单</title> <script src="http://9i0i.com/pic.php?p=./js/jquery.min.js"></script> <style lang=""> * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: black; } .nav { margin: 100px 500px; float: left; font-size: 12px; } .nav>li { float: left; text-align: center; } .nav>li a { display: block; padding: 10px 21px; } .nav>li ul li { cursor: pointer; padding: 10px 20px; border-left: 1px solid #efd8af; border-right: 1px solid #efd8af; border-bottom: 1px solid #efd8af; } .nav>li ul { display: none; } .nav>li ul li:hover { background-color: #fff4d8; } </style> </head> <body> <script> $(function() { // 鼠标经过nav里面的li $('.nav>li').mouseenter(function() { // 显示下面的下拉菜单 $(this).children('ul').show(); }); // 鼠标离开后又隐藏 $('.nav>li').mouseleave(function() { $(this).children('ul').hide(); }) }) </script> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> <li> <a href="#">微博</a> <ul> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> <li> <a href="#">微博</a> <ul> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> <li> <a href="#">微博</a> <ul> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> </ul> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
相关文章
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部2012-05-05jquery popupDialog 使用 加载jsp页面的方法
下面小编就为大家带来一篇jquery popupDialog 使用 加载jsp页面的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-10-10
最新评论