Un menú desplegable ofrece una lista de alternativas cuando se hace clic o se pasa el cursor sobre él, que es un método limpio para proporcionar una lista de alternativas, ya que inicialmente solo se muestra una opción en la pantalla. Los menús desplegables se utilizan en casi todos los tipos de software hoy en día para mostrar las subopciones de la opción.
Paso 1: Para incluir este menú desplegable en su sitio web mediante el uso de bootstrap, solo necesita incluir las siguientes bibliotecas jQuery y bootstrap js, como scripts en su código HTML.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com /bootstrap/3.3.6/js/bootstrap.min.js”></secuencia de comandos>
Paso 2: Incluya la siguiente hoja de estilo en el encabezado del documento HTML para que parezca un menú desplegable.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
Paso 3: Y asegúrese de encerrar el menú desplegable dentro de la clase .dropdown , el botón o la opción principal dentro de la clase .btn btn-primary dropdown-toggle , y la lista de alternativas dentro de la clase .dropdown-menu como se muestra a continuación.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle"
type="button" data-toggle="dropdown">
Data Structures
<span class="caret"></span>
</button>
<ul>
<li><a href="#">Array</a></li>
<li><a href="#">Stack</a></li>
<li><a href="#">Queue</a></li>
</ul>
</div>
La clase .caret se usa para mostrar el pequeño triángulo invertido en el botón como se muestra en la salida.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<style>
.container {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>Dropdowns</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle"
type="button" data-toggle="dropdown">
Data Structures
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Array</a></li>
<li><a href="#">String</a></li>
<li><a href="#">Stack</a></li>
<li><a href="#">Queue</a></li>
<li><a href="#">Map</a></li>
<li><a href="#">Tree</a></li>
</ul>
</div>
</div>
</body>
</html>
Salida: como puede ver en la salida, el botón desplegable se crea con el nombre Estructuras de datos , y al hacer clic en él, se le proporciona una lista de opciones como puede ver arriba.
Publicación traducida automáticamente
Artículo escrito por bhawnaatrish y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA