jq实现二级菜单/下拉菜单
https://www.cnblogs.com/sandraryan/
不是很难，直接上代码~
有写注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> <style>
* {margin: 0;padding: 0;}
ul {list-style: none;}
/* 清除所有ul的小圆点 */ .banner {
margin: 50px auto; width: 333px; height: 30px;
background: url("images/bg.jpg") no-repeat;
}
.banner li {
background: url("images/libg.jpg") no-repeat;
}
/* 给所有li添加背景图片 */
.banner>ul>li {
float: left;margin:0 5px;position: relative;
}
/* div下的ul的li设置样式 */
a {
display: block;width: 100px;height: 30px;
text-decoration: none;color: black;
line-height: 30px;text-align: center;
}
/* 去掉a的下划线，设置样式 */
.second {
position: absolute;top: 30px;display: none;
/* top: 30px; 因为一级菜单高度30px，top为0就会遮住一级菜单 */
}
.second li {
padding: 5px 13px;
}
</style>
</head>
<body> <div class="banner">
<ul>
<li>
<a href="">一级菜单1</a>
<ul class="second">
<li>二级菜单1</li>
<li>二级菜单1</li>
<li>二级菜单1</li>
</ul> </li> <li>
<a href="">一级菜单2</a>
<ul class="second">
<li>二级菜单2</li>
<li>二级菜单2</li>
<li>二级菜单2</li>
</ul> </li> <li>
<a href="">一级菜单3</a>
<ul class="second">
<li>二级菜单3</li>
<li>二级菜单3</li>
<li>二级菜单3</li>
</ul> </li>
</ul> </div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function(){
$(".banner>ul>li").mouseenter(function(){
$(this).find("ul").css("display","block");
});
// 给div下的一级菜单li注册事件，鼠标进入显示该li下的二级菜单的ul
$(".banner>ul>li").mouseleave(function(){
$(this).find("ul").css("display","none");
});
// 给div下的一级菜单li注册事件，鼠标离开隐藏该li下的二级菜单的ul });
</script>
</body>
</html>
jq实现二级菜单/下拉菜单的更多相关文章
- (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- css 导航菜单+下拉菜单
一.导航菜单 1.横向导航 代码如下: <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- 用jquery制作一个二级导航下拉菜单
1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素. 3通过使用show()方法来显示HTML元素. 4通过 ...
- asp怎么实现二级联动下拉菜单
rs为一级栏目的记录集 rs2为二级栏目的记录集 分别替换成你自己的记录集名称就好了 <script language="JavaScript"> var onecou ...
- js二级导航下拉菜单
<!DOCTYPE html> <html> <head> <title>导航列表</title> <meta http-equiv= ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- DOM（十）使用DOM设置单选按钮、复选框、下拉菜单
1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...
随机推荐
- 设置程序PrivatePath，配置引用程序集的路径（分离exe和dll）
原文:设置程序PrivatePath,配置引用程序集的路径(分离exe和dll) 有时候我们想让程序的exe文件和dll文件分开在不同目录,这时候可以有3种方法 1.在app.config中配置 &l ...
- Oracle 定义变量总结
首先,当在cmd里办入scott密码提示错误时,可以这样改一下,scott的解锁命令是: 以system用户登录:cmdsqlplus system/tigertigeralter user scot ...
- 跟我一起认识axure（二）
创建企业网站页面步骤 第一步修改这里 变成 第一部分就完成了 第二部分部件窗口 在Axure中设计页面像小时候玩的拼图游戏,那么部件窗口就是专门用来存放拼图块的容器 使用部件窗口中常用的部件设计欢迎页 ...
- LeetCode172 Factorial Trailing Zeroes. LeetCode258 Add Digits. LeetCode268 Missing Number
数学题 172. Factorial Trailing Zeroes Given an integer n, return the number of trailing zeroes in n!. N ...
- 使用 Linux Centos Docker 安装 2Bizbix
在 Docker 安装 2Bizbix 安装 Centos 7 安装 mysql5.5 镜像 映射好数据库的配置文件和数据库目录 在 Windows 安装 2Bizbox 安装 jboss/base- ...
- git操作——TortoiseGit指定某个分支clone
需求 需要使用TortoiseGit 克隆某个项目分支 操作 勾选分支,输入分支名称clone代码即可
- find 使用搜集
find:-atime +n/-n:表示访问或执行时间大于或小于n天的文件-ctime +n/-n:表示写入.更改inode属性的时间大于或小于n天的文件-mtime +n/-n:表示写入时间大于或小 ...
- iOS UIWebView URL拦截
http://www.cocoachina.com/ios/20150626/12161.html 本文译者:candeladiao,原文:URL filtering for UIWebView on ...
- python 字符串（str）
- oralce分析函数如何工作
语法 FUNCTION_NAME(<参数>,…) OVER (<PARTITION BY 表达式,…> <ORDER BY 表达式 <ASC DESC> &l ...