1

我正在尝试使用 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>
4

1 回答 1

0

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

Zurb 基金会插件：http: //foundation.zurb.com/docs/components/offcanvas.html

或者，如果您更喜欢自己构建，以下使用 jQuery 和 Bootstrap，但也可以不使用这些构建。

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

DIY Build 演示：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');
  });
});
于 2014-07-22T03:48:16.987 回答