44-Dropdowns en CSS

Jorge Catalao enero 12, 2025
HTML


Acordeón de los índices



Tema 1: ¿Qué es un Dropdown?

Un Dropdown es un elemento de la interfaz de usuario (UI) que permite mostrar un conjunto de opciones o acciones al hacer clic o pasar el ratón sobre un botón o enlace. Este es utilizado principalmente para ahorrar espacio y organizar contenido de forma más compacta.

Volver al índice

Ejemplo 1: Navbar Vertical Alineado a la Izquierda


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dropdown Mejorado</title>
 <style>
   /* Estilo general para el contenedor del dropdown */
   .dropdown {
     position: relative;
     display: inline-block;
     font-family: Arial, sans-serif;
   }

   /* Estilo para el botón del dropdown */
   .dropdown button {
     background-color: #4CAF50;
     color: white;
     padding: 14px 20px;
     font-size: 16px;
     border: none;
     cursor: pointer;
     border-radius: 5px;
     transition: background-color 0.3s ease;
   }

   /* Efecto cuando el usuario pasa el mouse sobre el botón */
   .dropdown button:hover {
     background-color: #45a049;
   }

   /* Estilo del contenido del dropdown */
   .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     z-index: 1;
     border-radius: 5px;
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.3s, transform 0.3s ease;
   }

   /* Estilo para las opciones del dropdown */
   .dropdown-content a {
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     border-radius: 5px;
     transition: background-color 0.3s ease;
   }

   /* Efecto cuando el usuario pasa el mouse sobre una opción */
   .dropdown-content a:hover {
     background-color: #ddd;
   }

   /* Mostrar el contenido del dropdown al pasar el mouse */
   .dropdown:hover .dropdown-content {
     display: block;
     opacity: 1;
     transform: translateY(0);
   }
 </style>
</head>
<body>

<h2>Dropdown Mejorado</h2>
<p>Haz hover sobre el botón para ver el contenido del dropdown.</p>

<div class="dropdown">
 <button>Haz hover sobre mí</button>
 <div class="dropdown-content">
   <a href="#">Opción 1</a>
   <a href="#">Opción 2</a>
   <a href="#">Opción 3</a>
 </div>
</div>

</body>
</html>
Tema 2: Dropdown Básico con Texto

Un Dropdown básico con texto se crea usando una estructura HTML simple con un contenedor y un botón de activación. Se emplea la clase dropdown en Bootstrap para manejar este tipo de menú. Esta implementación básica permite mostrar un menú desplegable que contiene opciones de texto, ideal para navegar o realizar selecciones simples.

Clases principales involucradas:
  • dropdown: Define el contenedor principal del menú desplegable.
  • dropdown-toggle: Se aplica al botón o enlace que activa el menú desplegable.
  • dropdown-menu: Contenedor para las opciones dentro del dropdown.
  • dropdown-item: Clase aplicada a cada opción individual dentro del menú.
Ventajas de usar un Dropdown básico con texto:
  • Organización: Ayuda a mostrar múltiples opciones en un espacio reducido.
  • Facilidad de uso: Proporciona una interacción clara e intuitiva para el usuario.
  • Adaptabilidad: Totalmente responsivo gracias a Bootstrap.
  • Personalización: Permite agregar más elementos como íconos o divisores entre las opciones.
Volver al índice 


                    
   <!DOCTYPE html>
   <html>
   <head>
   <style>
   .dropdown {
     position: relative;
     display: inline-block;
   }
   
   .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     padding: 12px 16px;
     z-index: 1;
   }
   
   .dropdown:hover .dropdown-content {
     display: block;
   }
   </style>
   </head>
   <body>
   
   <h2>Hoverable Dropdown</h2>
   <p>Move the mouse over the text below to open the dropdown content.</p>
   
   <div class="dropdown">
     <span>Mouse over me</span>
     <div class="dropdown-content">
     <p>Hello World!</p>
     </div>
   </div>
   
   </body>
   </html>
