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

适用触屏的jquery响应式多级菜单插件FlexNav

菜单 fishcity 7892浏览

适用触屏的jquery响应式多级菜单插件FlexNav

FlexNav是第一款适用于移动设备的多级菜单插件,它使用媒体查询与js使一个多级菜单支持触屏、鼠标、键盘等操作,而FlexNav特别注重于触屏应用。

特点:

多级菜单

支持触屏点击显示子菜单

支持PC桌面鼠标悬浮显示

支持键盘输入显示

支持浏览器:IE7-10,Latest Safari,Latest Chrome,Latest FireFox,Android 2.2 to Latest,Mobile Safari

使用方法

引入核心文件

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

构建菜单html结构

<nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="">Item 1</a>
              <ul>
                <li> <a href="#content">Sub 1 Item 1</a></li>
                <li><a href="/">Sub 1 Item 2</a></li>
                <li><a href="/">Sub 1 Item 3</a></li>
                <li><a href="/">Sub 1 Item 4</a></li>
              </ul>
            </li>
            <li><a href="/">Item 2</a>
              <ul>
                <li><a href="/">Sub 1 Item 1</a></li>
                <li><a href="/">Sub 1 Item 2</a>
                  <ul>
                    <li><a href="/">Sub 2 Item 1</a></li>
                    <li><a href="http://jasonweaver.name/">Sub 2 Item 2</a></li>
                    <li><a href="http://jasonweaver.name/">Sub 2 Item 3</a></li>
                  </ul>
                </li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 3</a>
                  <ul>
                    <li><a href="http://jasonweaver.name/">Sub 2 Item 1</a></li>
                    <li><a href="http://jasonweaver.name/">Sub 2 Item 2</a>
                      <ul>
                        <li><a href="http://jasonweaver.name/">Sub 3 Item 1</a></li>
                        <li><a href="http://jasonweaver.name/">Sub 3 Item 2</a></li>
                        <li><a href="http://jasonweaver.name/">Sub 3 Item 3</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="http://jasonweaver.name/">Item 3</a>
              <ul>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 1</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 2</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 3</a></li>
              </ul>
            </li>
            <li><a href="">Item 4</a>
              <ul>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 1</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 2</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 3</a></li>
              </ul>
            </li>
            <li><a href="http://jasonweaver.name/">Item 5</a>
              <ul>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 1</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 2</a></li>
                <li><a href="http://jasonweaver.name/">Sub 1 Item 3</a></li>
              </ul>
            </li>
          </ul>
        </nav>

写入JS初始化插件

 $(".flexnav").flexNav();

参数

$(".flexnav").flexNav({
  'animationSpeed':     250,            // 默认的下拉动画速度
  'transitionOpacity':  true,           // 默认为不透明动画
  'buttonSelector':     '.menu-button', //默认的菜单按钮CSS类名
  'hoverIntent':        false,          // 是否使用 hoverIntent 插件,true为使用
  'hoverIntentTimeout': 150,            // hoverIntent默认结束时间
  'calcItemWidths':     false,          // 是否动态配置顶级导航项宽度
  'hover':              true            // 是否支持鼠标悬浮功能      
  });

转载请注明:jQ酷 » 适用触屏的jquery响应式多级菜单插件FlexNav

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