Menú Responsive con CSS y HTML

↑ Me gusta (1)

En este ejercicio trabajamos con responsive design, escribimos menos en CSS y en HTML, es un poco de CSS3. El diseño web adaptable o responsive web design, es una forma de diseño y desarrollo donde el único objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visitarlas.

Tenemos otro concepto que aprender, media query: Y consiste en método de CSS3 que permite adaptar la presentación del contenido a características del dispositivo. Por ejemplo podemos decir que el sitio web sea amarillo si en dispositivo tiene un ancho menor a 500px, sí es mayor que sea entonces azul.

Código HTML

    <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>

Estructura CSS

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;
}

@media (max-width: 768px) {
    
    .menu-main{
        height: auto;
        border-bottom: 0px;
        display: block;
    }
    
    .menu-main a{
        height: 45px;
        border-bottom: 1px solid #29487d;
    }

}

Visita nuestro material relacionado, para afianzar conceptos y ganar experiencia

  • Ernesto Canquiz

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