What I trying to do is to click on the photo and show a drop down menu below it. How can i achieve it by just using html and css only?

After i clicked on this profile image it should show a drop down list content sub menu which will href to another page.

Expected output:

Html:

<img src="assets/images/dashboardpage/profile.png"  alt="ProfileAvatar">

CSS:

.profile{
position: absolute;
left: 93.54%;
right: 3.96%;
top: 18.64%;
bottom: 20.34%;

}

CodePudding user response：

here's one using ul and li

$(function() {
  // Set
  var main = $('div.mm-dropdown .textfirst')
  var li = $('div.mm-dropdown > ul > li.input-option')
  var inputoption = $("div.mm-dropdown .option")
  var default_text = 'Select<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" width="10" height="10"  />';

  // Animation
  main.click(function() {
    main.html(default_text);
    li.toggle('fast');
  });

  // Insert Data
  li.click(function() {
    // hide
    li.toggle('fast');
    var livalue = $(this).data('value');
    var lihtml = $(this).html();
    main.html(lihtml);
    inputoption.val(livalue);
  });
});

div.mm-dropdown {
  border: 1px solid #ddd;
  width: 100%;
  border-radius: 3px;a
}

div.mm-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 0;
}

div.mm-dropdown ul li,
div.mm-dropdown div.textfirst {
  padding: 0;
  color: #333;
  border-bottom: 1px solid #ddd;
  padding: 5px 15px;
}

div.mm-dropdown div.textfirst img.down {
  float: right;
  margin-top: 5px
}

div.mm-dropdown ul li:last-child {
  border-bottom: 0;
}

div.mm-dropdown ul li {
  display: none;
  padding-left: 25px;
}

div.mm-dropdown ul li.main {
  display: block;
}

div.mm-dropdown ul li img {
  width: 20px;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Dev. by munkgorn -->
<!-- Use This! #just fix width height IMG  -->
<div >
  <div >Select<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" width="10" height="10"  /></div>
  <ul>
    <li  data-value="1">
      <img src="https://cdn2.iconfinder.com/data/icons/designers-and-developers-icon-set/32/image-512.png" alt="" width="20" height="20" /> Text1
    </li>
    <li  data-value="2">
      <img src="https://cdn2.iconfinder.com/data/icons/designers-and-developers-icon-set/32/image-512.png" alt="" width="20" height="20" /> Text2
    </li>
    <li  data-value="3">
      <img src="https://cdn2.iconfinder.com/data/icons/designers-and-developers-icon-set/32/image-512.png" alt="" width="20" height="20" /> Text3
    </li>
  </ul>
  <input type="hidden"  name="namesubmit" value="" />
</div>
<!-- End This -->

CodePudding user response：

Here is an example with HTML CSS only.

https://codepen.io/IvanBisultanov/pen/bGLqyYo

<div >
  <input id="toggler" type="checkbox">
  <label for="toggler">
    <img src="https://via.placeholder.com/30/FF0000/FFFFFF" alt="">
  </label>
  <div >
    <a href="">link1</a>
    <a href="">link2</a>
    <a href="">link3</a>
  </div>
</div>

<style>
.wrapper {
  position: relative;
  text-align: right;
}
input {
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}
.dropdown {
  display: none;
  position: absolute;
  top: calc(100%   10px);
  flex-direction: column;
  border: 1px solid black;
  padding: 20px;
  gap: 5px;
  right: 0;
}
input:checked ~ .dropdown {
  display: flex;
}
</style>

Best