Навигационная панель потеряла функцию при смене экрана приложения на одной странице - PullRequest
Новая
       15

Навигационная панель потеряла функцию при смене экрана приложения на одной странице

0 голосов
/ 04 апреля 2019

У меня есть панель навигации, которая отображалась только на домашнем экране, я пытался вывести ее из 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');
});
...