下拉菜单，下拉导航，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 ...
随机推荐
- Linux系统zabbix_agentd客户端安装与配置
标注:官网下载zabbix安装包(zabbix安装包里包含了zabbix_agentd客户端安装包,我们只选择zabbix_agentd客户端安装) zbbix官网下载地址: http://www. ...
- springboot + ehcache
一.使用 springboot + ehcache本地堆缓存实现相应功能 1.引入ehcache的jar包 2.创建ehcache的xml配置文件 <?xml version="1.0 ...
- PHP localtime() 函数
------------恢复内容开始------------ 实例 以一个数值数组和一个关联数组的形式输出本地时间: <?phpprint_r(localtime());echo "& ...
- PHP is_scalar() 函数
is_scalar() 函数用于检测变量是否是一个标量.高佣联盟 www.cgewang.com 标量变量是指那些包含了 integer.float.string 或 boolean 的变量,而 ar ...
- PHP number_format() 函数
实例 格式化数字: <?php高佣联盟 www.cgewang.comecho number_format("1000000")."<br>" ...
- luogu 1587 [NOI2016]循环之美
LINK:NOI2016循环之美 这道题是 给出n m k 求出\(1\leq i\leq n,1\leq j\leq m\) \(\frac{i}{j}\)在k进制下是一个纯循环的. 由于数值相同的 ...
- .Net Core 实体生成器
实体生成器是什么? 实体生成器的功能就是自动将数据库中的表以及字段 转化成我们 高级编程语言中的实体类. 我们为什么要用实体生成器 在.net core开发环境下,我们可以使用efcore这个orm来 ...
- 【SCOI2008】奖励关 题解（状压DP+期望）
题目链接 题目大意:给定$n$个宝物,每次随机抛出一个宝物,奖励分数为$p_i$.但如果选这个宝物必须选过它的前置宝物集合.共进行$K$轮问最优策略下的期望. $n\leq 15,-10^6\leq ...
- js跳转界面
js页面跳转大全 所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转,如我们打开的是A页面,通过javsrcipt脚本就会跳转到B页面.目前很多垃圾站经常用js跳转将正常页面跳转 ...
- Python入门看这些，最详细学习书籍推荐
随着人工智能以及脚本开发火热,Python已经被推上一个非常火热的巅峰! 那么,想要学习Python却又不知道从哪里开始的朋友,看这里呀~ Python在整个编程语言来说,是比较容易上手,而且“见效” ...