Jquery 左右面板导航_Jquery_Mobile_Panel_Slidetoggle

Jquery 左右面板导航

jquery mobile

Jquery 左右面板导航,jquery,mobile,panel,slidetoggle,Jquery,Mobile,Panel,Slidetoggle,我正在尝试使用jquery导航。导航将固定在桌面上打开，但将在移动设备上关闭，并根据请求打开我的目标 1个左面板，用于在移动设备上打开并将主体内容推到一边 2个右面板，完全相同，但也在右侧我已经创建了html，但我似乎找不到jquery解决方案有什么想法吗干杯保罗用于引导的插件： Zurb基金会插件：或者，如果您喜欢构建自己的，下面使用jQuery和Bootstrap，但是可以不使用它们来构建 DIY建造的概念： DIY构建演示： HTML: JS: 你有没有找到一个满意的解决方案

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

我的目标

1个左面板，用于在移动设备上打开并将主体内容推到一边

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

我已经创建了html，但我似乎找不到jquery解决方案

有什么想法吗

干杯

保罗

用于引导的插件：

Zurb基金会插件：

或者，如果您喜欢构建自己的，下面使用jQuery和Bootstrap，但是可以不使用它们来构建

DIY建造的概念：

DIY构建演示：

HTML:

JS:

你有没有找到一个满意的解决方案？

<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>

<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>

#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);
}

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