下拉菜单，下拉导航，JavaScript，html，jQuery的实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;
padding: 0;
list-style: none;
border: 0;}
#ua1{
width: 340px;
height: 30px;
background:url(./images/bg.jpg);
margin: 50px auto 0;
text-align: center;
line-height: 30px;
}
#ua1 .la{
width: 100px;
height: 30px;
background:url(./images/libg.jpg);
margin-left:10px;
float:left;
position: relative;
}
.la ul{
display: none;
position:absolute;
}
.la li{
width: 100px;
height: 30px;
background:url(./images/libg.jpg);
}
#box{height: 500px;
border: 1px solid #000;}
</style>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<ul id="ua1" >
<li id="la1" class="la" onmousemove="fn('la1','ub1')"onmouseout="fc('la1','ub1')"><a href="#">目录</a>
<ul id="ub1" >
<li id="lb1"><a href="#">目录1</a></li>
<li id="lb2"><a href="#">目录2</a></li>
<li id="lb3"><a href="#">目录3</a></li>
</ul>
</li>
<li id="la2" class="la" onmousemove="fn('la2','ub2')"onmouseout="fc('la2','ub2')"><a href="#">讨论</a>
<ul id="ub2">
<li id="lb1"><a href="#">讨论1</a></li>
<li id="lb2"><a href="#">讨论2</a></li>
<li id="lb3"><a href="#">讨论3</a></li>
</ul>
</li>
<li id="la3" class="la" onmousemove="fn('la3','ub3')" onmouseout="fc('la3','ub3')"><a href="#">笔记</a>
<ul id="ub3">
<li id="lb1"><a href="#">笔记1</a></li>
<li id="lb2"><a href="#">笔记2</a></li>
<li id="lb3"><a href="#">笔记3</a></li>
</ul>
</li>
</ul>
<div id="box">呀呀呀呀呀呀晕嘤嘤呀呀呀呀呀呀呀呀呀呀呀呀有四大行</div>
<script>
function fn(la,ub){
let oLa=document.getElementById(la);
let oUb=document.getElementById(ub);
oUb.style.display="block";
}
function fc(la,ub){
let oLa=document.getElementById(la);
let oUb=document.getElementById(ub);
oUb.style.display="none";
}
</script>
<!-- <script>
// jQuery写法一
$("#ua1 li").hover(function(){
$(this).children('ul').slideToggle();
});
// jQuery写法二
$('#ua1 li').hover(function(){
$(this).children('ul').show();
},function(){
$(this).children('ul').hide();
})
// jQuery写法三
$(function(){
$("#ua1 li").mouseenter(function(){
$(this).children('ul').show();
});
$("#ua1 li").mouseleave(function(){
$(this).children("ul").hide();
});
})
</script> -->
</body>
</html>下拉菜单，下拉导航，JavaScript，html，jQuery的实现代码的更多相关文章
- bootstrap的下拉菜单组件与导航条
前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...
- 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）
HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- 【特效】手机端仿美团下拉菜单带遮罩层html+css+jquery
写了一个手机端的下拉菜单,类似美团,用相对单位rem写的. 效果截图: 代码很简单,原理有点类似嵌套的选项卡,其中的难点在于弹出下拉菜单后,出现黑色半透明遮罩层,而且下层列表页面禁止滚动了.关键就是给 ...
- 18 Flutter仿京东商城项目 商品详情顶部tab切换 顶部下拉菜单 底部浮动导航
ProductContent.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; ...
- (JavaScript插件——下拉菜单)
前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- 华丽导航CSS下拉菜单特效
华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...
- Bootstrap <基础十二>下拉菜单（Dropdowns）
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- Bootstrap 下拉菜单和滚动监听插件
一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
随机推荐
- Android上传图片的两种方式
参考:https://www.jianshu.com/p/f47943880cea
- ES6 class继承的简单应用
class的好处就是让继承的实现更加简单,语法简单,理解起来也不复杂,但是现在只能做测试使用,项目中需要用Babel工具. <!DOCTYPE html> <html> < ...
- Django学习路26_转换字符串大小写 upper,lower
在 urls 中注册 url(r'getstr',views.getstr) 在 views.py 中添加函数 def getstr(request): string = 'abc' string_2 ...
- ASP.NET Core 监听SQL Server数据库的实时信息
1.开发环境: 开发工具:Visual Studio 2019 数据库:SQL Server2012 开发环境:.Net Core 3.1 2.使用技术: Signalr:实现消息推送 SqlDepe ...
- Python os.fchdir() 方法
概述 os.fchdir() 方法通过文件描述符改变当前工作目录.高佣联盟 www.cgewang.com Unix, Windows 上可用. 语法 fchdir()方法语法格式如下: os.fch ...
- PHP fscanf() 函数
定义和用法 fscanf() 函数根据指定的格式对来自打开的文件的输入进行解析. 语法 fscanf(file,format,mixed) 参数 描述 file 必需.规定要检查的文件. format ...
- Python性能分析与优化PDF高清完整版免费下载|百度云盘
百度云盘|Python性能分析与优化PDF高清完整版免费下载 提取码:ubjt 内容简介 全面掌握Python代码性能分析和优化方法,消除性能瓶颈,迅速改善程序性能! 对于Python程序员来说,仅仅 ...
- 学习使用CompletableFuture
CompletableFuture 一．前言 1．JDK5的异步处理方式 2．JDK8的异步处理方式 二.学习CompletableFuture 1．结果获取方式 2．创建CompletableFut ...
- python种类
JPython IronPython CPython JavaScriptPython 等等. 这些python的区别是他们隶属于不同的厂商,而我们所说的python通常是指CPython, 因为不同 ...
- 解放双手！用 Python 控制你的鼠标和键盘
在工作中难免遇到需要在电脑上做一些重复的点击或者提交表单等操作,如果能通过 Python 预先写好相关的操作指令,让它帮你操作,然后你自己去刷网页打游戏,岂不是很爽?] 很多人学习python,不知道 ...