下拉菜单，下拉导航，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 ...
随机推荐
- Java8线程池ThreadPoolExecutor底层原理及其源码解析
小侃一下 日常开发中, 或许不会直接new线程或线程池, 但这些线程相关的基础或思想是非常重要的, 参考林迪效应; 就算没有直接用到, 可能间接也用到了类似的思想或原理, 例如tomcat, jett ...
- jQuery与javascript
jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程. javaScript(js)和jQuery(jq) 都是找元素.操作元素 Dom操作的区别: ...
- 面试官：如何在Integer类型的ArrayList中同时添加String、Character、Boolean等类型的数据？ | Java反射高级应用
原文链接:原文来自公众号:C you again,欢迎关注! 1.问题描述 "如何在Integer类型的ArrayList中同时添加String.Character.Boolean等 ...
- Spring Data R2DBC响应式操作MySQL
1. 前言 在使用R2DBC操作MySQL数据库 一文中初步介绍了r2dbc-mysql的使用.由于借助DatabaseClient操作MySQL,过于初级和底层,不利于开发.今天就利用Spring ...
- Django学习路22_empty为空,forloop.counter 从1计数,.counter0 从0计数 .revcounter最后末尾数字是1,.revcounter0 倒序,末尾为 0
当查找的数据不存在,返回为 空时 在 html 中使用 {%empty%} 语句 进行显示 def getstudents(request): students = Student.objects.a ...
- 使用types库修改函数
import types class ppp: pass p = ppp()#p为ppp类实例对象 def run(self): print("run函数") r = types. ...
- PHP curl_setopt_array函数
(PHP 5 >= 5.1.3) curl_setopt_array — 为 cURL 传输会话批量设置选项. 说明 bool curl_setopt_array ( resource $ch ...
- Skill 脚本演示 ycNetToPin.il
https://www.cnblogs.com/yeungchie/ ycNetToPin.il 通过选中一个 instance ,分析与其连接且同时选中的 wire 上含有的 netName ,自动 ...
- 【好文推荐】黑莓OS手册是如何详细阐述底层的进程和线程模型的？
「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...
- Redis 超详细总结笔记总
作者 | 王爷科技 来源 | www.toutiao.com/i6713520017595433485 1. Redis 简介 Redis 是完全开源免费的,遵守 BSD 协议,是一个高性能的 key ...