Creación desplegable en CSS

CSS | Creación desplegable: En este tutorial, vamos a aprender a crear menús desplegables con CSS?

CSS | Creación desplegable

Anécdota:

Sabemos la importancia de la barra de navegación en nuestra página web, sabemos la importancia de una lista de elementos también en nuestra página web pero ¿cuál es la importancia de desplegable en las páginas web?

Bueno, hay demasiados para mencionar pero vamos a discutir algunos de ellos.

En primer lugar, la desplegable es una disposición por paquetes de una lista de elementos que ahorra espacio class nuestra página web.

El desplegable es una forma elegante de mostrar sus opciones de la página web, ya que también aumenta la curiosidad de los usuarios para ir y hacer clic en el menú desplegable opción.

Por lo tanto, la opción desplegable es muy esencial, mientras que la creación y el diseño de una página web.

Sin embargo hay que tener mucho cuidado al crear una opción desplegable, ya que es una tendencia común a mezclar las opciones cuando alguien es nuevo y está aprendiendo CSS.

La punta primordial para crear una opción desplegable es que uno debe ser claro en lo que todas las opciones que él / ella puede requerir a la visualización de la página web.

Muchos usuarios no tienden a pasar por toda la página web y no siempre se ven for una opción desplegable que contiene los enlaces de los accesos directos.

ahí para crear un menú desplegable con enlaces rápidos como elementos de menú son las buenas prácticas y por lo tanto los usuarios felices!

Ahora vamos a hablar acerca de cómo crear una opción desplegable con CSS,

básico desplegable

for HTML:

  • Paso 1 : Crear un botón o una opción similar que abriría su desplegable.
  • Paso 2 : Utilice un elemento contenedor For por ejemplo & lt; div & gt; para ayudarle a crear una opción de menú desplegable y luego se puede añadir nada dentro de él lo que desea mostrar a los usuarios.
  • Paso 3 : Envolver el & lt; div & gt; elemento alrededor de los elementos que ayuden a posicionar el contenido desplegable correctamente con el CSS.

for CSS:

El class desplegable utiliza varias propiedades. Uno de ellos es position: relative que sería necesaria para colocar el contenido correcto menú desplegable a continuación la opción desplegable.

  • Paso 4 : El menú desplegable contiene el contenido desplegable real que se muestra sólo cuando los elementos emergentes del usuario sobre él.
  • Paso 5 : Si desea que la anchura de su contenido desplegable sea tan igual ancho como el botón desplegable a continuación, debe cambiar el ancho a 100% y también permite overflow: auto para que su contenido será capaz de desplazarse en pantallas pequeñas.

Siempre se puede cambiar la alineación de su desplegable usando el desplegable de la derecha alineado . Para hacer su go contenido de derecha a izquierda debe establecer derecha: 0 .

Sintaxis:

.dropdown-content {
right: 0;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #3eff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
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: #3eff;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3eff;
}
</style>
</head>
<body>
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>

salida

Creating dropdown in CSS - 4

En el ejemplo anterior, los estilos se han fijado a la propiedad desplegable .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *