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 ...
随机推荐
- POJ 2311 博弈
#include<stdio.h> #include<string.h> #include<set> using namespace std; ][]; int s ...
- 媒体查询（media）：设置PC端网页居中显示
@media screen and (min-width: 768px){ body{ background-color: #EAEAEA; } #fater{ width: 640px; margi ...
- Win7下IIS的安装配置与文件发布
出于兴趣,抽空弄了一下Windows上的IIS,把过程记录下来与大家分享.高手请略过... 一.安装IIS.打开控制面板,单击“程序与功能” 二.点击左侧“打开或关闭Windows功能” 三.找到“I ...
- 2019-8-30-win10-uwp-好看的时间选择控件
title author date CreateTime categories win10 uwp 好看的时间选择控件 lindexi 2019-08-30 08:57:20 +0800 2018-0 ...
- at: 安排一个任务在未来执行，需要一个atd的系统后台进程
检查atd进程是否启动 [root@centos61 桌面]# service atd status atd (pid 2274) 正在运行... [root@centos61 桌面]# chkco ...
- [运维]ESXI Web Client 标签： vmware运维服务器 2017-05-28 20:59 597人阅读 评论(9)
ESXI安装完成之后,配置好ip,我们就可以使用了?那么如何使用呢?一般来说有两种方式,一种是安装专门的管理客户端,client端,另一种更加方便,就是使用web client端. 下面来介绍一下es ...
- goland的下载安装破解并配置
1.下载地址:https://www.jetbrains.com/go/ 2.安装:简单 3.破解:https://www.cnblogs.com/igoodful/p/9113946.html 4. ...
- Deserializing/Serializing SOAP Messages in C#
/// <summary> /// Converts a SOAP string to an object /// </summary> /// <typep ...
- js多图上传展示和删除
html部分 <button class="btn btn-info" for="file">请选择文件</button> <in ...
- SDUT-3364_欧拉回路
数据结构实验之图论八:欧拉回路 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 在哥尼斯堡的一个公园里,有七座桥将普雷格 ...