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

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