如何设置默认在jQuery模板中打开的导航页

Question

我们下载了html模板：https://codyhouse.co/gem/sliding-panels-template。

至于整个页面的导航，.cd-primary-nav放在.cd-projects-container下面.当用户单击.cd-nav-trigger时，.slide-out类将被添加到项目预览中，以显示导航。

我们要更改全页导航的位置，把它放在cd-projects-容器上.换句话说，我们希望设置默认打开的导航页.。

我有基本的css知识，但我不能做我们想做的。有人能帮我解释一下它的工作原理吗？提前谢谢。

Answer 1

试试这个：

1. 克隆这个回购https://github.com/CodyHouse/sliding-panels-template (这是原始模板)。你通过的另一个回购是不同的)。
2. 在代码中，进行以下七个更改：

    // In style.css
    // at the end, that is line 788, add:
    .hide-in-default { opacity: 0; }


    // In index.html
    // Add class .nav-visible to `<a>` in line 16
    <a class="cd-nav-trigger cd-text-replace nav-visible" href="#primary-nav">Menu<span aria-hidden="true" class="cd-icon"></span></a>

    // Add class .hide-in-default to `<div>` in line 18:
    <div class="cd-projects-container hide-in-default">

    // replace line 134 with:
    <nav class="cd-primary-nav nav-visible nav-clickable" id="primary-nav">


    // In main.js
    // in line 29 add:
    removeHideInDefault();

    // in line 67 add:
    function removeHideInDefault() {
        try {
            var projectsContainer = document.querySelector('.cd-projects-container');
            var isHidden = projectsContainer && projectsContainer.classList.contains('hide-in-default');
            if (isHidden) projectsContainer.classList.remove('hide-in-default');
        } catch (reason) {
            console.error(reason);
        }
    }

    // finally, replace line 80 with:
    projectPreview.addClass('bg-loaded slide-out');

希望能帮上忙。