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 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');
  });
});
于 2014-07-22T03:48:16.987 に答える