在第一個面板上隱藏導航 - PanelSnap插件

我在我的網站上使用guidobouman的PanelSnap插件。但我想稍微調整一下以創建所需的效果。我想將導航隱藏在第一個面板上並顯示在其他面板上。在第一個面板上隱藏導航 - 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>

來源

2013-08-21 Twana

我不是S如果你打算隱藏「第一面板」/「第二面板」/「第三面板」鏈接，當他們點擊「第一面板」鏈接時（如果是這樣，他們將如何再次看到菜單？）但如果是這樣，這個使用jQuery的animate函數來顯示和隱藏菜單

$('.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：應該做的伎倆：

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

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

來源

2013-08-21 03:30:03

謝謝你的回答萊昂納多。但它不能像它應該那樣工作。當你點擊第一個面板時，菜單消失。這很好。但是當你從面板1滾動到其他面板。菜單不會顯示。 – Twana

你可以通過一個功能選項做到這一點容易onSnapStart 。

來源

2013-12-19 20:08:22 ringstaff

在第一個面板上隱藏導航 - PanelSnap插件

回答

相關問題