Un menú desplegable es un tipo de menú, al usar el menú desplegable, el usuario puede seleccionar algo del conjunto predefinido dado. Es un menú alternable, lo que significa que aparece cuando el usuario hace clic en el menú. Un cuadro de búsqueda es un tipo de cuadro en el que puede escribir la string que desea buscar.
El objetivo principal es alinear el menú desplegable y el cuadro de búsqueda en línea recta.
Ejemplo 1: Crearemos una barra de navegación y crearemos un menú desplegable y un cuadro de búsqueda, que inicialmente no aparecerán en línea recta. Podemos usar la lista desordenada «ul» de la estructura HTML que tiene la forma de una lista.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <!-- Bootstrap CSS library --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href= "https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity= "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <!-- jQuery library --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body> <!-- Navigation Bar --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <h5 class="navbar-brand">Geeks For Geeks</h5> <ul class="navbar nav ml-auto"> <!-- Dropdown list --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="color:white;"> Courses </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Live courses </a> <a class="dropdown-item" href="#">Online courses </a> </div> </li> <li> <!-- Search Box --> <input type="text" placeholder="Search.."> </li> </ul> </nav> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <!-- Bootstrap CSS library --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href= "https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity= "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <!-- jQuery library --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body> <h2 align="Center" style="color:green;"> Dropdown menu and search box without navigation bar </h2> <ul class="navbar nav ml-auto" style="color:white;background-color:green"> <!-- Dropdown list --> <li> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="color:white;"> Courses </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Live courses </a> <a class="dropdown-item" href="#">Online courses </a> </div> <!-- Search Box --> <li> <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"> </li> </li> </ul> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por snigdha_yambadwar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA