Почему не работает z-index при открытии меню? - PullRequest
Новая
       12

Почему не работает z-index при открытии меню?

2 голосов
/ 02 марта 2020

Пожалуйста, укажите ошибку. Почему кнопка меню не отображается при открытии меню? После нажатия на Burger, кнопка остается под меню. Для промежутков я использовал положение: относительный и z-индекс, но результат один и тот же.

Может ли быть проблема в том, что переход применяется к промежуткам при нажатии? 

$(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>

Ответы [ 2 ]

3 голосов
/ 02 марта 2020

я дал z-index: 10 для # nav-btn, и это сработало

2 голосов
/ 02 марта 2020

Z index работает отлично, так как position: absolute; вы должны настроить свой элемент, а также, когда меню открыто, вам нужно будет изменить color. проверить фрагмент. 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...