Los últimos tutoriales de desarrollo web
 

W3.CSS Menús desplegables


desplegable de la libración

La clase W3-desplegable-libración define un elemento desplegable hoverable.

La clase W3-desplegable-contenido define la parte desplegable que se muestra.

Ejemplo

<div class="w3-dropdown-hover">
  <button class="w3-btn w3-red">Hover Me!</button>
  <div class="w3-dropdown-content w3-border">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Inténtalo tú mismo "

Tanto la parte elemento hoverable y el elemento desplegable pueden ser cualquier elemento HTML.

En el ejemplo anterior, la parte hoverable era un botón <>, y la parte desplegable de un <div>.

En el siguiente ejemplo, la parte hoverable es un elemento <p>, y la parte desplegable es un <span>:

Ejemplo

<div class="w3-dropdown-hover">
  <p>Hover Me!
  <span class="w3-dropdown-content w3-border">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Inténtalo tú mismo "


menú desplegable

La clase W3-desplegable-libración es perfecto para los menús de navegación desplegable.

Va a aprender más acerca de las barras de navegación en el siguiente capítulo.

Ejemplo

<ul class="w3-navbar w3-card-2 w3-light-grey">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li class="w3-dropdown-hover">
    <a href="#">Dropdown <i class="fa fa-caret-down"></i></a>
    <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
Inténtalo tú mismo "

desplegable se puede hacer clic

La clase W3-desplegable clic es similar a W3-desplegable-vuelo estacionario, excepto que en el menú desplegable que se abre mediante JavaScript.

Ejemplo

<div class="w3-dropdown-click">
  <button onclick="myFunction()" class="w3-btn">Click Me</button>
  <div id="Demo" class="w3-dropdown-content w3-card">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<script>
function myFunction() {
    var x = document.getElementById("Demo");
    if (x.className.indexOf("w3-show") == -1)
        x.className += " w3-show";
    else
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

Inténtalo tú mismo "


Menús desplegables imagen

Mover el puntero del ratón sobre la imagen:

Monterosso

Noruega

Ejemplo

<div class="w3-dropdown-hover">
  <img src="img_fjords.jpg" alt="Norway" style="width:20%">
  <div class="w3-dropdown-content" style="width:300px">
    <img src="img_fjords.jpg" alt="Norway" style="width:100%">
  </div>
</div>

Inténtalo tú mismo "


Menús desplegables de tarjetas

Mover el puntero del ratón sobre "Londres":

Londres
Londres

Londres es la capital de Inglaterra.

Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.

Tokio París

Ejemplo

<div class="w3-dropdown-hover">London
  <div class="w3-dropdown-content w3-card-4" style="width:250px">
    <img src="img_london.png" alt="London" style="width:100%">
    <div class="w3-container">
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the UK.</p>
    </div>
  </div>
</div>
Tokyo Paris

Inténtalo tú mismo "


desplegable de animación

Utilice cualquiera de las clases W3-animate- a desvanecerse, el zoom o deslizarse en el contenido desplegable:

Ejemplo

<div class="w3-dropdown-click">
  <button onclick="myFunction()" class="w3-btn">Click Me</button>
  <div id="Demo" class="w3-dropdown-content w3-animate-zoom">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Inténtalo tú mismo "