How can I prevent navigation rendering as list before the CSS and Javascript are applied?

Question

I have navigation that is built with unordered list elements in HTML. I style it with CSS ( using PUREcss ). Jquery is used, as is a small JS function. These are the implementation instructions from PUREcss.

When the page loads, it always renders the list as normal html before rendering the navigation. What can I do to prevent the initial rendering of the list?

Answer 1

Based on Pure's example code, add the show() call there...

<script>
YUI({
    classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {

    var horizontalMenu = new Y.Menu({
        container         : '#demo-horizontal-menu',
        sourceNode        : '#std-menu-items',
        orientation       : 'horizontal',
        hideOnOutsideClick: false,
        hideOnClick       : false
    });

    horizontalMenu.render();
    horizontalMenu.show();

    $("#header-wrapper").show();
});
</script>