簡單實(shí)現(xiàn)點(diǎn)擊可展開、關(guān)閉的CSS豎向菜單

2024-09-05 12:19:37

字體：大中小

供稿：網(wǎng)友

JS+CSS實(shí)現(xiàn)的一個(gè)通過簡單點(diǎn)擊就可展開、關(guān)閉的豎向菜單，沒有怎么美化，只是為了實(shí)現(xiàn)鼠標(biāo)的點(diǎn)擊動(dòng)作，美化起來很容易，因?yàn)檫@個(gè)菜單基本上是用的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   class="iwvjtn8m0"   id="masterdiv">	<div   id="iwvjtn8m0"   class="menutitle" onclick="SwitchMenu('sub1')">Main Menu</div>	<span id="iwvjtn8m0"    class="submenu" id="sub1">		- Main Page		- What's hot		- Main Page		- More Zone	</span>	<div   id="iwvjtn8m0"   class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>	<span id="iwvjtn8m0"    class="submenu" id="sub2">		- Main Page		- DHTML FAQs		- Scripts FAQs	</span>	<div   id="iwvjtn8m0"   class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>	<span id="iwvjtn8m0"    class="submenu" id="sub3">		- Coding Forums	</span>	<div   id="iwvjtn8m0"   class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>	<span id="iwvjtn8m0"    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 id="iwvjtn8m0"    class="submenu" id="sub6">		- Link to DD		- Main Page		- Email Us	</SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557315.html'>鼠標(biāo)滑過放大菜單項(xiàng)的仿FLASH菜單</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557317.html'>動(dòng)畫效果慢慢放大的菜單</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="iwvjtn8m0"   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">

學(xué)習(xí)交流