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

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注