How to CSS visibility works-CodePudding

I put my whole code in https://jsfiddle.net/xmbohx/kuaen74m/5/

Trying to toggle the profile picture to reveal the menu in it but cannot.

the html:

<div >
        <div >
            <div >
                <div>
                    <div >LOGG <span>Panel</span></div>
                </div>
                <div >
                    <i ></i>
                </div>
                <div  onclick="menuToggle()">
                    <img src="img2.jpg">
                    <div >
                        <h3>My name <br><span>operator</span></h3>
                        <ul>
                            <li><a href="#"><i ></i><span>Edit</span></a></li>
                            <li><a href="#"><i ></i><span>Message</span></a></li>
                            <li><a href="#"><i ></i><span>Setting</span></a></li>
                            <li><a href="#"><i ></i><span>Help</span></a></li>
                            <li><a href="#"><i ></i><span>Logout</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

the action class is :

.wrapper .header .header-menu .action .propic {       
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #ffffff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 1);
border-radius: 15px;
transition: 0.5s;
    
visibility: hidden;
opacity: 0;    
}
    
.wrapper .header .header-menu .action .propic. active {visibility: visible;
opacity: 1;
}

Pls advise what missing in the code

CodePudding user response：

Your problem is coming from the fact you have a css property overflow:hidden on the node with class name action

try replacing in your html with the following :

            <div  onclick="menuToggle()">
                <div id="round">
                    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg">
                </div>
                <div >
                    <h3>My name <br><span>operator</span></h3>
                    <ul>
                        <li><a href="#"><i ></i><span>Edit</span></a></li>
                        <li><a href="#"><i ></i><span>Message</span></a></li>
                        <li><a href="#"><i ></i><span>Setting</span></a></li>
                        <li><a href="#"><i ></i><span>Help</span></a></li>
                        <li><a href="#"><i ></i><span>Logout</span></a></li>
                    </ul>
                </div>
            </div>

and then modify this part of the css :

.wrapper .header .header-menu .action {
    position: relative;
    width: 34px;
    height: 34px;
    cursor: pointer;
}
.wrapper .header .header-menu .action #round {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow:hidden;
}

I nested the image in a new div, moved the overflow hidden property to this div, then it works.

fiddle

CodePudding user response：

Remove overflow: hidden on .action, this is preventing the children menu to be visible.

Once that is done, since the orange image is absolute positioned, it grows beyond its parent (because its width & height are 100px).

To adjust this, you can move border-radius: 50% to img & change its width & height to 34px, which is the same as .action (parent).

Edited CSS lines (in .action & img) are noted with comments below:

$(document).ready(function() {
  $(".sidebar-btn").click(function() {
    $(".wrapper").toggleClass("kollapse");
  });
});

function menuToggle() {
  const toggleMenu = document.querySelector('.propic')
  toggleMenu.classList.toggle('active')
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

body {
  background: #fff;
}

.wrapper .header {
  z-index: 1;
  background: #22242A;
  position: fixed;
  width: calc(100% - 0%);
  height: 90px;
  display: flex;
  top: 0;
}

.wrapper .header .header-menu {
  width: calc(100% - 0%);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}


/*text kiri atas*/

.wrapper .header .header-menu .title {
  color: #fff;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 900;
}

.wrapper .header .header-menu .title span {
  color: #4ccee8;
}


/*garis datar 3*/

.wrapper .header .header-menu .sidebar-btn {
  color: #fff;
  position: absolute;
  margin-left: 240px;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  transition: 0.3s;
  transition-property: color;
}

.wrapper .header .header-menu .sidebar-btn:hover {
  color: #4ccee8;
}

.wrapper .header .header-menu ul {
  display: flex;
}


/*tombol sebelah my panel*/

.wrapper .header .header-menu ul li a {
  background: #ffff;
  color: #000;
  display: block;
  margin: 0 10px;
  font-size: 18px;
  width: 34px;
  height: 34px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  transition-property: background, color;
}

.wrapper .header .header-menu ul li a:hover {
  background: #4ccee8;
  color: #fff;
}


/*************************************************************************/

.wrapper .header .header-menu .action {
  position: relative;
  width: 34px;
  height: 34px;
  cursor: pointer;
  /* removed these */
  /* border-radius: 50%; */
  /* overflow: hidden; */

}

.wrapper .header .header-menu .action img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  /* changed */
  width: 34px;
  height: 34px;
  /* added */
  border-radius: 50%;
  
}

.wrapper .header .header-menu .action .propic {
  position: absolute;
  top: 120px;
  right: -10px;
  padding: 10px 20px;
  background: #ffffff;
  width: 200px;
  box-sizing: 0 5px 25px rgba(0, 0, 0, 1);
  border-radius: 15px;
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}

.wrapper .header .header-menu .action .propic.active {
  visibility: visible;
  opacity: 1;
}

.wrapper .header .header-menu .action .propic::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 28px;
  width: 20px;
  height: 20px;
  background: red;
  transform: rotate(45deg);
}

