How to Add Image into Dropdown List for each items ?

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= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132503/iflag.jpg"
                    width="20" height="15"> India</a> 
  
                <a href="#"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg"
                    width="20" height="15"> USA</a> 
                <a href="#"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132502/eflag.jpg"
                    width="20" height="15"> England</a> 
                <a href="#"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132500/bflag.jpg"
                    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= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity= 
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous"> 
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js,  
        then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity= 
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity= 
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        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= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132503/iflag.jpg"
                    width="20" height="15"> India</li> 
                <li class="dropdown-item"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg" 
                    width="20" height="15"> USA</li> 
                <li class="dropdown-item"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132502/eflag.jpg" 
                    width="20" height="15"> England</li> 
                <li class="dropdown-item"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132500/bflag.jpg"
                    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.

My Personal Notes

HTML

HTML

Recommended Posts: