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 and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

Join the discussion