HTML Menu html, preciso linkar paginas já feitas

Matheus Rafael Lima Matheus Rafael Lima · 18 de novembro de 2019

Bom dia pessoal, estou criando um menuzinho html para ajudar alguns clientes, porém, preciso linkar as paginas "de ajuda" já feitas ao clickar em alguma lacuna

Eu não faço ideia de como fazer isso sinceramente. Agradeço quem possa me ajudar (queria que a pagina abrisse na mesma aba do menu, mas acho que só com bootstrap

O código é esse:

<!DOCTYPE HTML>

<html>

<head>

<meta charset='utf-8'/>

<title>Ajuda</title>



<style>



body{

background-color:   #fff;

margin: 0px;

padding: 0px; 

}



header{

width: 100%;

height: 50px;

top:0;

left:0;

background-color: #0404B4;

position: fixed;

}



.menu-icon{

    position: fixed;

    font-size: 25px;

    font-weight: bold;

    padding: 5px;

    width: 40px;

    height: 40px;

    text-align: center;

    background-color: #0404B4 (155, 155, 155);

    color: #fff;

    cursor: pointer;

    transition: all .4s;

    left: 300px;

    top: 0;

}



.menu-icon:hover{

    background-color: #fff;

    color:#0404B4;

}



#chk{

    display: none;

    position: absolute;

}



.menu{

height: 100%;

position: fixed;

background-color: rgb(17, 17, 197);

top:0;

overflow: hidden;

transition: all .2s;



}    



#principal{

width: 300px;

left: -300px;



}   



ul{

list-style: none;



}    



ul li a{

    display: block;

    font-size: 18px;

    font-family: 'Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif';

    padding: 10px;

    border-bottom: solid 2px; 

    color: #ccc;

    text-decoration: none;

    transition: all .2s;

}



ul li span{

float: right;

padding-right: 10px;

}



ul li a:hover{

 background-color: #2E64FE;

}



.voltar{

    margin-top: 40px;

    background-color: #0B2161;

    

}



.bg{

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    position: fixed;

    background-color: #1A1919;

    display: none



}



#chk:checked ~.bg{

    display: block;



}



#chk:checked ~ #principal{

    transform: translateX(300px);

}



#sistemaerp,

#sistemapdv{

width: 250px;

left: -250px;

}



#sistemaerp:target,

#sistemapdv:target{

transform: translateX(250px);

box-shadow: 2px 2px 5px 2px rgba(0,0,0,.5);

}



element.style {

    padding: 0px;

}    

    </style>



</head>




<header></header>



<input type="checkbox" id="chk">

<label for="chk" class="menu-icon">☰</label>



<div class="bg"></div>




<nav class="menu" id="principal">

        

<ul style="padding: 0px;">

<li><a href="" class="voltar"> Voltar </a> </li>

<li><a href="#sistemaerp">Sistema ERP <span>+</span></a> </li>

<li><a href="#sistemapdv">Sistema PDV <span>+</span></a> </li>



</ul>

</nav>

<nav class="menu" id="sistemaerp">

    <ul style="padding: 0;">

            <li><a href="#" class="voltar"> Voltar </a> </li>

            <li><a href="#">como .. <span>+</span></a> </li>

            <li><a href="#">como ... <span>+</span></a> </li>  

    </ul>

    </nav>



    <nav class="menu" id="sistemapdv">

            <ul style="padding: 0;">

                    <li><a href="#" class="voltar"> Voltar </a> </li>

                    <li><a href="#">como ...... <span>+</span></a> </li>  

                    <li><a href="#">como .... <span>+</span></a> </li>  

            </ul>

            </nav>




            

</body>

</html>

DiF · 18 de novembro de 2019

@Matheus Rafael Lima Matheus Rafael Lima Basta acrescentar a URL no elemento de hipertexto que você já fez.

<li><a href="ajuda.html">como ... <span>+</span></a> </li>

Matheus Rafael Lima Matheus Rafael Lima · 18 de novembro de 2019

@DiF Obrigado, mas imagino que ao fazer isso, iria abrir uma nova aba no navegador, eu queria achar uma maneira de que ele abrisse na mesma aba

DiF · 18 de novembro de 2019

@Matheus Rafael Lima Matheus Rafael Lima Não. vai abrir na mesma, a menos que informe que vai abrir em uma nova janela com target="_blank"

Matheus Rafael Lima Matheus Rafael Lima · 20 de novembro de 2019

@DiF Eu não estou sabendo te explicar, tipo, quando eu clicar num botão eu quero que a pagina carregue no layout e não que ela abra uma nova pagina com o mesmo menu

DiF · 20 de novembro de 2019

@Matheus Rafael Lima Matheus Rafael Lima Ok, desta forma é com ajax que vai ter que fazer.

Exemplo simples, não copie, estude dele:

<ul id="menu">
  <li><a href="sobre.html"> Sobre</a></li>
  <li><a href="contato.html"> Contato</a></li>
  <li><a href="info.html"> Informações</a></li>
</ul>


<div id="conteudo"></div>

$("#menu").on("click", "a", function (e) {
    $("#conteudo").load($(this).attr("href"));
    e.preventDefault();
});

Basicamente isso. Ao clicar no link, o (this).attr("href") pega o link e carrega o conteúdo dele no elemento div $("#conteudo").

Deste modo. As páginas no link só precisam ter o "conteúdo" e os elementos do conteúdo, então não precisa criar toda a estrutura HTML.

Matheus Rafael Lima Matheus Rafael Lima · 22 de novembro de 2019

@DiF Obrigado, vou estar estudando o ajax

Matheus Rafael Lima Matheus Rafael Lima · 25 de novembro de 2019

@DiF e se eu usasse um iframe para puxar a pagina? não seria mais fácil?

DiF · 25 de novembro de 2019

@Matheus Rafael Lima Matheus Rafael Lima Iframe é um elemento antigo... melhor evitar.

Ajax é a melhor escolha, já que você quer carregar um conteúdo em um determinado lugar.

Contudo, você aderir se quiser, por uma versão "one-page" onde todos os links são baseados em âncoras, tudo na mesma página. Ou seja, quando clicar num link, rolará a página até o lugar destinado.

Matheus Rafael Lima Matheus Rafael Lima · 25 de novembro de 2019

42 minutos atrás, DiF disse:

@Matheus Rafael Lima Matheus Rafael Lima Iframe é um elemento antigo... melhor evitar.

Ajax é a melhor escolha, já que você quer carregar um conteúdo em um determinado lugar.

Contudo, você aderir se quiser, por uma versão "one-page" onde todos os links são baseados em âncoras, tudo na mesma página. Ou seja, quando clicar num link, rolará a página até o lugar destinado.

Então, mas o ajax precisa de um servidor, eu não vou upar eu vou colocar esse menu dentro do sistema pdv / erp para o cliente usar mesmo se estiver sem internet

DiF · 25 de novembro de 2019

15 minutos atrás, Matheus Rafael Lima Matheus Rafael Lima disse:

pdv / erp para o cliente usar mesmo se estiver sem internet

Bem.. aí já não é minha praia. Só entendo de programação web baseado em servidores online.

brund321 · 25 de novembro de 2019

@Matheus Rafael Lima Matheus Rafael Lima Oi, tudo bem? Com JS você pode usar a manipulação do DOM para fazer isso, tem algumas maneiras para alcançar o que você deseja. Fiz um pequeno exemplo de uma dessas maneiras: https://codepen.io/bdriguesdev/pen/WNNqegx?editors=1111

Eu recomendo utilizar React, Vue ou Angular para SPA(single page applications) se você já tiver alguma experiência com eles ou deseja aprender.

Abraço.