Ir ao conteúdo
  • Cadastre-se

Matheus Rafael Lima Matheus Rafael Lima

Membro Júnior
  • Posts

    6
  • Cadastrado em

  • Última visita

posts postados por Matheus Rafael Lima Matheus Rafael Lima

  1. 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 

     

  2. 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>

     

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

×
×
  • Criar novo...

 

GRÁTIS: ebook Redes Wi-Fi – 2ª Edição

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!