HTML5网页设计

导航菜单

jQuery向下滑动展开的菜单

时间:2014-12-02 14:46来源:未知作者:user点击:
jQuery实现点击当前惨淡向下滑动展开,其它此单自动折叠效果。

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" xml:lang="en">
<head>
<title>jQuery向下滑动展开的JS下滑菜单 - ShejiCool.com</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}
ul#sidemenu a{display: block;text-decoration: none;}
ul#sidemenu li{margin: 5px auto;}
ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}
ul#sidemenu li a: hover{background: #000;}
ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}
ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}
</style>
</head>
<body>
<div class="leftbar">
    <ul id="sidemenu">
      <li><a href="#" >+ 菜单导航</a>                           
            <ul>
                  <li><a target="_blank" href="http://www.baidu.com/s?wd=shejicool.com" title="">菜单导航特效</a></li>
                  <li><a target="_blank" href="http://www.baidu.com/s?wd=shejicool.com" title="">图层样式特效</a></li>
                  <li><a target="_blank" href="http://www.baidu.com/s?wd=shejicool" title="">链接文本特效</a></li>
                  <li><a target="_blank" href="http://www.baidu.com/s?wd=shejicool.com" title="">图形图像特效</a></li>
                  <li><a target="_blank" href="http://www.baidu.com/s?wd=shejicool.com" title="">鼠标图形特效</a></li>
             </ul>
      </li>
      <li><a href="#" >+ 友情链接</a>
           <ul>
                  <li><a target="_blank" href="http://www.baidu.com/s?wd=shejicool">唯美图片</a></li>
                  <li><a target="_blank" href="http://www.baidu.com/s?wd=shejicool.com">快播电影</a></li>
                  <li><a target="_blank" href="http://www.baidu.com/s?wd=shejicool.com">月付主机</a></li>
           </ul>
       </li>
    </ul>
</div>
<script type="text/javascript" src="http://www.shejicool.com/demo/jquery.min.js"></script>
<script type="text/javascript">
function initMenu() {
  $('#sidemenu ul').hide();
  $('#sidemenu ul:first').hide();
  $('#sidemenu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#sidemenu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});
</script>
</body>
</html>
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