...
Tema 3: Dropdown con Texto Estilizado

En este tema aprenderemos a estilizar el texto dentro de un Dropdown, aplicando colores, tipografía y tamaños personalizados. Utilizando propiedades CSS como color, font-weight, font-size y otras, podemos personalizar el contenido de los menús desplegables para adaptarlos a nuestro diseño.

Propiedades CSS útiles para estilizar el texto:
  • color: Permite cambiar el color del texto (ejemplo: color: red;).
  • font-weight: Ajusta el grosor del texto (valores como bold, lighter, o números entre 100 y 900).
  • font-size: Cambia el tamaño de la fuente (ejemplo: font-size: 18px;).
  • text-transform: Controla la capitalización del texto (valores como uppercase, lowercase, o capitalize).
  • font-style: Aplica estilos como cursiva al texto (ejemplo: font-style: italic;).
  • line-height: Ajusta el espacio vertical entre líneas para mejorar la legibilidad (ejemplo: line-height: 1.5;).
Ventajas de estilizar el texto:
  • Mejor legibilidad: Personalizar colores, tamaños y tipografía facilita que el usuario identifique opciones importantes.
  • Coherencia visual: Un diseño consistente y adaptado al estilo general del sitio mejora la experiencia del usuario.
  • Flexibilidad: CSS permite personalizar cada elemento del menú desplegable de acuerdo con las necesidades del proyecto.
Volver al índice 


                <!DOCTYPE html>
                <html>
                <head>
                <style>
                .dropdown {
                  position: relative;
                  display: inline-block;
                }

                .dropdown-content {
                  display: none;
                  position: absolute;
                  background-color: #f9f9f9;
                  min-width: 160px;
                  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                  padding: 12px 16px;
                  z-index: 1;
                  font-family: "Arial", sans-serif;
                  font-size: 16px;
                  color: #333;
                }

                .dropdown:hover .dropdown-content {
                  display: block;
                }

                .dropdown-content p {
                  color: #ff6347;  /* Tomate */
                  font-size: 18px;
                  font-weight: bold;
                }

                .dropdown span {
                  color: #4CAF50; /* Verde */
                  font-size: 20px;
                  font-family: "Verdana", sans-serif;
                  font-weight: bold;
                }
                </style>
                </head>
                <body>

                <h2>Hoverable Dropdown</h2>
                <p>Move the mouse over the text below to open the dropdown content.</p>

                <div class="dropdown">
                  <span>Mouse over me</span>
                  <div class="dropdown-content">
                    <p>Hello World!</p>
                  </div>
                </div>

                </body>
                </html>
Tema 4: Dropdown con Imágenes

En este tema, aprenderemos cómo incluir imágenes dentro de las opciones de un Dropdown. Esto es útil para crear menús visuales con iconos, avatares de usuario o elementos gráficos que mejoren la experiencia visual.

Claves para implementar Dropdown con imágenes usando CSS:
  • Propiedad display: Usar valores como flex o grid para alinear texto e imágenes en las opciones del menú.
  • Propiedad background-image: Para usar imágenes de fondo directamente en los elementos.
  • Propiedades de borde y tamaño: Controlar el tamaño y forma de las imágenes usando width, height, y border-radius para crear formas como círculos o bordes redondeados.
Propiedades CSS útiles:
  • background-image: Permite establecer una imagen como fondo de un elemento (ejemplo: background-image: url('imagen.jpg');).
  • background-size: Ajusta el tamaño de la imagen de fondo (valores como cover, contain, o un tamaño fijo en píxeles).
  • display: flex; Facilita la alineación de imágenes y texto dentro de las opciones del Dropdown.
  • align-items: Centra verticalmente los elementos en un contenedor flex.
  • gap: Define el espacio entre la imagen y el texto para una mejor estética.
