Menú con CSS y HTML usando FLEX

↑ Me gusta (1)

En este ejercicio usamos la propiedad DISPLAY con el valor FLEX, escribimos menos en CSS y en HTML. Esto es una buena manera de hacer los menús hoy día. Trabajar con CSS es crear una estructura HTML y a partir de allí darle el formato y apariencia deseada.

En HTML sería

    <nav class="menu-main">
        <a href="#">Home</a>
        <a href="#" class="active">Informes</a>
        <a href="#">Personalización</a>
        <a href="#">Administrador</a>
        <a href="#">Comentarios</a>
        <a href="#">Perfíl</a>
        <a href="#">Ayuda</a>
    </nav>

Esto genera una lista ordenada sin mas, con viñetas y estructura estándar.. En CSS debemos crear los bloques necesarios para dar formato, en CSS tenemos.

body{
    margin: 0px;
    background: #d1d1d1;
}

.menu-main{
    display: flex;
    justify-content: space-between;
    background: #3b5998;
    border-bottom: 1px solid #29487d;
    height: 45px;
}

.menu-main a{
    flex: 1;
    font-family: arial;
    display: flex;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;    
    justify-content: center;
    align-items: center;
}

.menu-main a:hover{
    background: rgba(0,0,0, .1);
}

.menu-main a.active{
    background-color: #29487d;
}

Así terminamos el primer ejercicio... ¡Comenta y comparte!

  • Ernesto Canquiz

Italo Morales F. Italo Morales F. 6,800.00 XP