CODEWITHSUNDEEP
htmlcssz-index
Gusar
Gusar

Reputation: 39

Why doesn't z-index work when opening the menu?

Please indicate the error. Why is the menu button not displayed when opening the menu? After clicking on the Burger, the button remains under the menu. For spanы I used position: relative and z-index, but the result is the same.

Can there be a problem in the fact that transition is applied to spans when clicking?

$(document).ready(function(){
	$('#nav-btn').click(function(){
    $('#menu').toggleClass('is-opened');
		$(this).toggleClass('open');
	});
});
.container {
	background-color: rgba(12, 20, 40, 0.24);
	min-height: 600px;
}
#nav-btn {
	width: 24px;
	height: 24px;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	cursor: pointer;
}
#nav-btn span {
	display: block;
	position: relative;
	height: 3px;
	width: 100%;
	background: #fff;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	z-index: 999;
}
#nav-btn span:nth-child(1) {
	top: 0px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}
#nav-btn span:nth-child(2) {
	top: 7px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}
#nav-btn span:nth-child(3) {
	top: 14px;
	width: 70%;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}
#nav-btn.open span:nth-child(1) {
	will-change: transform;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	will-change: transform;
	top: 18px;
	width: 30px;
}
#nav-btn.open span:nth-child(2) {
	will-change: transform;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	will-change: transform;
	top: -3px;
	width: 30px;
}
#nav-btn.open span:nth-child(3) {
	width: 0%;
	opacity: 0;
}
#menu {
	background-color: black;
	width: 100px;
	height: auto;
	padding: 30px 30px;
	text-align: center;
	position: absolute;
	top: 0;
	left: -160px;
	margin-top: 0;
	transition: all 0.3s ease;
}
#menu.is-opened {
	background-color: black;
	width: 100px;
	height: auto;
	padding: 30px 30px;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0px;
	margin-top: 0;
	transition: all 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="container">
		<div id="nav-btn">
			<span></span> <span></span> <span></span>
		</div>
		<div id="menu">
			123
		</div>
	</div>
</body>
</html>

Upvotes: 2

Views: 76

Answers (2)

Sumit Patel
Sumit Patel

Reputation: 4638

Z index work perfectly fine due to position: absolute; you have to adjust your element and also when menu is open you will need to change the color. check snippet.

$(document).ready(function() {
  $('#nav-btn').click(function() {
    $('#menu').toggleClass('is-opened');
    $(this).toggleClass('open');
  });
});
.container {
  background-color: rgba(12, 20, 40, 0.24);
  min-height: 600px;
}

#nav-btn {
  width: 24px;
  height: 24px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  z-index: 1;
}

#nav-btn span {
  display: block;
  position: relative;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  z-index: 999;
}

#nav-btn span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-btn span:nth-child(2) {
  top: 7px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-btn span:nth-child(3) {
  top: 14px;
  width: 70%;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-btn.open span:nth-child(1) {
  will-change: transform;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  will-change: transform;
  top: 18px;
  width: 30px;
}

#nav-btn.open span:nth-child(2) {
  will-change: transform;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  will-change: transform;
  top: -3px;
  width: 30px;
}

#nav-btn.open span:nth-child(3) {
  width: 0%;
  opacity: 0;
}

#menu {
  background-color: black;
  width: 100px;
  height: auto;
  padding: 30px 30px;
  text-align: center;
  position: absolute;
  top: 0;
  left: -160px;
  margin-top: 0;
  transition: all 0.3s ease;
  color: #fff;
}

#menu.is-opened {
  background-color: black;
  width: 100px;
  height: auto;
  padding: 30px 30px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0px;
  margin-top: 0;
  transition: all 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div class="container">
    <div id="nav-btn">
      <span></span> <span></span> <span></span>
    </div>
    <div id="menu">
      123
    </div>
  </div>
</body>

</html>

Upvotes: 2

Castle
Castle

Reputation: 427

i gave z-index:10 to #nav-btn and it worked

Upvotes: 3

Related Questions