Ventajas de usar imágenes en Dropdowns:
  • Reconocimiento visual: Las imágenes son más fáciles de identificar que el texto, lo que mejora la navegación.
  • Estilo atractivo: Un menú visualmente rico puede mejorar la percepción del sitio.
  • Flexibilidad: Permite incluir iconos, logotipos o avatares para personalizar las opciones.
Volver al índice 


                <!DOCTYPE html>
                <html>
                <head>
                <style>
                .dropdown {
                  position: relative;
                  display: inline-block;
                }

                .dropdown img {
                  width: 50px;  /* Imagen de 50px */
                  height: 50px;
                  border-radius: 50%;
                }

                .dropdown-content {
                  display: none;
                  position: absolute;
                  background-color: #f9f9f9;
                  min-width: 160px;
                  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                  padding: 12px 16px;
                  z-index: 1;
                  font-family: "Arial", sans-serif;
                  font-size: 16px;
                  color: #333;
                }

                .dropdown:hover .dropdown-content {
                  display: block;
                }

                .dropdown-content p {
                  color: #ff6347;  /* Tomate */
                  font-size: 18px;
                  font-weight: bold;
                }

                .dropdown span {
                  color: #4CAF50; /* Verde */
                  font-size: 20px;
                  font-family: "Verdana", sans-serif;
                  font-weight: bold;
                }
                </style>
                </head>
                <body>

                <h2>Hoverable Dropdown with Image</h2>
                <p>Move the mouse over the image below to open the dropdown content.</p>

                <div class="dropdown">
                  <img src="https://media.istockphoto.com/id/185116528/es/foto/%C3%A1rbol.webp?s=1024x1024&w=is&k=20&c=pPus3Jxh2V9lu-asos2GKrVJobeOO_45IgqXRzQFNP4=" alt="Avatar">
                  <div class="dropdown-content">
                    <p>Hello World!</p>
                  </div>
                </div>

                </body>
                </html>


Tema 5: Dropdown Hover vs Click

Este tema trata las dos formas comunes de interacción con un Dropdown: cuando el usuario pasa el mouse (hover) o cuando hace clic (click). Vamos a explorar cómo implementar ambos métodos de activación utilizando solo CSS.

Dropdown con Hover:

Para crear un dropdown que se active al pasar el ratón (hover), utilizamos el pseudoclase :hover en el contenedor del menú. Esta opción es útil cuando queremos que el menú aparezca de manera inmediata al interactuar con el elemento, sin necesidad de hacer clic. 

/* Estilo para el dropdown activado por hover */
.dropdown:hover .dropdown-menu {
    display: block;
}

El código anterior hace que el menú se muestre cuando el usuario pasa el ratón sobre el contenedor del dropdown. Es ideal para menús que deben aparecer rápidamente.

Dropdown con Click:

En contraste, un dropdown activado por clic requiere un poco más de trabajo, ya que no podemos usar solo CSS para manejar el evento de clic. Sin embargo, podemos utilizar el pseudoclase :focus o :checked para simular un efecto de clic en un elemento. 

/* Estilo para el dropdown activado por clic usando el input type checkbox */
.dropdown input[type="checkbox"]:checked + .dropdown-menu {
    display: block;
}

El código anterior usa un checkbox oculto que, al ser marcado (clicado), muestra el menú. Este enfoque simula la interacción de un clic sin necesidad de JavaScript.

Ventajas de Hover:
  • Rápido: El menú aparece inmediatamente cuando el usuario pasa el ratón sobre el botón.
  • Fluidez: Es ideal para menús que no requieren una acción adicional para mostrar las opciones.
Ventajas de Click:
  • Mayor control: El menú solo se muestra cuando el usuario hace clic, lo que ofrece mayor control sobre la interfaz.
  • Evita sobrecarga visual: Si el contenido del menú es largo, un clic evita que se muestre de forma continua.
Volver al índice 


                <!DOCTYPE html>
                <html>
                <head>
                <style>
                .dropdown {
                  position: relative;
                  display: inline-block;
                }

                /* Hover Dropdown */
                .dropdown-content {
                  display: none;
                  position: absolute;
                  background-color: #f9f9f9;
                  min-width: 160px;
                  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                  padding: 12px 16px;
                  z-index: 1;
                  font-family: "Arial", sans-serif;
                  font-size: 16px;
                  color: #333;
                }

                .dropdown:hover .dropdown-content {
                  display: block;
                }

                .dropdown-content p {
                  color: #ff6347;  /* Tomate */
                  font-size: 18px;
                  font-weight: bold;
                }

                .dropdown span {
                  color: #4CAF50; /* Verde */
                  font-size: 20px;
                  font-family: "Verdana", sans-serif;
                  font-weight: bold;
                }

                /* Click Dropdown */
                .click-dropdown-content {
                  display: none;
                  position: absolute;
                  background-color: #f9f9f9;
                  min-width: 160px;
                  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                  padding: 12px 16px;
                  z-index: 1;
                }

                .click-dropdown input[type='checkbox']:checked + .click-dropdown-content {
                  display: block;
                }

                .click-dropdown span {
                  color: #4CAF50; /* Verde */
                  font-size: 20px;
                  font-family: 'Verdana', sans-serif;
                  font-weight: bold;
                }

                </style>
                </head>
                <body>

                <h2>Hoverable Dropdown</h2>
                <p>Move the mouse over the title below to open the dropdown content.</p>

                <div class="dropdown">
                  <span>Hover Me!</span>
                  <div class="dropdown-content">
                    <p>Hovered!</p>
                  </div>
                </div>

                <h2>Clickable Dropdown</h2>
                <p>Click on the title below to open the dropdown content.</p>

                <div class="dropdown click-dropdown">
                  <label for='click-dropdown-checkbox'><span>Click Me!</span></label>
                  <input type='checkbox' id='click-dropdown-checkbox' style='display:none;'>
                  <div class="click-dropdown-content">
                    <p>Clicked!</p>
                  </div>
                </div>

                </body>
                </html>


Tema 6: Dropdown Responsive

En este tema, aprenderemos a hacer que nuestros Dropdowns sean completamente responsivos, adaptándose a diferentes tamaños de pantalla, especialmente para dispositivos móviles.


Para hacer que un dropdown sea responsivo, usamos **media queries** en CSS. Estas permiten que el diseño de los menús desplegables cambie según el tamaño de la pantalla, garantizando una experiencia de usuario consistente en dispositivos móviles, tabletas y computadoras de escritorio.

Existen varias formas de hacer que el dropdown se ajuste a diferentes tamaños de pantalla:

  • Dispositivos móviles: En pantallas pequeñas, como teléfonos móviles, el dropdown puede ocupar toda la pantalla para asegurar que el usuario lo vea claramente y pueda interactuar con él fácilmente.
  • Dispositivos de escritorio: En pantallas grandes, el dropdown puede aparecer como un menú más tradicional, ya sea al hacer clic o al pasar el mouse sobre el botón.

Además, mediante el uso de las siguientes clases y características de CSS, podemos personalizar la apariencia del dropdown para que sea completamente funcional en dispositivos móviles:

En resumen, hacer un dropdown responsive requiere el uso adecuado de media queries para controlar la visualización y el comportamiento del menú según el tamaño de la pantalla. Este enfoque asegura que el dropdown funcione correctamente en una amplia variedad de dispositivos y tamaños de pantalla.

Volver al índice 


<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Responsive dropdown */
@media (max-width: 992px) {
  .dropdown-content {
    min-width: 100%;
    left: 0;
  }
  .dropdown span {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .dropdown span {
    font-size: 14px;
  }
  .dropdown-content p {
    font-size: 16px;
  }
}
</style>
</head>
<body>
<h2>Responsive Dropdown</h2>
<div class='dropdown'>
    <span>Hover me!</span>
    <div class='dropdown-content'>
        <p>Responsive content</p>
    </div>
</div>
</body>
</html>




Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias