CODEWITHSUNDEEP
javascriptjqueryhtmlfullpage.js
Hans_Gruber
Hans_Gruber

Reputation: 11

fullpage js menu wont hide on first page

first off I'm fairly new to webdesign in general so I hope my question is not too stupid. I'm building a website with fullpage js and got the sections and general layout pretty much done. Now I'd like for the fixed menu on the right side to show on all pages except the first one. I searched for this question and found an answer but it wont work for me. This is my menu:

<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>

its within the body tag but outside the #fullpage.

Here's my js file with the function I found:

$(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);
            }
        }
    });
});

Thanks for the help in advance.

Update: I just tried to also include a header menu into my code that is supposed to only show from section 2 onwards as well. I used this 

<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>

and this in the js file:

$(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);
}
},

and for some reason it is working for the header. If I replace all the "header" with #menu tho it still does nothing.

Apparently changing the #menu to ul works.

Upvotes: 1

Views: 471

Answers (1)

moe
moe

Reputation: 1806

I added this to the css file of the fullpage demo at http://alvarotrigo.com/fullPage 

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

It works fine. Obviously you need to changte #menu to #Menu.

Upvotes: 1

Related Questions