javascript 菜单deNavegaçãoPadrão

Posted 2021-05-03

<div class="section section-header">
    <div class="container">
        <div class="header-direita">
            <a href="" class="header-logo">
                <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="">
            </a>    
        </div>
        <a href="" class="header-burger js-abre-menu">
            <i class="fa fa-bars" aria-hidden="true"></i>
        </a>
        <div class="header-esquerda">
            <ul class="header-menu">
                <li><a href="">Sobre</a></li>
                <li><a href="">História</a></li>
                <li><a href="">Detalhes</a></li>
                <li><a href="">Contato</a></li>
            </ul>
        </div>        
    </div>
</div>

.section-header{
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    padding: 20px 0;
    z-index: 100;
    &.fundo{
        background-color: #000;
        box-shadow: 0px 2px 8px 0px rgba(#000,0.3);
    }
    &.fixo{
        position: fixed;
        top: 0;
        left: 0;        
    }
    .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .header-logo{
        display: block;
        img{
            display: block;
        }
    }
    .header-menu{
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
        li{
            margin-left: 30px;
        }
    }
    .header-burger{
        display: none;
        color: #fff;
        font-size: 32px;
        line-height: 1;
    }
    @media screen and (max-width: $mobile) {
        padding: 20px 10px;
        //transition: background-color 0.2s;
        min-height: 0;
        .header-logo img{
            max-height: 32px;
        }
        .header-esquerda{
            display: none;
        }    
        .header-burger{
            display: block;
        }
        &.ativo{
            width: 100%;
            min-height: 100%;
            background-color: #000;
            .container{
                flex-wrap: wrap;    
            }            
            .header-esquerda{
                display: block;
                width: 100%;
            }
            .header-menu{
                flex-direction: column;
                align-items: flex-start;
                padding-top: 60px;
                li{
                    margin-left: 0;
                    margin-bottom: 30px;
                }
            }
        }
    }
}

$('.js-abre-menu').on('click', function(e){
    e.preventDefault();
    $('.section-header').toggleClass('ativo');
});