Я сделал одно меню "(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>