How to make the footer accompany the retractable menu

Asked

Viewed 62 times

0

Problem: I have a retractable menu and a footer on my online system. I’m not getting to make sure that when the menu is dried my footer can accompany the menu.

Source Code:

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%
}

What I expect from this solution?

Make it, when the user clicks the button to collect the footer writing menu can somehow accompany it.

javascript html jquery css

1 answer

0


I saw that you are using Bootstrap so it gets a little complicated to mess with the columnar grid. my suggestion is you take the total size of the footer, which is 100% and take away from it the width of the menu when opened, for this you will use in the width of footer the function calc() css. So if your menu has 300px when open you have to take 300px of the width of the footer, soon width: calc(100% - 300px). Right now 300px that you took out of the width you put margin-left in the footer, so it will "shrink" to the right.

inserir a descrição da imagem aqui

This is just a Bavarian model, you have to apply your project reality, I tried to make everything as simple as possible to be easy to understand.

<!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>

  • For my friend, it was very nice. Thank you very much.

  • @Thiagocorrea quiet my dear that good q helped

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.