Menu Flutuante Css

Postado: 3 de maio de 2022

Menu Flutuante Css

Os menus são componentes ou recursos de sites que oferece aos usuários acesso rápido e intuitivo às sessões do seu projeto. Através dos menus, você consegue oferecer aos visitantes do seu site uma porta de entrada para todo seu conteúdo.

Para criar um menu de navegação, precisamos unir duas grandes tecnologias, que é o HTML para fazer a marcação e o CSS para aplicar estilo as marcações.

Vamos adicionar o Código Html

Nesta seção, projetaremos uma estrutura simples na tag html nav. temos dentro da tag nav as seguintes tags: <label>, <ul>, <li> e <div> para criar a estrutura do nosso menu.

veja o código html abaixo.

<nav>

    <input type="checkbox" id="check">
    <label for="check" class="checkbtn"><i class="icon icon-bars"></i></label>
    <div class="logo">LOOP NERD</div>
    
    <ul>
        <li><a class="active" href="#">Início</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Serviços</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
    
</nav>

Vamos adicionar o Css

Nesta seção, usaremos algumas propriedades CSS para projetar o menu. para obter o efeito do menu flutuante utilizaremos o position:fixe no css.

nav {
    
    background:#5434af;
    width:100%;
    height:80px;
    margin-bottom:80px;
    float:left;
    position:fixed;

}

.logo {
    float:left;
    color: white;
    font-size: 35px;
    line-height: 80px;
    padding: 0 50px;
    font-weight: bold;
}

nav ul {
    float:right;
}

nav ul li {

    display: inline-block;
    line-height: 80px;
    margin: 0 5px;

}

nav ul li a {
    
    font-family: 'open_sansregular';
    color: #ffffff;
    font-size:1em;
    padding: 8px 15px;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration:none;

}

a.active, a:hover {

    background-color:#ffef00;
    color:#393939;
    transition:.6s;


}

.checkbtn {

    font-size:22px;
    color:#fff;
    float:right;
    line-height:80px;
    margin-right:20px;
    cursor:pointer;
    display:none;
}

#check {
    display: none;
}

@media (max-width: 952px){

    .logo{
        font-size: 22px;
        padding-left: 20px;
    }
    
    nav ul li a{
        font-size: 16px;
    }

}

@media (max-width: 858px){

    .checkbtn {
        display: block;
    }
    ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #1d075f;
        top: 80px;
        right: -100%;
        text-align: center;
        transition: all .5s;
    }
    nav ul li{
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }
    nav ul li a {
        font-size: 20px;
    }
    a:hover, a.active {
        background: none;
        color: #5434af;
    }
    #check:checked ~ ul {
      right: 0;
    }
}

Nesta seção, combinaremos as duas seções acima para criar um Menu Fixo Utilizando HTML e CSS.

Código Completo Veja o Resultado

Baixar Código Veja Funcionando

Publicado por: loopnerd

846 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.