0

Can someone help us to create like this dropdown, I've already search this kind but what I found is dropdown for countries with flag only. thanks

click this to view my sample picture

this is the sample image

Please Help us

  • 1
    When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be [mcve](https://stackoverflow.com/help/mcve) – guradio Jan 22 '18 at 03:01
  • 1
    Show your work so far – Lakindu Gunasekara Jan 22 '18 at 03:01
  • 1
    Possible duplicate of [Putting images with options in a dropdown list](https://stackoverflow.com/questions/4941004/putting-images-with-options-in-a-dropdown-list) – Bellator Jan 22 '18 at 03:14

2 Answers2

0

How about...

HTML 

<body>
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img src="https://lorempixel.com/75/50/abstract/">
      0123 4567 8912 3456
      <span class="glyphicon glyphicon-chevron-down"></span>
    </button>

    <ul class="dropdown-menu">
      <li class="dropdown-header">Member name (you)</li>
      <li>
        <a href="#" title="Select this card"><img src="https://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>
      <li>
        <a href="#" title="Select this card"><img src="https://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>
      <li class="dropdown-header">Member name</li>
      <li>
        <a href="#" title="Select this card"><img src="https://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>
    </ul>
  </div>
</body>

CSS

body { padding: 40px; }
.dropdown-toggle, .dropdown-menu { width: 300px }
.btn-group img { margin-right: 10px }
.dropdown-toggle { padding-right: 50px }
.dropdown-toggle .glyphicon { margin-left: 20px; margin-right: -40px }
.dropdown-menu>li>a:hover { background: #f1f9fd } /* $search-blue */
.dropdown-header { background: #ccc; font-size: 14px; font-weight: 700; padding-top: 5px; padding-bottom: 5px; margin-top: 10px; margin-bottom: 5px }

Image in dropdown demo

suchislife
  • 4,251
  • 10
  • 47
  • 78
0

I think if you need simple drop down html you can find the code in this link.

however if you need advanced js, css you can find it in this link

Adam
  • 55
  • 1
  • 9
  • answering with a link is not a good answer because link with rot and the answer with have no use for future readers – guradio Jan 22 '18 at 03:34