¿Cómo hacer o diseñar un menu responsive con CSS?

Para diseñar un menu responsive usamos CSS en menus simples, JS para darle interactividad también podemos usar Bootstrap para agilizar el desarrollo web

Suscríbete a nuestro canal en Youtube

DISEÑAR UN MENU RESPONSIVE PARA UNA PÁGINA WEB

El diseño de menus responsivos o adaptables son casi imprescindibles en cualquier desarrollo web, que tenga una buena cantidad de información a mostrar. Sirven para poder acceder a las diferentes secciones por medio de enlaces. Ok, ahora ¿Qué significada responsive? o tambien llamado responsivo o adaptable, sencillamente significa dicho menu podemos verlo tanto para versión de escritorio, es decir pcs, laptops, smartv como tambien para versión móvil como celulares de todo tamaño, smartwatch, etc, con el diseño modifcado es decir adaptable.

INDICE DE CONTENIDOS

¿Qué es un menú de navegación?
Los Menus responsivos para página webs
¿Cómo diseñar un menu responsive solo con CSS?
1. Aplicando solo links a hrefs
2. Aplicando listas ul li
3. Aplicando flexbox
¿Cómo diseñar un menu responsive solo con CSS y JAVASCRIPT?
1. Aplicando interactividad y animaciones
¿Cómo diseñar un menu responsive con Bootstrap?
1. Aplicando
Conclusión del tutorial

¿Qué es un menú de navegación?

Un menu de navegación es un sistema de interconexión entre las diferentes páginas o secciones que componen un sitio web propiamente dicho, es sistema de interconexión funciona con etiquetas de enlace como son "a hrefs" generalmente llevan la dirección (url) de la sección o recurso solicitado. Entonces sirven para poder navegar a través de enlaces entre la diferentes secciones del sitio web o enlaces externos a recursos u otras sitios web.

¿Describiendo los tipos menus responsives?

Existen mucho tipos de menus, en este tutorial solo vamos a enfocarnos según el diseño y podemos declarar 2 tipos que son los siguientes :

Menus de un solo nivel ... este tipo de menus son ideales para hacer SEO de una página web
Menus de varios niveles... ofrecen un acceso mucho más rápido y organizado

Buscar el mejor tipo de menu para un sitio web, pues te digo que depende mucho del tipo y función del sitio web.

¿Cómo diseñar menus responsivos?

Es necesario tengas conocimientos de HTML, CSS, JAVASCRIPT.

¿Cómo diseñar un menu responsive solo con CSS?

¿Cómo crear un menu responsive solo con CSS y JAVASCRIPT?

<!DOCTYPE html>
<html lang="es">
<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>MENU RESPONSIVE</title>
</head>
<body>
    <nav>
        <div class="logo"> <a href="/">LOGOTIPO</a></div>
        <div class="menu" id="_menu">
            <a href="">Link</a>
            <a href="">Link</a>
            <a href="">Link</a>
        </div>
        <div class="hamburguesa" id="_hamburguesa">
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                </svg>
            </span>
        </div>
    </nav>
    <style>
        body{ margin: 0;}
        nav{
            display: grid;
            grid-template-columns: auto 3fr auto;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: green;
        }
        .logo{}
        .logo a{ color:white; text-decoration: none;}
        .menu{ text-align: center; }
        .menu a{  color:white }
        .hamburguesa{ color:white; font-size: 25px; text-align: right;}

        

        @media screen and (max-width : 768px) {
            .toogle{transform: translate(100%);}
            .logo{ order : 1}
            .menu{ order:3; width: 100%; display: flex; flex-direction: column;
                position: fixed; 
                background: seagreen;                
                left: 0;
                top: 50px;
            }
            .menu a{
                line-height: 100px; border-bottom: 1px solid green;
            }
            .hamburguesa{ order:2}            
        }
    </style>
    <script>
        let menu = document.getElementById("_menu");
        menu.classList.toggle("toogle")
        document.getElementById("_hamburguesa").addEventListener("click",e=>{
            menu.classList.toggle("toogle")
        })
    </script>    
</body>
</html>