页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

响应式导航Responsive Navigation

响应式导航Responsive Navigation可以在只需CSS3下实现,也可以通过结合jQuery插件实现触摸或移动鼠标它遍历子菜单. 响应式导航Responsive Navigation
<!DOCTYPE html>
<html lang="en" class="nav-no-js">

@viewport { width: device-width; }
@-ms-viewport { width: device-width; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
  line-height: 2.4rem;
}

<nav class="nav">
  <ul>
    <li><a href="/link/to/page">Link</a></li>
    <li class="nav-submenu"><a href="#">Sub Menu</a>
      <ul>
        <li><a href="/link/to/sub/page">Link</a></li>
      </ul>
    </li>
  </ul>
</nav>

$('.nav').nav({
    // Mobile menu button selector
    navButton: '.nav-button',
    // Sub menu selector (<li>)
    subMenu: '.nav-submenu',
    // Open sub menu's on mouse over
    // when not in mobile mode
    mouseOver: true,
    // When clicking/touching a sub menu link, it will open the sub menu...
    // Not disabling the links will make sub menu's unreachable on touch devices!
    // A link with [href="#"] will always be disabled, regardless of this setting.
    // Disable the actual link in a particular mode:
    //   always|never|mobile|desktop
    disableSubMenuLink: 'always',
    // How fast should a sub menu open/close? (ms)
    slideSpeed: 500
});

相关链接

发表评论