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 ...
随机推荐
- 由一道面试题引起的arguments的思考
写一个按照下面方式调用都能正常工作的 sum 方法 console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5从这 ...
- python pattern 类
- MySQL遇到经典例子--（遇到就写）
1,一般的搜索只会搜索标题,也有特殊的情况,就是标题和内容一起搜索! -- 模糊搜索只是搜索标题 $sql = "select count(*) as sum from publish wh ...
- buffer的相关小知识
php与mysql的连接有三种方式,mysql,mysqli,pdo.不管使用哪种方式进行连接,都有使用buffer和不使用buffer的区别. 什么叫使用buffer和不使用buffer呢? 客户端 ...
- sqlserver 带返回值的存储过程
create proc test ) output as begin select @result = 'haha' ; end go ), @count int exec @count = test ...
- laravel 图片
/** * 缩略图上传 */ public static function addPic() { $inputData = request()->all(); $rules = [ 'main_ ...
- VS2017 打包成exe
在项目的解决方案 右键→ 新建项目 后出现如下选择 (如果没有找到,请在联机中搜索 visual studio installer 并安装) 选择项目类型 Setup Project,并输入名称, ...
- uva 10739【基础(区间)dp】
Uva 10739 题意:给定字符串,可以增加.删除.修改任意字符,问最少经过多少次操作使字符串回文. 题解:定义dp[l][r]表示把从l到r的子串Sl...Sr变成回文串需要操作的最少次数.字符可 ...
- AtCoder Regular Contest 084 C - Snuke Festival【二分】
C - Snuke Festival ....最后想到了,可是不应该枚举a[],这样要二重循环,而应该枚举b[],这样只需一重循环... #include<iostream> #inclu ...
- String字符串的比较 Day15
package com.sxt.review; /* * String字符串的比较 * ==和equals() * 总结:比较String内容时用equals()方法 */ public class ...