基于jQuery的竖向二级下拉滑动伸缩菜单

整理于 : 2011-04-29 | 700 |字体:小默认大 | 颜色:蓝默认灰 | 收藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head></p>
<p><meta http-equiv="content-type" content="text/html;charset=gb2312"></p>
<style type="text/css">
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.9em;
}</p>
<p>p {
  line-height: 1.5em;
}</p>
<p>ul#menu, ul#menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 15em;
}</p>
<p>ul#menu a {
  display: block;
  text-decoration: none; 
}</p>
<p>ul#menu li {
  margin-top: 1px;
}</p>
<p>ul#menu li a {
  background: #333;
  color: #fff; 
  padding: 0.5em;
}</p>
<p>ul#menu li a:hover {
  background: #000;
}</p>
<p>ul#menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}</p>
<p>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>
<p><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script><br />
<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><br />
</head><br />
<body><br />
<br /><Br><font color=red>如果预览无法正常显示，请刷新预览页面。</font></p>
<ul id="menu">
<li>
  <a href="#">http://lqcc.info/</a></p>
<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>
</ul>
</li>
<li>
  <a href="#">网页特效①</a></p>
<ul>
<li><a href="#" title="">菜单导航特效</a></li>
<li><a href="#" title="">图层样式特效</a></li>
<li><a href="#" title="">链接文本特效</a></li>
<li><a href="#" title="">图形图像特效</a></li>
<li><a href="#" title="">鼠标特效代码</a></li>
<li><a href="#" title="">页面窗口特效</a></li>
</ul>
</li>
<li>
 <a href="#">网页特效②</a></p>
<ul>
<li><a href="#" title="">网页背景特效</a></li>
<li><a href="#" title="">日期时间特效</a></li>
<li><a href="#" title="">页面搜索特效</a></li>
<li><a href="#" title="">表格表单特效</a></li>
<li><a href="#" title="">其他网页特效</a></li>
</ul>
</li>
</ul>
<p></body><br />
</html>

提示：可以先修改部分代码再运行注意：运行后无效果可以按ALT+F5刷新页面

基于jQuery的竖向二级下拉滑动伸缩菜单

随机推荐

Leave a Comment

浏览排行

最新发布

热门搜索

基于jQuery的竖向二级下拉滑动伸缩菜单

相关内容

随机推荐

Leave a Comment

浏览排行

最新发布

热门搜索