Ajuda com iframe em menu html

26/11/2019

Bom dia pessoal, estou desenvolvendo um arquivo de ajuda, onde o cliente ira abrir o menu e selecionar as op��es, quero que ele funcione tanto se o cliente estiver online quanto offline.
Criei um iframe para puxar as paginas de ajuda j� feitas, porem quando selecione alguma op��o a pagina precisa ser atualizada para que seja carregada a outra pagina. queria que voc�s me ajudassem a ter uma solu��o ou alguma ideia de como melhorar esse iframe, lembrando que preciso que a pagina seja carregada ao ser clicada
Codigo:

<!DOCTYPE HTML>
<html>

<body>
    <iframe seamless width="100%" style="height: 100vh" name="iframe_a"></iframe>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
        <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="pdv_pagamento.htm" target="iframe_a">Pagamento pelo pdv <span>+</span></a></li>
            <li><a href="#">como .... <span>+</span></a> </li>

        </ul>
    </nav>



</body>

</html>

Vinicius Fernandes

Curtir t�pico + 0

Responder