隐藏菜单和js基础

最新推荐文章于 2024-01-16 10:13:57 发布

啦两个啦

最新推荐文章于 2024-01-16 10:13:57 发布

阅读量545

点赞数

分类专栏：前端文章标签： javascript css css3

本文链接：https://blog.csdn.net/zyy446688/article/details/128163771

版权

本文介绍了隐藏菜单的实现，包括简单的和复杂的方法，并详细讲解了JavaScript的基础知识，包括概念、案例以及如何使用外部js文件。

摘要由CSDN通过智能技术生成

隐藏菜单和js基础

------------------简单的隐藏菜单

------------------复杂的隐藏菜单

-----------------认识 js

一、简单的隐藏菜单

效果图：在这里插入图片描述

<!-- 简单的隐藏菜单的基本要求：
 1.用一个盒子（div）里面放两个子标签，一个是默认可见的部分，一个是默认隐藏的部分
 2.必须设置父标签（盒子）的大小和可见的部分的大小一样
 3.必须通过定位的方式调整可见部分和不可见部分的位置
 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<span id="visible">更多</span>
			<div id="invisible"></div>
		</div>
		
		<style>
			/* 必须设置盒子的大小和可见部分的大小一样 */
			#box{
     
				position: relative;
				width: 60px;
				height: 30px;
				margin-left: 300px;
			}
			#visible{
     
				position: absolute;
				top: 0px;
				
				width: 60px;
				height: 30px;
				background-color: darkcyan;
			}
			
			#invisible{
     
				width: 200px;
				height: 90px;
				background-color: chocolate;
				position: absolute;
				top:30px ;
				right: 0px;
				/* 默认隐藏 */
				display: none;
			}
			
			
			#visible:hover{
     
				color: white;
				
			}
			
			/* 核心操作 
			#box:hover{}  -   鼠标悬停在id为box的标签上的时候设置id为box标签的样式
			#box:hover #invisible{}  -   鼠标悬停在id为box的标签上的时候设置id为invisible标签的样式 
			*/
			#box:hover #invisible{
     
				display: block;
			}
			#box:hover #visible{
     
				color: white;
			}
			
		</style>
	
		<hr>
        
		<div id="box2">
			<p>我是段落1</p>
			<a href=""