Question

我有一个仅显示在主屏幕上的导航栏，我试图将其显示在每个屏幕的div之外，以便无论在什么屏幕上都可以看到，但是唯一可行的方法是更改网格并将其复制到内部每个屏幕的div。

因此，现在导航栏可见，但仅在主屏幕上保持功能。当我在屏幕之间切换时，它只是一个蛋壳。

我的文件是main.html / main.css / main.js，每个屏幕（div）在单独的文件夹中都有自己的CSS文件。

我还保留了指向gitHub存储库的链接

https://github.com/shareazc/GDL002-social-network

标题标签中的内容是导航栏。

我尝试创建仅具有导航栏功能的另一个js文件夹，并成功附加到main.html。

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Poogle</title>

    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <link rel="stylesheet" type="text/css" href="styles/faq.css">
    <link rel="stylesheet" type="text/css" href="styles/suggestscreen.css">
</head>

<body>

    <main>

        <!---------- Home screen---------->
        <div class="page" id="homescreen">

            <header>

                <button class="headerelements btnmenu" id="btnmenu"><i class="fas fa-bars"></i></button>
                <input id="searchbar" class="headerelements" placeholder="Busca aquí lo que necesites">
                <div id="btnsearch" class="headerelements"><i class="fas fa-search"></i></div>

            </header>

           /*Divs with content of the screen*/
           /*Divs with content of the screen*/

        </div>

        <!---------- FAQ screen---------->

        <div class="page" id="faqscreen">

                <header>

                        <button class="headerelements btnmenu" id="btnmenu"><i class="fas fa-bars"></i></button>
                        <input id="searchbar" class="headerelements" placeholder="Busca aquí lo que necesites">
                        <div id="btnsearch" class="headerelements"><i class="fas fa-search"></i></div>

                </header>

            /*Divs with content of the screen*/
            /*Divs with content of the screen*/

        </div>

        <!---------- Suggest a place screen---------->

        <div class="page" id="suggestscreen">
                <header>

                        <button class="headerelements btnmenu" id="btnmenu"><i class="fas fa-bars"></i></button>
                        <input id="searchbar" class="headerelements" placeholder="Busca aquí lo que necesites">
                        <div id="btnsearch" class="headerelements"><i class="fas fa-search"></i></div>

                </header>

            /*Divs with content of the screen*/
            /*Divs with content of the screen*/

        </div>

    </main>

CSS


header {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 15vw 15vw 15vw 15vw 15vw 15vw 1fr;
    grid-template-areas: ". btnmenu searchbar searchbar searchbar searchbar btnsearch .";
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#homescreen {
    grid-area: content;
    grid-template-columns: 1fr 15vw 15vw 15vw 15vw 15vw 15vw 1fr;
    grid-template-rows: 3rem 0.5rem auto 3rem 0.5rem auto 0.5rem 3rem;
    grid-template-areas: "header header header header header header header header"". . . . . . . ."". mainimage mainimage mainimage mainimage mainimage mainimage ."". categories categories categories categories categories categories ."". . . . . . . ."". feed feed feed feed feed feed ."". . . . . . . ."
        "footer footer footer footer footer footer footer footer";
    /* visibility: visible; */
}

#suggestscreen {
    align-content: space-around;
    flex-direction: column;
    justify-content: center;
    color: #181818;
    grid-area: content;
    grid-template-columns: 20vw 0.5rem 60vw;
    grid-template-rows: 3rem auto auto 3rem 3rem 3rem 3rem 3rem 3rem 3rem 4rem 1rem;
    grid-row-gap: 0.5rem;
    grid-template-areas: "header header header"
        "suggestscreentitle suggestscreentitle suggestscreentitle"
        "suggestscreentext suggestscreentext suggestscreentext""suggestscreenname . suggestname"
        "suggestscreencategory . suggestcategory""suggestscreenwebsite . suggestwebsite"
        "suggestscreenaddress . suggestaddress""suggestscreentelephone . suggesttelephone"
        "suggestscreenschedule . suggestschedule""suggestscreenperks . suggestperks"". . submitsuggestion";
}

#faqscreen {
    /* display: none; */
    grid-area: content;
    grid-template-columns: auto;
    grid-template-rows: 3rem auto 1rem 2rem 0.5rem auto 0.5rem;
    grid-template-areas:
        "header"
        "faqimage"
        "."
        "faqtitle"
        "."
        "faqtext"
        ".";
}

JS

//OPEN & CLOSE SIDENAV MENU
document.getElementById('btnmenu').addEventListener('click', () => {
    document.getElementById('sidenavMenu').classList.add('open');
});
document.getElementById('menuCloseBtn').addEventListener('click', () => {
    document.getElementById('sidenavMenu').classList.remove('open');
});

//OPEN SIDEMENU DROPDOWN
document.getElementById('dropdownBtn').addEventListener('click', () => {
    document.getElementById('menuDropdown').classList.toggle('showDropdownMenu');
});

导航栏在屏幕单页应用程序更改时失去功能

0 个答案: