下拉菜单,下拉导航,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 ...
随机推荐
- spring boot 项目连接数据库查询数据过程
spring boot 项目搭建 pom.xml <?xml version="1.0" encoding="UTF-8"?> <projec ...
- 第七章 vuex专题
一.Vuex安装 一般在创建项目是会选择 Vuex,如果没有选择: cnpm install vuex --save 使用: import Vuex from "vuex"; V ...
- PHP is_link() 函数
定义和用法 The is_link() 函数检查指定的文件是否是一个连接. 如果文件是一个连接,该函数返回 TRUE. 语法 is_link(file) 参数 描述 file 必需.规定要检查的文件. ...
- PHP sha1_file() 函数
实例 计算文本文件 "test.txt" 的 SHA-1 散列: <?php高佣联盟 www.cgewang.com$filename = "test.txt&qu ...
- 2020牛客暑假多校训练营 第二场 H Happy Triangle set 线段树 分类讨论
LINK:Happy Triangle 这道题很容易. 容易想到 a+b<x a<x<b x<a<b 其中等于的情况在第一个和第三个之中判一下即可. 前面两个容易想到se ...
- MySQL(8.0.19版本的下载和安装)、window10
mysql的下载 MySQL官网:https://www.mysql.com/ 下载地址:https://dev.mysql.com/downloads/installer/ MySQL 8.0参 ...
- Jmeter(十九) - 从入门到精通 - JMeter监听器 -上篇(详解教程)
1.简介 监听器用来监听及显示JMeter取样器测试结果,能够以树.表及图形形式显示测试结果,也可以以文件方式保存测试结果,JMeter测试结果文件格式多样,比如XML格式.CSV格式.默认情况下,测 ...
- Android Studio同时监听多个Button实现activity跳转
MainActivity.java: package com.example.test; import android.content.Intent; import android.os.Bundle ...
- GCN 入门
参考链接: https://www.zhihu.com/question/54504471/answer/611222866 1 拉普拉斯矩阵 参考链接: http://bbs.cvmart.net/ ...
- 我搭的神经网络不work该怎么办!看看这11条新手最容易犯的错误
1. 忘了数据规范化 2. 没有检查结果 3. 忘了数据预处理 4. 忘了正则化 5. 设置了过大的批次大小 6. 使用了不适当的学习率 7. 在最后一层使用了错误的激活函数 8. 网络含有不良梯度 ...