JS + CSS + DIV 实现动画式折叠菜单

最新推荐文章于 2024-09-04 07:11:11 发布

JavaChenYang

最新推荐文章于 2024-09-04 07:11:11 发布

阅读量1.8k

点赞数

分类专栏： JSP 文章标签： div css function javascript html

本文链接：https://blog.youkuaiyun.com/JavaChenYang/article/details/4451336

版权

本文展示了一种使用JavaScript、CSS和HTML的<div>元素实现动画式折叠菜单的方法。通过JavaScript函数`clipItem()`控制菜单的展开和收起，利用CSS设置动画效果。点击<h3>标签时，菜单将通过改变`clip`属性进行平滑的展开或收起。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
#data1{position:absolute;top:100px;left:100px;padding:0;width:200px;height:200px;
background-color:#ff0;clip:rect(0px,200px,200px,0px);}
#data1 h3{margin:0;padding:5px;font-size:smaller;background-color:#006;color:#fff;}
#contained{margin:10px;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var bottom = 200;
var hidden = false;
var obj = null;
function clipItem(){
  obj = document.getElementById("data1");
  if(hidden){
   showItem();
  }else{
   hideItem();
  }
}