jQuery 黑色的二級下滑菜單

2024-09-05 12:20:48

字體：大中小

來源：轉載

供稿：網友

jQuery 實用簡潔的黑色豎向二級下拉導航菜單，最多支持兩級，最先看到的是一級，點擊一級菜單會展開二級。

<!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><title>jQuery 實用的豎向二級下拉導航菜單</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body {  font-family: Helvetica, Arial, sans-serif;  font-size: 0.9em;}p {  line-height: 1.5em;}ul#menu, ul#menu ul {  list-style-type:none;  margin: 0;  padding: 0;  width: 15em;}ul#menu a {  display: block;  text-decoration: none;	}ul#menu li {  margin-top: 1px;}ul#menu li a {  background: #333;  color: #fff;	  padding: 0.5em;}ul#menu li a:hover {  background: #000;}ul#menu li ul li a {  background: #ccc;  color: #000;  padding-left: 20px;}ul#menu li ul li a:hover {  background: #aaa;  border-left: 5px #000 solid;  padding-left: 15px;}.code {	border: 1px solid #ccc;	list-style-type: decimal-leading-zero;	padding: 5px;	margin: 0;}.code code {	display: block;	padding: 3px;	margin-bottom: 0;}.code li {	background: #ddd;	border: 1px solid #ccc;	margin: 0 0 2px 2.2em;}.indent1 {	padding-left: 1em;}.indent2 {	padding-left: 2em;}</style><script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script><script type="text/javascript">function initMenu() {  $('#menu ul').hide();  $('#menu ul:first').show();  $('#menu li a').click(    function() {      var checkElement = $(this).next();      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {        return false;        }      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {        $('#menu ul:visible').slideUp('normal');        checkElement.slideDown('normal');        return false;        }      }    );  }$(document).ready(function() {initMenu();});</script></head><body>預覽提示錯誤，請刷新頁面。<br><ul id="menu">	<li>		Weblog Tools		<ul>			<li>PivotX</li>			<li>WordPress</li>		</ul>	</li>	<li>		Programming Languages		<ul>			<li>PHP</li>			<li>Ruby</li>			<li>Python</li>		</ul>	</li>	Search Engines		<ul>			<li>Yahoo!</li>			<li>Google</li>		</ul>	</li></ul></body></html>

上一篇：JS版無限級網頁折疊菜單，類似于樹形菜單

下一篇：有個性的彈性菜單，CSS+JavaScript