Programmers can add images into the dropdown list for each items by two methods which are mentioned below.
Method 1: Using CSS The .dropdown class uses position: relative; is used when the user needs the content to be set right under the dropdown button (It is done using position: absolute).
The .dropdown-content class holds the actual dropdown content. Note that the “min-width” is 160px. The programmer can set this according to the need. Add <img> tag in dropdown content to insert image into dropdown list for each items.
Note: In case the user needs the width of the content to be as wide as the dropdown button, please set the width to 100% (Set overflow: auto to get scroll on small screens). Instead of using a border, we have used the CSS box-shadow property to create the dropdown menu like a “card”. The :hover selector is used to display the dropdown menu when the user moves the mouse over the dropdown button.
Example:
HTML
<!DOCTYPE html> < html > < head > < title >Adding image to dropdown list</ title > < style > .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; 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: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </ style > </ head > < body > < center > < h1 style = "color: green" > GeeksforGeeks </ h1 > < div class = "dropdown" > < button class = "dropbtn" > Country Flags </ button > < div class = "dropdown-content" > < a href = "#" > < img src = width = "20" height = "15" > India</ a > < a href = "#" > < img src = width = "20" height = "15" > USA</ a > < a href = "#" > < img src = width = "20" height = "15" > England</ a > < a href = "#" > < img src = width = "20" height = "15" > Brazil</ a > </ div > </ div > </ center > </ body > </ html > |
Output:
In above example, you need to “hover” your mouse pointer over button to see the dropdown list.
Method 2: Using Bootstrap: Dropdowns can be implemented from <a> or <button> components. For showing records or lists, toggle contextual overlays along with using the Bootstrap dropdown plugin.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > <!-- Required meta tags --> < meta charset = "utf-8" > < meta name = "viewport" content= " width = device -width, initial-scale = 1 , shrink-to-fit = no "> <!-- Bootstrap CSS --> < link rel = "stylesheet" href = integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous" > <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > </ script > < script src = integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" > </ script > < script src = integrity = "sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin = "anonymous" > </ script > </ head > < body > < center > < h1 style = "color: green" > GeeksforGeeks </ h1 > < div class = "dropdown" > < button class="btn btn-success dropdown-toggle" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Country Flags </ button > < ul class = "dropdown-menu" aria-labelledby = "dropdownMenuButton" > < li class = "dropdown-item" > < img src = width = "20" height = "15" > India</ li > < li class = "dropdown-item" > < img src = width = "20" height = "15" > USA</ li > < li class = "dropdown-item" > < img src = width = "20" height = "15" > England</ li > < li class = "dropdown-item" > < img src = width = "20" height = "15" > Brazil</ li > </ ul > </ div > </ center > </ body > </ html > |
Output:
In above example, you can toggle (click on and off) button to see the dropdown list.
Note: You can use <div> tag instead of <ul> tag and <a> tag instead of <li> tag in above example.