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

Question

我的导航是使用 HTML 中的无序列表元素构建的。我用 CSS 设置样式（使用 PUREcss ). Jquery is used, as is a small JS function. These are the implementation instructions from PUREcss.

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

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 之前，如何防止导航呈现为列表？

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

javascript

jquery

css

dom

yui-pure-css