Helping you build a better website
(and other interesting web stuff)

CSSHTMLjQueryWordPress
Silva Web Designs - Blog

Bootstrap 4 – Barra de navegação móvel a deslizar da esquerda para a direita

Pretende alterar o comportamento padrão da barra de navegação do Bootstrap 4? Bem, você está no lugar certo. O menu padrão para celular é um hamburger menu, que, quando clicado, deslizará para os itens.

Existem várias maneiras de fazer isso usando jQuery / JavaScript, mas a melhor maneira, na minha opinião, é usar apenas CSS à moda antiga.

Para fazer isso, podemos substituir os estilos de transição para o navbar-collapse da seguinte maneira:

Navegação móvel – Deslizar da esquerda


@media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
    }
    .navbar-collapse.collapsing {
        height: auto;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }
    .navbar-collapse.show {
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
    }
}

Navegação móvel – Deslizar da direita


@media (max-width: 992px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        right: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
        transition: all 0.3s ease;
        display: block;
    }
    .navbar-collapse.collapsing {
        height: auto !important;
        margin-right: 50%;
        transition: all 0.3s ease;
        display: block;
    }
    .navbar-collapse.show {
        right: 0;
    }
}

Espero que este tutorial rápido o tenha ajudado. Se precisar de mais assistência, deixe um comentário abaixo.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Posted in CSS

Join the discussion