Javascript Informações dentro de uma NavBar

Lmark · 9 de janeiro de 2021

Boa tarde.

Estou estudando e me veio uma ideia de inserir informações em uma navbar que aparece lateralmente. Como Eu posso fazer isso aparecer dentro do menu, que no caso é “About”? Quando clico no menu About a tela é preenchida com a todo o background da NavBar.

Foto do menu

Foto 1: A Navbar aparece quando aperto sobre um botão

Foto 2: (E minha dúvida): Quando aperto sobre o menu "About" a tela é completamente tomada pelo menu. E eu gostaria de inserir informações na parte livre.

Como posso fazer isso?

Klash · 9 de janeiro de 2021

Olá @Lmark

Posta o código que você fez até agora, por favor.

Att,

Lmark · 9 de janeiro de 2021

@Klash Boa tarde. Consegui resolver meu problema com gambiarra. O código foi esse:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <script src="JS/script.js"></script>
</head>

<body>

    <div id="mudar">
        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

            <div id="hiddenT">
                <a id="teste" href="#" onclick="expand()">Home</a>
                <a id="teste" onclick="expandAbout()">About</a>
                <a id="teste" href="#" onclick="expand()">Something</a>
                <a id="teste" href="#" onclick="expandContact()">Contact</a>
            </div>

            <!-- Expande a pagina About -->
            <div class="about" id="aboutPage">

                <h1>About</h1>
                <img  src="Images/Capture.PNG" alt="some text" width=500 height=500>

            </div>

            <div class="contact" id="contactPage">

                <h1 style="color: aliceblue;">Contact</h1>

            </div>

        </div>

        <div id="main">

            <span id="mainSymbol" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

        </div>



    </div>

    <h1>Site</h1>



</body>

</html>

JavaScript


// Abre a Nav
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.getElementById("mainSymbol").style.visibility = "hidden";
    document.getElementById("aboutPage").style.display = 'none';
    document.getElementById("contactPage").style.display = 'none';

}

// Expande a pagina About
function expandAbout() {
    document.getElementById("mySidenav").style.width = "100%";
    document.getElementById("hiddenT").style.visibility = "hidden";
    document.getElementById("aboutPage").style.display = 'block';


}

// Expande a pagina Contact
function expandContact() {
    document.getElementById("mySidenav").style.width = "100%";
    document.getElementById("hiddenT").style.visibility = "hidden";
    document.getElementById("contactPage").style.display = 'block';


}


// Fecha a nav
function closeNav() {



    // 
    if (document.getElementById("mySidenav").style.width == "100%") {

        document.getElementById("mySidenav").style.width = "250px";

        document.getElementById("hiddenT").style.visibility = "visible";

        document.getElementById("aboutPage").style.display = 'none';

        document.getElementById("contactPage").style.display = 'none';


    }

    else if (document.getElementById("mySidenav").style.width == "0px") {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("aboutPage").style.visibility = "hidden";

        document.getElementById("contactPage").style.visibility = "hidden";



    }

    else {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        document.getElementById("mainSymbol").style.visibility = "visible";


    }

}