ASP动态网页设计与Ajax技术----制作折叠式菜单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作折叠式菜单</title>
</head>
<style type="text/css">
 ul{list-style: none; margin: 0; padding: 0;}
 #accordion{width: 200px;}
 #accordion li{border-bottom: 1px solid #ED9F9F;}
 #accordion a{
  font-size: 14px; color: #ffffff; text-decoration: none;
  display: block; padding: 5px 5px 5px 0.5em;
  border-left: 12px solid #711515;
  border-right: 1px solid #711515;
  background-color: #c11136; height: 1em;
 }
 #accordion a:hover{background-color: #990020; color: #ffff00;}
 #accordion li ul li{border-top: 1px solid #ED9F9F;}
 #accordion li ul li a{
  padding: 3px 3px 3px 0.5em;
  border-left: 28px solid #a71f1f;
     border-right: 1px solid #711515;
  background-color: #e85070;
 }
 #accordion li ul li a:hover{
  background-color: #c2425d;
  color: #ffff00;
 }
 </style>
<body><script src="jquery-3.4.1.min.js"></script>
 <script>
 $(function(){
  $("#accordion>li>a+*:not(:first)").hide();
  $("#accordion>li>a").click(function(){
   $(this).parent().parent().each(function(){
    $(">li>a+*",this).slideUp();
   });
   $("+*",this).slideDown();
  });
 });
 </script>
 <ul id="accordion">
 <li>< a href=" ">学 校 概 况</ a>
  <ul>
  <li>< a href="">学校介绍</ a></li>
   <li>< a href="">大学章程</ a></li>
   <li>< a href="">现任领导</ a></li>
   <li>< a href="">历任领导</ a></li>
   <li>< a href="">领导关怀</ a></li>
   <li>< a href="">学校荣誉</ a></li>
  </ul></li>
 <li>< a href="#">机 构 设 置</ a>
  <ul>
  <li>< a href="">教学单位</ a></li>
   <li>< a href="">党政机构</ a></li>
   <li>< a href="">科研单位</ a></li>
   <li>< a href="">教辅单位</ a></li>
  </ul></li>
 <li>< a href="#">教 育 教 学</ a>
  <ul>
  <li>< a href="">本科生教育</ a></li>
   <li>< a href="">博士生教育</ a></li>
   <li>< a href="">硕士生教育</ a></li>
   <li>< a href="">预科生教育</ a></li>
   <li>< a href="">继续教育与职业教育</ a></li>
   <li>< a href="">留学生教育</ a></li>
   <li>< a href="">教学团队与特色专业</ a></li>
  </ul></li>
 <li>< a href="#">民 大 文 化</ a>
  <ul>
  <li>< a href="">民大精神</ a></li>
   <li>< a href="">办学理念</ a></li>
   <li>< a href="">民大校训</ a></li>
   <li>< a href="">学校标识</ a></li>
   <li>< a href="">印象民大</ a></li>
  <li>< a href="">印象民大</ a></li>
   <li>< a href="">民大先贤</ a></li>
   <li>< a href="">和谐校园</ a></li>
   </ul></li>
   </ul>
</body></center>

原文地址:https://www.cnblogs.com/sihuan/p/12091554.html

时间: 2024-11-10 18:15:59

ASP动态网页设计与Ajax技术----制作折叠式菜单的相关文章

ASP动态网页设计与Ajax技术----制作Tab面板

<!doctype html><html><head><meta charset="utf-8"><title>制作Tab面板</title></head><style type="text/css"> #tab{  margin: 0; list-style: none;  padding: 0 0 31px;  border-bottom: 1px solid #11

ASP动态网页设计与Ajax技术----制作图片轮显效果

<!doctype html><html><head><meta charset="utf-8"><title>制作图片轮显效果</title></head><style type="text/css"> img{border: 0px;} .imgsBox{overflow: hidden; width: 282px; height: 176px;} .imgs a{d

Java Web学习(2):静态网页与动态网页

一静态网页 (1)静态网页概述 在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是 标准的HTML文件,它的文件扩展名是.htm..html,可以包含文本.图像.声音.FLASH动画.客户端脚本和ActiveX 控件及JAVA小程序等.静态网页是网站建设的基础,早期的网站一般都是由静态网页制作的. 静态网页是相对于动态网页而言,是指没有后台数据库.不含程序和不可交互的网页.静态网页相对更新起来比 较麻烦,适用于一般更新较少的展示型网站

asp.net webform设计思路的思考

我使用asp.net的webform框架进行web应用程序的开发已经差不多四年了,在整个开发生涯中,也使用过一年asp.net的mvc框架.因为网上经常有讨论webform框架和mvc框架的优劣,所以自己也对这两者进行了关注,因为自己最熟悉webform框架,所以就会考虑它的优势是什么?设计思路是什么? 要理解asp.net的设计思路,必须考虑它的产生年代,产生的技术基础,还有观察同时代其他动态网页技术的特点和思路. 首先是产生asp.net的技术基础,以下援引百度百科:    "1996年,A

动态网页开发基础

什么是动态网页? 误区: 初学者一般认为动态网页,就是会动的网页,实际上不是这样的. 动态网页: 是指在服务器端进行的,使用程序语言设计的交互式网页,它们会 根据某种条件的变化,返回不同的网页内容. 动态网页的优势: 1.交互性:即网页会根据用户的要求和选择而动态改变和显示内容 2.自动更新:即无须改变页面代码,便会自动生成新的页面内容,可以节省工作量 3.随机性:即当不同的时间,不同的人访问同一网址时会产生不同的页面效果 为什么学习B/S架构技术? 在学习B/S架构前,先了解C/S(Clien

静态/动态网页-动静之间

经过新闻系统的实践之后还不太了解什么是静态网页,什么是动态网页,在学习了Asp.net之后对静态网页和动态网页做一个新的认识.在网页制作中,静态网页是动态网页制作的基础,我们要想学习好动态网页设计,首先必须对静态网页有一个全面的认识. 静态网页 静态网页使用超文本标记语言,是标准的HTML文件,无法与用户产生互动的网页.静态网页只能够单纯地显示网页的内容,相当于是展览中画纸上的一幅画,只是展示出来,而无法像现在使用的浏览器那样,对我们的操作做出响应. 优点: a.一经发布到服务器,静态网页保存在

第一章---动态网页开发基础

动态网页开发基础 什么是动态网页? 误区: 初学者一般认为动态网页,就是会动的网页,实际上不是这样的. 动态网页: 是指在服务器端进行的,使用程序语言设计的交互式网页,它们会 根据某种条件的变化,返回不同的网页内容. 动态网页的优势: 1.交互性:即网页会根据用户的要求和选择而动态改变和显示内容 2.自动更新:即无须改变页面代码,便会自动生成新的页面内容,可以节省工作量 3.随机性:即当不同的时间,不同的人访问同一网址时会产生不同的页面效果 为什么学习B/S架构技术? 在学习B/S架构前,先了解

网页设计Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

网页设计 Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程 更多&gt;

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut