1

ウェブサイトに guidobouman の PanelSnap プラグインを使用しています。しかし、目的の効果を生み出すために少し微調整したいと思います。最初のパネルのナビゲーションを非表示にして、他のパネルに表示したいと思います。

http://jsfiddle.net/NDkZz/

これは私が今使っているコードです:

CSS

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  body {
    color: #ffffff;
    font-family: 'Lato';
    font-weight: 100;
    font-size: 32px;
  }

  h1 {
    font-weight: inherit;
    text-transform: uppercase;
    font-size: 250%;
    margin: 0;
  }

  a {
    color: inherit;
  }

  img {
    max-width: 100%;
  }

  p {
    max-width: 800px;
  }

  p.small,
  pre {
    font-size: 70%;
  }

  section {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #1abc9c;
  }

  section:nth-child(2n) {
    background: #16a085;
  }

  section section {
    background: #f1c40f;
  }

  section section:nth-child(2n) {
    background: #f39c12;
  }

  section pre {
    background: #16a085;
  }

  section:nth-child(2n) pre {
    background: #1abc9c;
  }

  .panels {
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
  }

  .menu {
    position: absolute;
    z-index: 100;
  }


  .menu a {
    display: block;
    width: 100%;
    padding: 25px;
    background: #0ff3ec;
    text-decoration: none;
    margin: 0 0 25px 0;
  }

  .menu a.active,
  .menu a:active,
  .menu a:hover {
    background: #1195f3;
  }



HTML

<section class="menu_demo">
  <div class="menu">
    <a href="" data-panel="first">
      First panel
    </a>
    <a href="" data-panel="second" class="active">
      Second panel
    </a>
    <a href="" data-panel="third">
      Third panel
    </a>
  </div>
  <div class="panels">
    <section data-panel="first">
      <h1>First</h1>
    </section>
    <section style="background-color: black;" data-panel="second">
      <h1>Second</h1>
    </section>
    <section data-panel="third">
      <h1>Third</h1>
    </section>
  </div>
</section>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://guidobouman.github.io/jquery-panelsnap/jquery.customEvents.js"></script>
<script src="http://guidobouman.github.io/jquery-panelsnap/jquery.panelSnap.js"></script>
<script>
  // Basic demo
  $('body').panelSnap();

  // Menu demo
  $('.menu_demo .panels').panelSnap({
    $menu: $('.menu_demo .menu')
  });
</script>
4

2 に答える 2

0

onSnapStartオプションで関数を渡すことで、これを簡単に行うことができます。

$('.menu_demo .panels').panelSnap({
    $menu: $('.menu_demo .menu'),
    onSnapStart: function($target) {
        if($target.find('h1').text() === "First") {
            //hide menu
        } else {
            //show menu
        }
    },
});

jQuery の animate 関数を使用してメニューを表示および非表示にする例を次に示します。

于 2013-12-19T20:08:22.687 に答える