用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

jQuery手风琴菜单(模拟手机界面)

2014-06-23 作者: 小蜜锋举报

[javascript]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title></title>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  <style type="text/css">
/*<![CDATA[*/
  body{width:500px;margin:0 auto}
  .footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}
  .footer a{color:#999;text-decoration:none}
  #wrapper-250{width:250px;margin:0 auto;}
  /*]]>*/
  </style>
  <meta name="robots" content="noindex,follow" />
</head>

<body>
  <div id="wrapper-250">
    <ul class="accordion">
      <li id="one" class="files">
        <a href="#one">My Files<span>495</span></a>

        <ul class="sub-menu">
          <li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>

          <li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

          <li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

          <li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>

          <li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>
        </ul>
      </li>

      <li id="two" class="mail">
        <a href="#two">Mail<span>26</span></a>

        <ul class="sub-menu">
          <li><a href="#"><em>01</em>Hotmail<span>9</span></a></li>

          <li><a href="#"><em>02</em>Yahoo<span>14</span></a></li>
        </ul>
      </li>

      <li id="three" class="cloud">
        <a href="#three">Cloud<span>58</span></a>

        <ul class="sub-menu">
          <li><a href="#"><em>01</em>Connect<span>12</span></a></li>

          <li><a href="#"><em>02</em>Profiles<span>19</span></a></li>

          <li><a href="#"><em>03</em>Options<span>27</span></a></li>

          <li><a href="#"><em>04</em>Connect<span>12</span></a></li>

          <li><a href="#"><em>05</em>Profiles<span>19</span></a></li>

          <li><a href="#"><em>06</em>Options<span>27</span></a></li>
        </ul>
      </li>

      <li id="four" class="sign">
        <a href="#four">Sign Out</a>

        <ul class="sub-menu">
          <li><a href="#"><em>01</em>Log Out</a></li>

          <li><a href="#"><em>02</em>Delete Account</a></li>

          <li><a href="#"><em>03</em>Freeze Account</a></li>
        </ul>
      </li>
    </ul>
  </div><script type="text/javascript" src="js/jquery.min.js">
</script><script type="text/javascript">
//<![CDATA[
                $(document).ready(function() {
                        // Store variables
                        var accordion_head = $('.accordion > li > a'),
                                accordion_body = $('.accordion li > .sub-menu');
                        // Open the first tab on load
                        accordion_head.first().addClass('active').next().slideDown('normal');
                        // Click function
                        accordion_head.on('click', function(event) {
                                // Disable header links
                                event.preventDefault();
                                // Show and hide the tabs on click
                                if ($(this).attr('class') != 'active'){
                                        accordion_body.slideUp('normal');
                                        $(this).next().stop(true,true).slideToggle('normal');
                                        accordion_head.removeClass('active');
                                        $(this).addClass('active');
                                }
                        });
                });
  //]]>
  </script>
</body>
</html>

[代码运行效果截图]


jQuery手风琴菜单(模拟手机界面)

[源代码打包下载]




网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...