Menu Flutuante Css

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