In learning code: Creación de un Menú con responsive design usando HTML + CSS + JS

Se empleará la librería de JQuery para generar el siguiente menú responsivo:

Código HTML

Se construye un menú con los diversos elementos de HTML como "nav", "ul" y "li".

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="author" content="Jhon Paul">
   <title>Menú</title>
   <!-- CSS -->
   <link rel="stylesheet" href="menu.css">
   <!-- JS -->
   <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
   </script>
   <script src="menu.js"></script> 
 </head>
 <body style="font-family: calibri, arial;">
   <div class="menu">
 <div class="menu_bar">
            <a href="#" style="color: white;">Menu</a>
        </div>
 <nav class="menu" style="margin: 0 auto;" >
     <ul>
  <li class="menu"><a href="#">Menu 01</a>
  </li><li class="menu">
   <a href="#">Menu 02</a>
   <ul class="submenu">                                    
     <li><a href="#">Submenu 02.01</a></li>
     <li><a href="#">Submenu 02.02</a></li>
     <li><a href="#">Submenu 02.03</a></li>
                               </ul>
  </li><li class="menu">
   <a href="#">Menu 03</a>
   <ul class="submenu">        
     <li><a href="#">Submenu 03.01</a></li>
     <li><a href="#">Submenu 03.02</a></li>                                    
   </ul>
  </li><li class="menu">
   <a href="#">Menu 04</a>
   <ul class="submenu">
     <li><a href="#">Submenu 04.01</a></li> 
   </ul>    
  </li>    
     </ul>
 </nav>
  </div>
 </body>
</html>

Código CSS

Se añade reglas AT para controlar los redimensionamientos de la pantalla

a{text-decoration: none;}
@media only screen and (min-width: 1px){
    .menu_bar {
        display:block;
        text-align: right;
    }
 
 .menu_bar a {
  background:#000000;
        padding: 0.7rem;
 }
  
    nav.menu {
        width: 100%;
    }
 
    nav.menu ul li {
        display: block;
        border-bottom:1px solid white;
    }

    nav.menu ul li a {
        display: block;
        font-size: 1rem;
        position: relative;
        color: white;
        box-sizing: border-box;
        background:black;
        padding: 0.5rem 0;
    }

    .submenu {
        display: none;
    }

    nav.menu ul {
        list-style: none;
        padding: 0;
        text-align: center;
    }
}

@media only screen and (min-width: 460px){   
    nav.menu ul li a {
        font-size: 1.2rem;
        padding: 0.8rem 0;
    }
}

@media only screen and (min-width: 768px){
    .menu_bar {
        display:none;
    }
    nav.menu{
        display: initial;
    }
    nav.menu ul li:hover .submenu {
        display:block;
    }

nav.menu {
 display: block;
 margin: 0;
 padding: 0;
 list-style: none;
}
 nav.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
 }

 nav.menu > ul > li {
  float: left;
 }
 
     nav.menu ul li a {
                display: block;
  margin: 0;
  padding: 15px 20px;
  color: #FFFFFF;
  background-color: #333333;
            }
 
     nav.menu > ul > li > ul {
  display: none;
     }

     nav.menu > ul > li:hover > ul {
  list-style: none;
  display: block;
  position: absolute;
     }
 
     nav.menu a:hover {
  background-color: #C80000;
            } 
}

Código JS

Finalmente, código JS para controlar el despliegue del menú en pantallas pequeñas.

$(document).ready(function () {
    $('.menu_bar').click(function () {
        $('nav.menu').slideToggle();
    });
    $(window).resize(function () {
        if (eval($('body').width()) > 750) {
            $('nav.menu').show();
        }else{
            $('nav.menu').hide();
        }
    });
});

In learning code

Páginas

miércoles, 22 de mayo de 2019

Creación de un Menú con responsive design usando HTML + CSS + JS

Código HTML

Código CSS

Código JS

No hay comentarios:

Publicar un comentario