Question

我正在尝试使用jquery导航。导航将在桌面上固定打开，但会在移动设备上关闭并根据要求打开。

我的目标。

1）左侧面板打开并在移动设备上将身体内容推到一边。

2）右侧面板完全相同，但也在右侧。

我已经创建了html，但似乎无法找到一个jquery解决方案。

任何想法？

干杯

保罗

http://jsfiddle.net/x3Rpk/

<div id="leftnav"> click to close and open on mobile device</div>
<div id="main-content">content her</div>
<div id="rightnav"> click close and open on mobile device</div>

Answer 1

Bootstrap插件：http://jasny.github.io/bootstrap/components/#navmenu-offcanvas

Zurb Foundation的插件：http://foundation.zurb.com/docs/components/offcanvas.html

或者如果您更喜欢构建自己的，下面使用jQuery和Bootstrap，但它可以免费构建。

DIY构建概念：http://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms

DIY构建演示：http://jsbin.com/xiviza/1/

HTML：

<body>
  <div id="site-wrapper">
    <div id="site-canvas">
      <div id="site-menu">
      </div>
      <a href="#" class="toggle-nav btn btn-lg btn-success" id="big-sexy"><i class="fa fa-bars"></i></a>
    </div>
  </div>
</body>

CSS：

#site-wrapper {
  background: pink;
  height: 1000px; /* Arbitrary. */
  overflow: hidden;  
}

#site-canvas {
  background: tan;
  height: 100%;
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}

#site-menu {
  background: yellow;
  width: 250px;
  height: 100%;
  position: absolute;
  left: -250px;
  padding: 15px;
}

#site-wrapper.show-nav #site-canvas {
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
}

JS：

$(function() {
  $('.toggle-nav').click(function() {
    $('#site-wrapper').toggleClass('show-nav');
  });
});

左右面板导航

1 个答案: