miércoles, 22 de mayo de 2019

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


  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.    <meta charset="UTF-8">
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.    <meta name="author" content="Jhon Paul">
  7.    <title>Menú</title>
  8.    <!-- CSS -->
  9.    <link rel="stylesheet" href="menu.css">
  10.    <!-- JS -->
  11.    <script 
  12.      src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
  13.    </script>
  14.    <script src="menu.js"></script> 
  15.  </head>
  16.  <body style="font-family: calibri, arial;">
  17.    <div class="menu">
  18.  <div class="menu_bar">
  19.             <a href="#" style="color: white;">Menu</a>
  20.         </div>
  21.  <nav class="menu" style="margin: 0 auto;" >
  22.      <ul>
  23.   <li class="menu"><a href="#">Menu 01</a>
  24.   </li><li class="menu">
  25.    <a href="#">Menu 02</a>
  26.    <ul class="submenu">                                    
  27.      <li><a href="#">Submenu 02.01</a></li>
  28.      <li><a href="#">Submenu 02.02</a></li>
  29.      <li><a href="#">Submenu 02.03</a></li>
  30.                                </ul>
  31.   </li><li class="menu">
  32.    <a href="#">Menu 03</a>
  33.    <ul class="submenu">        
  34.      <li><a href="#">Submenu 03.01</a></li>
  35.      <li><a href="#">Submenu 03.02</a></li>                                    
  36.    </ul>
  37.   </li><li class="menu">
  38.    <a href="#">Menu 04</a>
  39.    <ul class="submenu">
  40.      <li><a href="#">Submenu 04.01</a></li> 
  41.    </ul>    
  42.   </li>    
  43.      </ul>
  44.  </nav>
  45.   </div>
  46.  </body>
  47. </html>
  48.  

Código CSS

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


  1. a{text-decoration: none;}
  2. @media only screen and (min-width: 1px){
  3.     .menu_bar {
  4.         display:block;
  5.         text-align: right;
  6.     }
  7.  
  8.  .menu_bar a {
  9.   background:#000000;
  10.         padding: 0.7rem;
  11.  }
  12.   
  13.     nav.menu {
  14.         width: 100%;
  15.     }
  16.  
  17.     nav.menu ul li {
  18.         display: block;
  19.         border-bottom:1px solid white;
  20.     }
  21.  
  22.     nav.menu ul li a {
  23.         display: block;
  24.         font-size: 1rem;
  25.         position: relative;
  26.         color: white;
  27.         box-sizing: border-box;
  28.         background:black;
  29.         padding: 0.5rem 0;
  30.     }
  31.  
  32.     .submenu {
  33.         display: none;
  34.     }
  35.  
  36.     nav.menu ul {
  37.         list-style: none;
  38.         padding: 0;
  39.         text-align: center;
  40.     }
  41. }
  42.  
  43. @media only screen and (min-width: 460px){   
  44.     nav.menu ul li a {
  45.         font-size: 1.2rem;
  46.         padding: 0.8rem 0;
  47.     }
  48. }
  49.  
  50. @media only screen and (min-width: 768px){
  51.     .menu_bar {
  52.         display:none;
  53.     }
  54.     nav.menu{
  55.         display: initial;
  56.     }
  57.     nav.menu ul li:hover .submenu {
  58.         display:block;
  59.     }
  60.  
  61. nav.menu {
  62.  display: block;
  63.  margin: 0;
  64.  padding: 0;
  65.  list-style: none;
  66. }
  67.  nav.menu ul {
  68.   list-style: none;
  69.   margin: 0;
  70.   padding: 0;
  71.  }
  72.  
  73.  nav.menu > ul > li {
  74.   float: left;
  75.  }
  76.  
  77.      nav.menu ul li a {
  78.                 display: block;
  79.   margin: 0;
  80.   padding: 15px 20px;
  81.   color: #FFFFFF;
  82.   background-color: #333333;
  83.             }
  84.  
  85.      nav.menu > ul > li > ul {
  86.   display: none;
  87.      }
  88.  
  89.      nav.menu > ul > li:hover > ul {
  90.   list-style: none;
  91.   display: block;
  92.   position: absolute;
  93.      }
  94.  
  95.      nav.menu a:hover {
  96.   background-color: #C80000;
  97.             } 
  98. }

Código JS

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

  1. $(document).ready(function () {
  2.     $('.menu_bar').click(function () {
  3.         $('nav.menu').slideToggle();
  4.     });
  5.     $(window).resize(function () {
  6.         if (eval($('body').width()) > 750) {
  7.             $('nav.menu').show();
  8.         }else{
  9.             $('nav.menu').hide();
  10.         }
  11.     });
  12. });
Publicado por en
Etiquetas: , , , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)