注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

响应式滑动菜单插件jQuery Sliding Menu

菜单 fishcity 2080浏览

jQuery Sliding Menu插件

jQuery Sliding Menu是一款非常轻巧的jquery响应式滑动菜单插件,可以适用于移动端与PC端,只需几行代码就可以让您的菜单动感十足,大大的提升用户体验性。

jqeury实例之插件使用方法:

引入核心文件

<link rel="stylesheet" type="text/css" href="css/jquery-sliding-menu.css">
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-sliding-menu.js"></script>

写入Html菜单结构,菜单项的数量不限,根据项目需求写入,但结构是不能改变的。代码如下:

<div id="menu">
  <ul>
    <li> <a href="#">Artists</a>
      <ul>
        <li> <a href="#">Aerosmith</a>
          <ul>
            <li> <a href="#">Get Your Wings</a>
              <ul>
                <li> <a href="#">Train Kept A-Rollin'</a> </li>
                <li> <a href="#">Same Old Song and Dance</a> </li>
              </ul>
            </li>
          </ul>
        </li>
        <li> <a href="#">Eagles</a>
          <ul>
            <li> <a href="#">Hotel California</a>
              <ul>
                <li> <a href="#">Hotel California</a> </li>
                <li> <a href="#">Pretty Maids All in a Row</a> </li>
              </ul>
            </li>
          </ul>
        </li>
        <li> <a href="#">Led Zeppelin</a>
          <ul>
            <li> <a href="#">Physical Graffiti</a>
              <ul>
                <li> <a href="#">In My Time of Dying</a> </li>
                <li> <a href="#">Houses of the Holy</a> </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="#">Albums</a>
      <ul>
        <li> <a href="#">Get Your Wings</a>
          <ul>
            <li> <a href="#">Train Kept A-Rollin'</a> </li>
            <li> <a href="#">Same Old Song and Dance</a> </li>
          </ul>
        </li>
        <li> <a href="#">Hotel California</a>
          <ul>
            <li> <a href="#">Hotel California</a> </li>
            <li> <a href="#">Pretty Maids All in a Row</a> </li>
          </ul>
        </li>
        <li> <a href="#">Physical Graffiti</a>
          <ul>
            <li> <a href="#">In My Time of Dying</a> </li>
            <li> <a href="#">Houses of the Holy</a> </li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="#">Songs</a>
      <ul>
        <li> <a href="#">In My Time of Dying</a> </li>
        <li> <a href="#">Houses of the Holy</a> </li>
        <li> <a href="#">Hotel California</a> </li>
        <li> <a href="#">Pretty Maids All in a Row</a> </li>
        <li> <a href="#">Train Kept A-Rollin'</a> </li>
        <li> <a href="#">Same Old Song and Dance</a> </li>
      </ul>
    </li>
    <li> <a href="#">Genres</a>
      <ul>
        <li> <a href="#">Rock</a>
          <ul>
            <li> <a href="#">Hotel California</a> </li>
            <li> <a href="#">Pretty Maids All in a Row</a> </li>
            <li> <a href="#">Train Kept A-Rollin'</a> </li>
            <li> <a href="#">Same Old Song and Dance</a> </li>
          </ul>
        </li>
        <li> <a href="#">Hard rock</a>
          <ul>
            <li> <a href="#">In My Time of Dying</a> </li>
            <li> <a href="#">Houses of the Holy</a> </li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="#">Settings</a>
      <ul>
        <li> <a href="#">Profile</a> </li>
        <li> <a href="#">Player</a>
          <ul>
            <li> <a href="#">Volume</a> </li>
            <li> <a href="#">Equalizer</a> </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

写入JS初始化

$(document).ready(function()
{
    $('#menu').menu();
});

选项

dataJSON    false    用来建立菜单的一个JSON对象    

backLabel   'Back'   返回按钮. 设置为true时使用已有的链接标签  

转载请注明:jQ酷 » 响应式滑动菜单插件jQuery Sliding Menu

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。