Html菜单折叠

最新推荐文章于 2024-09-23 09:28:04 发布

Pink_空白格

最新推荐文章于 2024-09-23 09:28:04 发布

阅读量3.1k

点赞数

分类专栏：移动开发

本文链接：https://blog.csdn.net/BoBrother/article/details/78207275

版权

移动开发专栏收录该内容

45 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在HTML中创建并实现菜单的折叠效果，通过使用特定的HTML标记和JavaScript或者CSS来达到交互式用户体验。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 折叠菜单</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<style type="text/css">
* { margin:0px; padding:0px; }
body { background:transparent url('images/bg.gif') repeat scroll left top;font-size:14px; }
ul, li, p, h1, h2, h3, div, label, input, form { list-style:none; padding:0px; margin:0px; }
#header { width:600px; margin:20px auto 0; color:#ffffff; background:transparent url('images/header1.jpg') repeat-x scroll left top; height:90px; line-height:90px; font-size:20px; overflow:hidden; }
#header p { padding-left:15px; font-weight:bold; }
#header p span.date { float:right; padding-right:15px; font-size:14px; padding-top:10px; font-weight:normal; }
.content { width:596px; _height:430px; min-height:430px; margin:0 auto; border:2px solid #AAAA00; border-top:none; background-color:#FFFFFF; overflow:hidden; }
.toggle { width:450px; margin:20px auto; }
.toggle dl dt { background:#F4FFF4 url('images/bg_toggle_up.gif') no-repeat scroll 8px 14px; height:40px; width:450px; line-height:40px; font-size:16px; font-weight:bold; color:#006600; cursor:pointer; margin:8px 0; padding-left:25px; display:block; }
.toggle dl dt.current { background:#F4FFF4 url('images/bg_toggle_down.gif') no-repeat scroll 8px 14px; }
.toggle dl dd { padding-left:10px; line-height:24px; }
.toggle dl dd h2 { font-size:15px; }
.toggle dl dd ul { padding-bottom:12px; }
.toggle dl dd ul li { list-style:decimal inside none; }
</style>
<script type="text/javascript">
$(function(){
$(".toggle dl dd").hide();
$(".toggle dl dt").click(function(){
$(".toggle dl dd").not($(this).next()).hide();
$(".toggle dl dt").not($(this).next()).removeClass("current");
$(this).next().slideToggle(500);
$(this).toggleClass("current");
});
});
</script>
</head>
<body>
<div id="header">
<p><span class="date">时间：2010/8/3</span>jQuery 折叠菜单<span style="font-size:14px;padding:10px 0 0 5px;">By Sam Zhang</span>
</div>
<div class="content">
<div class="toggle">
<dl>
<dt>项目一</dt>
<dd>
<h2>学习进度：</h2>
<ul>
<li>简单分析用户数据，整理用户需求导向；</li>
<li>对在用户浏览器端的最终视觉呈现负责；</li>
<li>和后台工程师一起研讨技术实现方案，制定服务接口等；</li>
</ul>
<h2>项目进展：</h2>
<ul>
<li>本科以上学历，习惯阅读英文原版技术文档和书籍；</li>
<li>对可用性、可访问性等相关知识有深刻的认识和实践经验；</li>
<li>掌握至少一门非前端脚本开发语言（如PHP/Python等）；</li>
</ul>
</dd>
<dt>项目二</dt>
<dd>
<h2>穿着打扮：</h2>
<ul>
<li>对在用户浏览器端的最终视觉呈现负责；</li>
<li>持续的优化前端体验和页面响应速度；</li>
<li>和后台工程师一起研讨技术实现方案，制定服务接口等；</li>
</ul>
<h2>谈吐坐姿：</h2>
<ul>
<li>本科以上学历，习惯阅读英文原版技术文档和书籍；</li>
<li>熟悉至少一种JS框架（如YUI/JQuery等），我们目前主要使用YUI；</li>
<li>掌握至少一门非前端脚本开发语言（如PHP/Python等）；</li>
</ul>
</dd>
<dt>项目三</dt>
<dd>
<h2>自身简介：</h2>
<ul>
<li>简单分析用户数据，整理用户需求导向；</li>
<li>对在用户浏览器端的最终视觉呈现负责；</li>
<li>使用HTML/CSS/Javascript开发符合W3C标准的网站前端页面；</li>
</ul>
<h2>工作经验：</h2>
<ul>
<li>精通XHTML/CSS/Javascript等前端技术，兼容多种浏览器的代码；</li>
<li>熟悉至少一种JS框架（如YUI/JQuery等），我们目前主要使用YUI；</li>
<li>掌握至少一门非前端脚本开发语言（如PHP/Python等）；</li>
</ul>
</dd>
<dt>项目四</dt>
<dd>
<h2>骗过自己：</h2>
<ul>
<li>简单分析用户数据，整理用户需求导向；</li>
<li>对在用户浏览器端的最终视觉呈现负责；</li>
<li>使用HTML/CSS/Javascript开发符合W3C标准的网站前端页面；</li>
</ul>
<h2>成功之路：</h2>
<ul>
<li>精通XHTML/CSS/Javascript等前端技术，兼容多种浏览器的代码；</li>
<li>熟悉至少一种JS框架（如YUI/JQuery等），我们目前主要使用YUI；</li>
<li>掌握至少一门非前端脚本开发语言（如PHP/Python等）；</li>
</ul>
</dd>
</dl>
</div>
<h1>
           
不管你是谁，是龙盘着，是虎卧着。</h1 >

</div>

</body>
</html>