0

Problema: Tenho um menu retrátil e um rodapé em meu sistema online. Eu não estou conseguindo fazer com que, quando o menu for enxugado o meu rodapé possa acompanhar o menu.


Código Fonte:

Html    
        <footer id="footer" style="margin-top: 40px;">
            <div class="col-xs-12">
                <div class="col-md-6">
                    <p class="text-white">Nome da Empresa © 2011 - 2019</p>
                    <p class="text-white">CNPJ: 11111111/111110001-54</p>
                </div>

                <div class="col-md-6">
                    teste
                    teste
                </div>
            </div>
        </footer>

CSS

    #footer {
    position: unset;
    height: 110px;
    bottom: 0;
    width: 100%;

    background-color: #133c50;
}

footer p {
    padding-left: 7%
}

O que eu espero dessa solução?

Fazer com que, quando o usuário clicar no botão para recolher o menu a escrita do rodapé possa de alguma forma acompanha-lo.


1 Resposta 1

0

Vi que vc está usando Bootstrap então fica um pouco complicado mexer com o grid de colunar. a minha sugestão é vc pegar o tamanho total do footer, que é 100% e tirar dele a largura do menu quando aberto, para isso vc vai usar no width do footer a função calc() do css. Então se seu menu tem 300px quando aberto vc tem que tirar 300px da largura do footer, logo width: calc(100% - 300px). Agora esses mesmo 300px que vc tirou da largura vc coloca de margin-left no footer, assim ele vai "encolher" para a direita.

inserir a descrição da imagem aqui

Esse é só um modelo básio, vc tem que aplicar a sua realidade do projeto, tentei deixar tudo o mais simples possível para ficar de fácil entendimento.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /> -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
#footer {
    position: unset;
    height: 110px;
    bottom: 0;
    width: 100%;

    background-color: #133c50;

    border-right: 10px solid limegreen;
    color: #fff;
    width: calc(100% - 100px);
    margin-left: 100px;
    transition: all linear 300ms;
}

footer p {
    padding-left: 7%
}

#footer.ativo {
    width: calc(100% - 300px);
    margin-left: 300px;
}

.menu {
    width: 100px;
    background-color: red;
    transition: all linear 300ms;
}
.menu.ativo {
    width: 300px;
    background-color: red;
}
</style>
</head>

<body>

    <button id="meuBtn">abre menu</button>

    <div id="menu" class="menu">
        meu menu
    </div>
    <footer id="footer" style="margin-top: 40px;">
        <div class="col-xs-12">
            <div class="col-md-6">
                <p class="text-white">Nome da Empresa © 2011 - 2019</p>
                <p class="text-white">CNPJ: 11111111/111110001-54</p>
            </div>

            <div class="col-md-6">
                teste
                teste
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
    const meuBtn = document.getElementById('meuBtn');

    meuBtn.addEventListener('click', abreMenu);

    function abreMenu() {
        document.getElementById('footer').classList.toggle('ativo');
        document.getElementById('menu').classList.toggle('ativo');
    }
    </script>
</body>

</html>

2
  • poxa meu amigo, ficou muito bacana. Muito obrigado. 5/07/2019 às 20:21
  • @ThiagoCorrea tranquilo meu caro que bom q ajudou
    – hugocsl
    5/07/2019 às 21:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .