Inicio » Blog » HTML + CSS

29 marzo, 2020

Diseñar un menu responsive

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

Ver video en

Suscríbete a nuestro canal en Youtube

Suscríbirse

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

  1. ¿Qué es un menú de navegación?
  2. Los Menus responsivos para página webs
  3. ¿Cómo diseñar un menu responsive solo con CSS?
    1. Aplicando solo links  a hrefs
    2. Aplicando listas ul li
    3. Aplicando flexbox
  4. ¿Cómo diseñar un menu responsive solo con CSS y JAVASCRIPT?
    1. Aplicando interactividad y animaciones
  5. ¿Cómo diseñar un menu responsive con Bootstrap?
    1. Aplicando 
  6. 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 :

  1. Menus de un solo nivel  ... este tipo de menus son ideales para hacer SEO de una página web
  2. 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?

Menu

 

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

 

¿Cómo hacer un menu responsive con Bootstrap?

menú

Conclusión del tutorial


Leido 5379 veces

Compartir link del tutorial con tus amigos


Aprende más sobre HTML + CSS

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023