Question

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

对于整页导航，.cd-primary-nav位于.cd-projects-container下方。当用户单击.cd-nav-trigger时，.slide-out类将添加到项目预览中以显示导航。

我们要更改整页导航的位置，将其放在cd-projects-container上。换句话说，我们想将导航页面设置为默认打开。

我对CSS有基本的了解，但是我做不到我们想要的。有人可以帮忙解释一下它的工作原理吗？预先感谢。

Answer 1

尝试一下：

克隆此存储库https://github.com/CodyHouse/sliding-panels-template（这是原始模板。您传递的另一个存储库是不同的。）
在代码中，进行以下七个更改：

    // 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');

希望有帮助。

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

1 个答案: