A dropdown menu is a type of menu, by using the dropdown menu user can select something from the given predefined set. It is a toggleable menu, which means it appears when the user clicks on the menu. A search box is a type of box in which you can write the string which you want to search.
The main aim is to align the dropdown menu and search box in a straight line.
Example 1: We will create a navigation bar and create a dropdown menu and search box, which will initially not appear in a straight line. We can use the unordered list “ul” of HTML structure which is in the form of a list.
<!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 =
< link rel = "stylesheet" href =
integrity =
"sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin = "anonymous" >
<!-- jQuery library -->
< script src =
</ script >
< script src =
</ script >
< script src =
</ 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 >
|
Output:
Example 2:
<!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 =
< link rel = "stylesheet" href =
integrity =
"sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin = "anonymous" >
<!-- jQuery library -->
< script src =
</ script >
< script src =
</ script >
< script src =
</ 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 >
|
Output: