Question

我的导航是使用HTML中的无序列表元素构建的。我用CSS设置它（使用PUREcss）。使用Jquery，以及一个小的JS函数。这些是implementation instructions from PUREcss。

当页面加载时，它总是在渲染导航之前将列表呈现为普通的html。我该怎么做才能阻止列表的初始呈现？

Initial Rendering of List

Final rendering of Navigation

Answer 1

为所有javascript使用文档准备就绪：

$(document).ready(function() {
    //all js
}

并将你的css放在脑中，所以在加载DOM元素之前所有内容都会呈现：

<head>
<style></style>
<script></script>
</head>
<body>
    <!--All your html-->
</body>

Answer 2

根据Pure's example code，在那里添加show()电话......

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

在应用CSS和Javascript之前，如何防止导航呈现为列表？

2 个答案: