Menú Responsive html css – Con Código

En este tutorial vamos a crear un menú responsive html css de forma rápida y sencilla aplicando float. Puedes ver y descargar el contenido.

Para este ejemplo sólo utilizaremos CSS por tanto es un menú responsive css.

Recuerda que las media querys sirven para el responsive design y puedes darles valores de acuerdo a tu criterio o necesidades, por el momento no existe un estándar específico de medidas.

Menú Responsive HTML CSS

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menú Responsive</title>
    <link rel="stylesheet" href="estilos.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fas fa-bars"></i>
        </label>
        <a href="#" class="enlace">
            <img src="logo.png" alt="" class="logo">
        </a>
        <ul>
            <li><a class="active" href="#">Inicio</a></li>
            <li><a href="#">Nosotros</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Portafolio</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
    <section></section>
</body>
</html>

Código CSS

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

nav{
    background: #2fcdcd;
    height: 80px;
    width: 100%;
}
.enlace{
    position: absolute;
    padding: 20px 50px;
}
.logo{
    height: 40px;
}
nav ul{
    float: right;
    margin-right: 20px;
}
nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}
nav ul li a{
    color: #fff;
    font-size: 18px;
    padding: 7px 13px;
    border-radius: 3px;
    text-transform: uppercase;
}
li a.active, li a:hover{
    background: #000090;
    transition: .5s;
}
.checkbtn{
    font-size: 30px;
    color: #fff;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}
section{
    background: url(fondo.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    height: calc(100vh - 80px);
}

@media (max-width: 952px){
    .enlace{
        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: #2c3e50;
        top: 80px;
        left: -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;
    }
    li a:hover, li a.active{
        background: none;
        color: red;
    }
    #check:checked ~ ul{
        left:0;
    }
}

Con eso tenemos un menú responsive css, si deseas puedes descargar el código completo con todas las imágenes:

Si tienes alguna duda puedes dejarlo en los comentarios, trataremos de responder muy pronto.

ESCRIBE AQUÍ TUS CONSULTAS O PREGUNTAS Y TE RESPONDEREMOS EN BREVE

Escribe tu pregunta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *