连接菜单

Question

我正在使用guidobouman的PanelSnap插件访问我的网站。我正在创建包含菜单的多个面板。我现在的问题是每个菜单也会移动其他面板上的面板，这些面板也包含一个菜单。有没有办法为每个面板创建一个单独的菜单？

连接菜单

第一小组第二小组第三小组

第一

第二

第三

<section class="menu_demo">
  <h1>
    Connected menu
  </h1>
  <div class="menu">
    <a href="" data-panel="first">
      First panel
    </a>
    <a href="" data-panel="second">
      Second panel
    </a>
    <a href="" data-panel="third">
      Third panel
    </a>
  </div>
  <div class="panels">
   <section data-panel="first" class="fourth">
      <h1>First</h1>
    </section>
    <section data-panel="second" class="fifth">
      <h1>Second</h1>
    </section>
    <section data-panel="third" class="sixth">
      <h1>Third</h1>
    </section>
  </div>
</section>

连接菜单

第一小组第二小组第三小组

第一

第二

第三

<style>
  @import url(http://fonts.googleapis.com/css?family=Lato:100);

  * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  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;
    padding: 50px;
    width: 100%;
    height: 100%;
    background: #1abc9c;
  }

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

  section section {
    background: #f1c40f;
  }
        section section.first {
    background: #fffabe;

  }

  section section.second {
    background: #fff200;
  }
  section section.third {
    background: #ffcf01;
  }

   section section.fourth {
    background: #febe10;
  }

  section section.fifth {
    background: #b9e5fb;
  }

  section section.sixth {
    background: #00b7f1;
  }

  section section.seventh {
    background: #008dcf;
  }

  section section.eighth {
    background: #18428f;
  }
  section section.ninth {
    background: #dac1dd;
  }



  section pre {
    background: #16a085;
  }

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

  .panels,
  .log,
  .menu,
  pre {
    position: absolute;
    top: 200px;
    bottom: 50px;
    right: 50px;
    left: 400px;
    overflow: scroll;
  }

  .log,
  .menu {
    right: auto;
    left: 50px;
    width: 300px;
  }

  pre {
    left: 50px;
    padding: 50px;
  }

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

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

  @media screen and (max-width: 1000px) {
    .panels,
    .log,
    .menu {
      top: 300px;
    }
  }
</style>

  jQuery(function($) {

    // Basic demo
    $('body').panelSnap();

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

    // Shared log function
    function log(type, action, $target) {

      var text = '<p>' + action + ':<br>' + $target.find('h1').text() + '</p>';
      $('.' + type + '_demo .log h2').after(text);

    }

    // Callback demo
    $('.callback_demo .panels').panelSnap({
      onSnapStart: function($target) {

        log('callback', 'onSnapStart', $target);

      },
      onSnapFinish: function($target) {

        log('callback', 'onSnapFinish', $target);

      },
      onActivate: function($target) {

        log('callback', 'onActivate', $target);

      }
    });

    // Event demo
    $('.event_demo .panels').panelSnap();

    $('.event_demo .panels').on('panelsnap:start', event_log);
    $('.event_demo .panels').on('panelsnap:finish', event_log);
    $('.event_demo .panels').on('panelsnap:activate', event_log);

    function event_log(e, $target) {

      log('event', e.type, $target);

    }

  });

Answer 1

插件的作者在这里。问题是您将单个实例绑定到所有滚动容器。您应该为每个容器创建一个panelnap实例。

使用单独的类应该起作用：

// Menu demo
$('.container_one .panels').panelSnap({
  $menu: $('.container_one .menu')
});
$('.container_two .panels').panelSnap({
  $menu: $('.container_two .menu')
});
$('.container_three .panels').panelSnap({
  $menu: $('.container_three .menu')
});

此外，不需要日志功能和回调演示即可获得所需的效果。您可以从代码中删除这些部分。

panelnap中的多个菜单

连接菜单

第一

第二

第三

连接菜单

第一

第二

第三

1 个答案: