44-Dropdowns en CSS

Dropdown es Una lista desplegable es una interfaz visual que al ser presionada muestra una lista de opciones que puede elegir el visitante

Tambien se puede hacer con el simple acto de pasar el mouse por encima de un objecto(menu, foto etc)

Dropdown Menu

Mueva el mouse sobre el botón para abrir el menú desplegable.

Link 1 Link 2 Link 3

---

Los Dropdows (listas desplegables) se pueden conseguir de diversar maneras

Una de las maneras mas populares es creando un script en javascript, pero aqui como estamos nel curso de CSS vamos a conseguir el efcto con estilos CSS

El atributo Position y Display son fundamentales en este processo

Beautiful Cinque Terre

Dropdowns con imagens es lo mismo processo que el anterior

Para que lo entiendam mejor les dejo el codigo de los ejemplos anteriores

...

Ejemplo del codigo CSS

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .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);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
      
  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }  

Ejemplo del codigo HTML

    <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    </div>
  </div>  

Barra de navegacion

El uso mas comun de los dropdowns son en barras de navegacion

• Home
• News
• Dropdown
  Link 1 Link 2 Link 3

---

dejo el codigo del html e CSS

Codigo CSS

 .ul_barra {
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #333;
   }
   
   .li_barra {
     float: left;
   }
   
   .li_barra .a_barra, .dropbtn {
     display: inline-block;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
   }
   
   .li_barra .a_barra:hover, .dropdown:hover .dropbtn {
     background-color: red;
   }
   
   .li_barra .dropdown {
     display: inline-block;
   }
   
   .dropdown-content {
     display: none;
     position: relative;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:1;
   }
   
   .dropdown-content .a_barra {
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
   }
   
   .dropdown-content .a_barra:hover {background-color: #f1f1f1;}
   
   .dropdown:hover .dropdown-content {
     display: block;
   }
    

Codigo HTML

<div class="container">
<ul class="ul_barra">
  <li class="li_barra"><a class="a_barra" href="#home">Home</a></li>
  <li class="li_barra"><a class="a_barra" href="#news">News</a></li>
  <li class="dropdown li_barra">
    <a  href="javascript:void(0)" class="dropbtn a_barra">Dropdown</a>
    <div class="dropdown-content">
      <a class="a_barra" href="#">Link 1</a>
      <a class="a_barra" href="#">Link 2</a>
      <a class="a_barra" href="#">Link 3</a>
    </div>
  </li>
</ul>
</div>
    

Ir al indice