Question

我正在使用guidobouman的PanelSnap插件访问我的网站。但我想稍微调整一下以创造所需的效果。我想在第一个面板上隐藏导航并在其他面板上显示。

这是我现在使用的代码：

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>

Answer 1

我不确定您是否打算在点击“第一面板”链接时隐藏“第一面板”/“第二面板”/“第三面板”链接（如果是这样，他们将如何再次看到菜单？）但如果是这样，这应该可以解决问题：

$('.menu a').click(function(){
    if($(this).attr('data-panel') == 'first'){
        $('.menu').hide();
    } else {
        $('.menu').show();
    }
});

http://jsfiddle.net/NDkZz/1/

Answer 2

您可以通过将选项中的函数传递给onSnapStart来轻松完成此操作：

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

Here's an example使用jQuery的animate函数来显示和隐藏菜单。

在First Panel - PanelSnap插件上隐藏导航

2 个答案: