2016-09-01 1 views
1

first off Ich bin ziemlich neu in Webdesign im Allgemeinen, so hoffe ich, meine Frage ist nicht zu dumm. Ich baue eine Website mit Fullpage js und habe die Abschnitte und das allgemeine Layout ziemlich fertig gemacht. Jetzt möchte ich, dass das feste Menü auf der rechten Seite auf allen Seiten mit Ausnahme der ersten angezeigt wird. Ich suchte nach dieser Frage und fand eine Antwort, aber es funktioniert nicht für mich. Das ist mein Menü:fullpage js menu wont verstecken auf der ersten Seite

<ul id="menu"> 
    <li data-menuanchor="Home" class="active"><a href="#Home">Home</a></li> 
    <li data-menuanchor="About"><a href="#About">About</a></li> 
    <li data-menuanchor="Classes"><a href="#Classes">Classes</a></li> 
    <li data-menuanchor="pgClasses"><a href="#pgClasses">pgClasses</a></li> 
    <li data-menuanchor="Contact"><a href="#Contact">Contact</a></li> 
</ul> 

seine innerhalb des Body-Tag, aber außerhalb des #fullpage.

Hier ist meine js Datei mit der Funktion, die ich gefunden:

$(document).ready(function() { 
    "use strict"; 

    $('#fullpage').fullpage({ 
     verticalCentered: true, 
     scrollingSpeed: 1200, 
     css3: true, 
     afterLoad: function(anchorLink, index) { 
      if (index > 1) { 
       $("#menu").fadeTo("slow", 1); 
      } 
     }, 
     onLeave: function(index, nextIndex, direction) { 
      if (index === 2 && direction === 'up') { 
       $("#menu").fadeTo("slow", 0); 
      } 
     } 
    }); 
}); 

Danke für die Hilfe im Voraus.

Update: Ich habe gerade versucht, auch ein Header-Menü in meinen Code aufzunehmen, der auch nur ab Abschnitt 2 angezeigt werden soll. Ich verwendet, um dieses

<header><ul id="topmenu"> 
    <li data-menuanchor="Home"><a href="#Home">Home</a></li> 
    <li data-menuanchor="About"><a href="#About">About</a></li> 
    <li data-menuanchor="Classes"><a href="#Classes">Classes</a></li> 
    <li data-menuanchor="pgClasses"><a href="#pgClasses">pgClasses</a></li> 
    <li data-menuanchor="Contact"><a href="#Contact">Contact</a></li> 
    </ul></header> 

und diese in der js-Datei:

$(document).ready(function() { 
"use strict"; 
$('#fullpage').fullpage({ 
verticalCentered: true, 
scrollingSpeed: 1200, 
css3: true, 
afterLoad: function(anchorLink, index){ 
    if (index === 1) { 
     $("header").fadeTo("fast",0); 
    } 
if (index > 1){ 
$("header").fadeTo("slow",1); 
} 
}, 
onLeave: function(index, nextIndex, direction){ 
if (index === 2 && direction === 'up') { 
$("header").fadeTo("slow",0); 
} 
}, 

und aus irgendeinem Grund funktioniert es für den Header. Wenn ich alle "header" durch #menu tho ersetzen, tut es immer noch nichts.

Offenbar ändert sich das #menu zu ul funktioniert.

+0

Schwierig, ohne eine Reproduktion zu helfen. – Alvaro

Antwort

0

Ich habe dies auf die CSS-Datei der blattgr Demo auf http://alvarotrigo.com/fullPage

.fp-viewing-firstPage #menu { 
    visibility: hidden; 
} 

Es funktioniert gut. Offensichtlich müssen Sie #menu zu #Menu changte.

+0

Leider scheint nichts für mich zu tun. Danke trotzdem Mann. –

Verwandte Themen