简单实现点击可展开、关闭的CSS竖向菜单

2024-09-05 12:19:37

字体：大中小

来源：转载

供稿：网友

JS+CSS实现的一个通过简单点击就可展开、关闭的竖向菜单，没有怎么美化，只是为了实现鼠标的点击动作，美化起来很容易，因为这个菜单基本上是用的CSS，所以你只需修改页面顶端的CSS代码就可轻易美化她了。

<html><head><title>CSS竖向菜单</title><style type="text/css">.menutitle{cursor:pointer;margin-bottom: 5px;background-color:#eeeeee;width:188px;padding:2px;text-align:center;font-weight:bold;}.submenu{margin-bottom: 0.5em;}</style><script type="text/javascript">if (document.getElementById){document.write('<style type="text/css">/n')document.write('.submenu{display: none;}/n')document.write('</style>/n')}function SwitchMenu(obj){if(document.getElementById){var el = document.getElementById(obj);var ar = document.getElementById("masterdiv").getElementsByTagName("span"); 	if(el.style.display != "block"){		for (var i=0; i</head><body><div id="masterdiv">	<div class="menutitle" onclick="SwitchMenu('sub1')">Main Menu</div>	<span class="submenu" id="sub1">		- Main Page		- What's hot		- Main Page		- More Zone	</span>	<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>	<span class="submenu" id="sub2">		- Main Page		- DHTML FAQs		- Scripts FAQs	</span>	<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>	<span class="submenu" id="sub3">		- Coding Forums	</span>	<div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>	<span class="submenu" id="sub4">		- JavaScript Kit		- Main Page		- Cool Text		- Main Page	</span>	<img src="/d/file/p/2024/09-05/35d895c6b306e035f22aef81ce0fba4e.gif" onclick="SwitchMenu('sub6')">	<span class="submenu" id="sub6">		- Link to DD		- Main Page		- Email Us	</SPAN>
</div>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557315.html'>鼠标滑过放大菜单项的仿FLASH菜单</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557317.html'>动画效果慢慢放大的菜单</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

学习交流