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.
