Lmark
-
Posts
3 -
Cadastrado em
-
Última visita
-
Javascript Informações dentro de uma NavBar
Lmark respondeu ao tópico de Lmark em Web e banco de dados
@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()">×</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()">☰</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"; } } -
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?
-
Olá amigos, eu peguei emprestado com um amigo um Orange pi, e nem eu e nem ele sabemos se funciona. Acho que encontrei qual o cabo que liga ele, mas o que eu gostaria de saber se existe uma outra forma de ligar o Orange pi. Queria tentar antes de comprar um cabo. Desde já, obrigado!
Sobre o Clube do Hardware
No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais
Direitos autorais
Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais
