asp.net 折叠菜单，我想做一个网页左边是折叠菜单，点击左边右边出现内容的那种折叠式菜单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了asp.net 折叠菜单，我想做一个网页左边是折叠菜单，点击左边右边出现内容的那种折叠式菜单相关的知识，希望对你有一定的参考价值。
就像图片上那种，刚开始增加和管理师隐藏的，我用站点地图实现了，请问还有其他方法吗？站点地图一个网站中只能用一个吗？？？
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<head runat="server">
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
$(document).ready(function()
$(".menu_top").click(function()
var self = $(this).parent().find(".menu_son");
if(self.css('display')=="none")
$(this).parent().parent().find(".menu_son").slideUp();
self.slideToggle("slow");
);
)
</script>
<style type="text/css">
*margin:0;padding:0;border:0; font-family:宋体; font-size:14px; color:black;line-height:22px;
ul li line-height:22px;list-style:none;color:#cfcfcf;
.menu_topdisplay:block;color:#8f8f8f; background-image:url('img/bbg.gif');height:33px;line-height:33px
.menu_sondisplay:none;
#img_move_alt *color:white;font-size:9pt; font-family:宋体
</style>
<title>无标题页</title>
</head>
<body>
<div style="width: 800px; text-align: center; margin-left: auto; margin-right: auto;padding-top:15px; ">
<div class="left" style="width: 156px; float: left; border: 1px solid #ccc">
<div>
<div class="menu_top">
菜单1
</div>
<div class="menu_son" style="display:block">
<ul>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
</ul>
</div>
</div>
<div>
<div class="menu_top">
菜单2
</div>
<div class="menu_son">
<ul>
<li>menu1 </li>
<li>menu3 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu3 </li>
<li>menu4 </li>
<li>menu3 </li>
</ul>
</div>
</div>
<div>
<div class="menu_top">
菜单3
</div>
<div class="menu_son">
<ul>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
</ul>
</div>
</div>
</div>
</body>
</html>
jq.js是Jquery-1.2.6.js
你去下载个,之前写这玩的...测试没问题 参考技术A 引一个JQUERY的包,在点击事件里调用对象的toggle()方法,就可以实现隐藏与展现.
比如你把一些元素或控件放到一个<div id="dID" class="cID">里,
那么通过$("#dID").toggle()或者$(".cID").toggle()都可以实现点一下隐藏再点一下显示的效果. 参考技术B 你可以到网上下载 左侧菜单模板 多得很
菜单显示和折叠时平滑过渡
【中文标题】菜单显示和折叠时平滑过渡【英文标题】：Smooth transition on menu show and collapsed 【发布时间】：2021-12-20 03:28:20 【问题描述】：我想用 tailwincss 实现一个过渡，在“活动”状态改变时，我的意思是当菜单显示/折叠时我想实现一个平滑而令人愉悦的过渡
我尝试通过添加transition delay-150 duration-300 ease-in-out 将其添加到状态更改中，但我无法使其工作。
import Link from "next/link";
import useState from "react";
import HamburgerMenu from "react-hamburger-menu";
import dynamic from "next/dynamic";
const NavLink = dynamic(() => import("./NavLink"));
export const Navbar = () =>
const [active, setActive] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const handleClick = () =>
setActive(!active);
setIsOpen(!isOpen);
;
const handleClose = () =>
setActive(false);
setIsOpen(false);
;
return (
<nav className="sticky top-0 z-10 flex flex-wrap items-center px-3 py-3 bg-white md:py-3 container bg-red-200">
<div className="flex flex-wrap items-center justify-between w-full">
<Link href="/">
<a className="inline-flex items-center">
<span className="text-xl font-bold tracking-wide text-black tahu">
Agoumi.
</span>
</a>
</Link>
<div className="inline-flex p-0 ml-auto text-xl rounded-full outline-none hover:shadow-sm hover:bg-gray-100 hover:text-black">
<HamburgerMenu
isOpen=isOpen
menuClicked=handleClick
width=20
height=15
strokeWidth=2
rotate=0
color="black"
// borderRadius=15
animationDuration=1
className="m-3"
/>
</div>
</div>
<div
className=`$
active ? "transition delay-150 duration-300 ease-in-out" : "hidden"
w-full`
>
<div className="flex flex-col items-start w-full align-center">
<NavLink close=handleClose to="/" linkName="Home" isOpen=false />
<NavLink
close=handleClose
to="about"
linkName="About Me"
isOpen=false
/>
<NavLink
close=handleClose
to="value"
linkName="Values"
isOpen=false
/>
<NavLink
close=handleClose
to="projects"
linkName="Projects"
isOpen=false
/>
<NavLink
close=handleClose
to="contact"
linkName="Contact us"
isOpen=false
/>
</div>
</div>
</nav>
);
;
export default Navbar;
【问题讨论】：
【参考方案1】：问题是display 属性（通过hidden 类）不能动画，你可以看到动画属性here 的完整列表。
您可以为height 设置动画，但它需要明确指定整个菜单高度（auto 不会设置动画），因此下面代码中的h-32 只是一个示例，您可能需要根据您的需要更改它具体情况。
这是一个例子：
<div
className=`$
active ? 'h-32' : 'h-0'
transition-all delay-150 duration-300 overflow-hidden w-full`
>
...
注意transition-all被使用，简单的transition不会动画height，而ease-in-out被移除，因为它是多余的，同样的计时功能已经包含在transition-all中。
【讨论】：
感谢您的详细解释。以上是关于asp.net 折叠菜单，我想做一个网页左边是折叠菜单，点击左边右边出现内容的那种折叠式菜单的主要内容，如果未能解决你的问题，请参考以下文章
使用可折叠/可扩展行创建 gridview C# asp.net