1

Я сделал одно меню "(https://www.mobila.name/post/53eb5a219dcff/)"и все отлично работает. Потом создал еще одно такое же меню и завернул их оба в див класс left-cb и right-sb. Естественно попутно создав в папке sass два файла и подключил их к общему sass (@import 'Left-SB.sass' и @import 'Right-SB.sass'). И ... что у нас получается? А ничего! левое меню и его бургер работает а правое нет. Показателем того что правое меню подключено является то что есть еще один бургер справа на экране и само поломанное меню. Но нет, поломанное меню это еще пол проблемы, если бы оно было под управлением своего бургера ( как вы уже поняли оно вообще никак не управляется). А основная проблема состоит в том что этот правый бургер открывает и закрывает левое меню а правому хоть бы хны. Как сделать чтобы бургер открывал правое меню, а его меню отображалось не поломанно а правильно(так же как и левое) ?

.left-sb {
  width: 25%;
  float: left;
}

.left-sb .hidden-menu-ticker {
  display: none;
}

.left-sb .btn-menu-l {
  color: #fff;
  background-color: #666;
  padding: 5px;
  position: fixed;
  top: 50px;
  left: 351px;
  cursor: pointer;
  transition: left .23s;
  z-index: 3;
  width: 25px;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.left-sb .btn-menu-l span {
  display: block;
  height: 5px;
  width: 30px;
  background-color: #fff;
  margin: 3px 0 0 -3px;
  transition: all .1s linear .23s;
  position: relative;
}

.left-sb .btn-menu-l span.firsts {
  margin-top: 0;
}

.left-sb .hidden-menu-ticker-l:checked ~ .btn-menu-l {
  left: 360px;
  top: 50px;
}

.left-sb .hidden-menu-ticker-l:checked ~ .hidden-menu-l {
  left: 0;
}

.left-sb .hidden-menu-ticker-l:checked ~ .btn-menu-l span.first-l {
  -webkit-transform: rotate(45deg);
  top: 10px;
}

.left-sb .hidden-menu-ticker-l:checked ~ .btn-menu-l span.second-l {
  opacity: 0;
}

.left-sb .hidden-menu-ticker-l:checked ~ .btn-menu-l span.third-l {
  -webkit-transform: rotate(-45deg);
  top: -10px;
}

.left-sb .hidden-menu-l {
  display: block;
  position: fixed;
  list-style: none;
  padding: 10px;
  margin: 0;
  box-sizing: border-box;
  width: 360px;
  background-color: #eee;
  height: 100%;
  top: 0;
  left: -360px;
  transition: left .2s;
  z-index: 2;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.right-sb {
  width: 25%;
  float: right;
}

.right-sb .hidden-menu-ticker-r {
  display: none;
}

.right-sb .btn-menu-r {
  color: #fff;
  background-color: #666;
  padding: 5px;
  position: fixed;
  top: 50px;
  right: 351px;
  cursor: pointer;
  transition: right .23s;
  z-index: 3;
  width: 25px;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.right-sb .btn-menu-r span {
  display: block;
  height: 5px;
  width: 30px;
  background-color: #fff;
  margin: 3px 0 0 -3px;
  transition: all .1s linear .23s;
  position: relative;
}

.right-sb .btn-menu-r span.first {
  margin-top: 0;
}

.right-sb .hidden-menu-ticker-r:checked ~ .btn-menu-r {
  right: 360px;
  top: 50px;
}

.right-sb .hidden-menu-ticker-r:checked ~ .hidden-menu-r {
  right: 0;
}

.right-sb .hidden-menu-ticker-r:checked ~ .btn-menu-r span.first-r {
  -webkit-transform: rotate(45deg);
  top: 10px;
}

.right-sb .hidden-menu-ticker-r:checked ~ .btn-menu-r span.second-r {
  opacity: 0;
}

.right-sb .hidden-menu-ticker-r:checked ~ .btn-menu-r span.third-r {
  -webkit-transform: rotate(-45deg);
  top: -10px;
}

.right-sb .hidden-menu-r {
  display: block;
  position: fixed;
  list-style: none;
  padding: 10px;
  margin: 0;
  box-sizing: border-box;
  width: 360px;
  background-color: #eee;
  height: 100%;
  top: 0;
  right: -360px;
  transition: right .2s;
  z-index: 2;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

* {
  border: 1px solid #000;
}

body, html {
  height: 100%;
  margin: 0;
  font-family: helvetica;
  font-weight: 100;
}

.container {
  background-color: pink;
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
  position: relative;
  height: 100%;
  width: 100%;
}

header {
  background-color: #d0f;
}

main {
  display: block;
  position: relative;
  height: 800px;
  background-color: #e00;
}

main .button-RN {
  position: absolute;
  top: 50px;
  right: 120px;
  width: 30px;
  height: 80px;
}

main #leftNav {
  position: fixed;
  top: 75px;
  left: 0;
  width: 25%;
  height: 500px;
}

main #leftNav .my-menu ul li {
  text-align: center;
  text-decoration: none;
  list-style: none;
}

main .button-LN {
  position: absolute;
  top: 50px;
  left: 120px;
  width: 30px;
  height: 80px;
}

main #rightNav {
  position: fixed;
  top: 75px;
  right: 0;
  width: 25%;
  height: 500px;
}

main #rightNav .my-menu ul li {
  text-align: center;
  text-decoration: none;
  list-style: none;
}

footer {
  background-color: #d0f;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

	<link rel="stylesheet" href="css/libs.min.css">
	<link rel="stylesheet" href="css/main.css">

<!-- 	<script type="text/javascript">//<![CDATA[ 
		$(window).load(function(){
		  $("[data-toggle]").click(function() {
		    var toggle_el = $(this).data("toggle");
		    $(toggle_el).toggleClass("open-sidebar");
		  });
		});//]]>
	</script> -->

</head>
<body>
	
	<header>
		header
	</header>

	<main>


		<div class="left-sb">
			<input type="checkbox" id="hmt" class="hidden-menu-ticker-l">
			<label class="btn-menu-l" for="hmt">
			  <span class="first-l"></span>
			  <span class="second-l"></span>
			  <span class="third-l"></span>
			</label>
			<ul class="hidden-menu-l">
			  <li><a href="">Link 1</a></li>  
			  <li><a href="">Link 2</a></li>
			  <li><a href="">Link 3</a></li>  
			</ul>
		</div>

		<div class="right-sb">
			<input type="checkbox" id="hmt" class="hidden-menu-ticker-r">
			<label class="btn-menu-r" for="hmt">
			  <span class="first-r"></span>
			  <span class="second-r"></span>
			  <span class="third-r"></span>
			</label>
			<ul class="hidden-menu-R">
			  <li><a href="">Link 1</a></li>  
			  <li><a href="">Link 2</a></li>
			  <li><a href="">Link 3</a></li>  
			</ul>
		</div>


		<!-- <div class="conta left-sb">
	    <div id="sidebar">
	      <ul>
	        <li><a href="#">Home</a></li>
	        <li><a href="#">Explore</a></li>
	        <li><a href="#">Users</a></li>
	        <li><a href="#">Sign Out</a></li>
	      </ul>
	    </div>
	    <div class="main-content">
	      <a href="#" data-toggle=".container" id="sidebar-toggle">
	        <span class="bar"></span>
	        <span class="bar"></span>
	        	<span class="bar"></span>
	      </a>
	  	</div>
		</div> -->



		<div id="content" class="container">
			section 
		</div>
<!-- 		<button class="button-RN" onclick="OnOffRightNav()">tytdrsf</button>

		<div id="leftNav">
			<button class="button-LN" onclick="OnOffLeftNav()">kljkljlk</button>
			<nav class="my-menu">
				<ul>
					<li><a href="#"></a></li>
					<li class="active"><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
			</nav>
		</div>

		<div id="rightNav">
			<nav class="my-menu">
				<ul>
					<li><a href="#"></a></li>
					<li class="active"><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
		</div> -->
	</main>
	<footer>
		footer
	</footer>
	
	<script src="js/libs.min.js"></script>
	<script src="js/common.js"></script>
	<script src="js/jquery.js"></script>

</body>
</html>

1 ответ 1

1

У вас на странице 2 input с одинаковым id. Поскольку, правЫй label привязан к input с id="hmt", он находит первЫй input и изменяет его состояние. Поэтому у вас открывается левое меню. Измените id у input.hidden-menu-ticker-r и аттрибут for у правого lable.btn-menu-r.

<input type="checkbox" id="hmt" class="hidden-menu-ticker-r">
        <label class="btn-menu-r" for="hmt">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.