.wrapper .header .header-menu .action .propic .h3 {
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding: 20px 0;
  font-weight: 500;
  color: #555;
  line-height: 1.2em;
}

.wrapper .header .header-menu .action.propic h3 span {
  font-size: 14px;
  color: black;
  font-weight: 400;
}

.wrapper .header .header-menu .action.propic ul li {
  list-style: none;
  padding: 10px 0;
  border-top: 1px soild rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.wrapper .header .header-menu .action.propic ul li img {
  max-width: 20px;
  margin-right: 10px;
  opacity: 0.5;
  transition: 0.5s;
}

.wrapper .header .header-menu .action.propic ul li i {
  max-width: 20px;
  margin-right: 10px;
  opacity: 0.5;
  transition: 0.5s;
}

.wrapper .header .header-menu .action.propic ul li:hover img {
  opacity: 1;
}

.wrapper .header .header-menu .action.propic ul li a {
  display: inline-block;
  text-decoration: none;
  color: #555;
  font-weight: 500;
  transition: 0.5s;
}

.wrapper .header .header-menu .action.propic ul li :hover a {
  color: #ff5d94;
}


/*************************************************************************/

.wrapper .sidebar {
  z-index: 1;
  background: #2f323a;
  position: fixed;
  top: 90px;
  width: 250px;
  height: calc(100% - 9%);
  transition: 0.3s;
  transition-property: width;
  overflow-y: auto;
}

.wrapper .sidebar .sidebar-menu {
  overflow: hidden;
}

.wrapper .sidebar .sidebar-menu .profile img {
  margin: 20px 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.wrapper .sidebar .sidebar-menu .profile p {
  color: #bbb;
  font-weight: 700;
  margin-bottom: 10px;
}

.wrapper .sidebar .sidebar-menu .item {
  width: 250px;
  overflow: hidden;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn {
  /**
    ini di nonaktifkan 
    display: block;
    **/
  color: #fff;
  position: relative;
  padding: 22px 15px;
  transition: 0.3s;
  transition-property: color;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn:hover {
  color: #4ccee8;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn i {
  margin-right: 20px;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn .drop-down {
  float: right;
  font-size: 12px;
  margin-top: 3px;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu {
  background: #3498d8;
  overflow: hidden;
  max-height: 0;
  transition: 0.3s;
  transition-property: background, max-height;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu a {
  display: block;
  position: relative;
  color: #fff;
  white-space: nowrap;
  font-size: 15px;
  padding: 10px;
  /*padding: 5px;
    padding : spasi_atas_bawah spasi_dari kiri
    */
  border-bottom: 1px solid #8fc5e9;
  transition: 0.3s;
  transition-property: background;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu a:hover {
  background: #55b1f0;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu i {
  padding-right: 25px;
  font-size: 15px;
}

.wrapper .sidebar .sidebar-menu .item:target .sub-menu {
  max-height: 500px;
}

.wrapper .main-container {
  width: (100% - 250px);
  margin-top: 70px;
  margin-left: 250px;
  padding: 15px;
  /*
    background: url("images/background.jpg")no-repeat;*/
  background-size: cover;
  height: 100vh;
  transition: 0.3s;
}

.wrapper.kollapse .sidebar {
  width: 70px;
}

.wrapper.kollapse .sidebar .profile img,
.wrapper.kollapse .sidebar .profile p,
.wrapper.kollapse .sidebar a span {
  display: none;
}

.wrapper.kollapse .sidebar .sidebar-menu .item .menu-btn {
  font-size: 23px;
}

.wrapper.kollapse .sidebar .sidebar-menu .item .sub-menu i {
  font-size: 38x;
  padding-left: 3px;
}

.wrapper.kollapse .main-container {
  width: (100% - 70px);
  margin-left: 70px;
}

.wrapper .main-container .card {
  background: #fff;
  padding: 15px;
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: 20px;
}


/*responsive CSS*/

@media screen and (max-width:500px) {
  .wrapper .sidebar {
    width: 70px;
  }
  .wrapper .sidebar .profile img,
  .wrapper .sidebar .profile p,
  .wrapper .sidebar a span {
    display: none;
  }
  .wrapper .sidebar .sidebar-menu .item .menu-btn {
    font-size: 23px;
  }
  .wrapper.sidebar .sidebar-menu .item .sub-menu i {
    font-size: 38x;
    padding-left: 3px;
  }
  .wrapper .main-container {
    width: (100% - 70px);
    margin-left: 70px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" charset="utf-8"></script>

<div >
  <div >
    <div >
      <div>
        <div >LOGG <span>Panel</span></div>
      </div>
      <div >
        <i ></i>
      </div>
      <div  onclick="menuToggle()">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg">
        <div >
          <h3>My name <br><span>operator</span></h3>
          <ul>
            <li><a href="#"><i ></i><span>Edit</span></a></li>
            <li><a href="#"><i ></i><span>Message</span></a></li>
            <li><a href="#"><i ></i><span>Setting</span></a></li>
            <li><a href="#"><i ></i><span>Help</span></a></li>
            <li><a href="#"><i ></i><span>Logout</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>