CSS - How to prevent opening both left and right sidebar? - html

Question

I am a beginner of HTML and CSS. I am learning web development recently and trying to make a simple website page. On that page, there will be two sidebars. One is left side bar, other one is right side bar. But when i click on left sidebar menu icon, it opens both left and right sidebar, but i want to open only left one. And when i click on right sidebar menu icon, it only opens right sidebar. What am i doing wrong here ?
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background: white;
padding: 0;
margin: 0;
font-family: tahoma;
}
body {
background-image: url(scene.jpg);
background-size: cover;
background-position: center;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #000000;
position: fixed;
height: 60px !important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #000000 0%, #3f5efb 100%);
}
.rightsidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #000000 0%, #3f5efb 100%);
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba (255, 255, 255, 0.10);
}
.rightsidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba (255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: white;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba (255, 255, 255, 0.10);
}
.rightsidebarMenuInner li {
list-style: none;
color: white;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba (255, 255, 255, 0.10);
}
.sidebarMenuInner li a {
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
color: white;
border: 2px;
}
.rightsidebarMenuInner li a {
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
color: white;
border: 2px;
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba (255, 255, 255, 0.50);
}
.rightsidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba (255, 255, 255, 0.50);
}
input[type="checkbox"] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
input[type="checkbox"] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
input[type="checkbox"]:checked~.sidebarMenu {
transform: translateX(0);
}
input[type="checkbox"]:checked~.rightsidebarMenu {
transform: translateX(0);
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 35px;
height: 22px;
width: 22px;
}
.rightsidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 35px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.right.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.right.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
margin-top: 3px;
}
.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
}
.right.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.right.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
margin-top: 3px;
}
input[type="checkbox"]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type="checkbox"]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type="checkbox"]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -8px;
}
input[type="checkbox"]:checked~.rightsidebarIconToggle>.right.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type="checkbox"]:checked~.rightsidebarIconToggle>.right.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type="checkbox"]:checked~.rightsidebarIconToggle>.right.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -8px;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div class="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Munem Sohan <span>Web Developer</span></li>
<li><span>Company</span></li>
<li><span>Facebook</span></li>
<li><span>Twitter</span></li>
</ul>
</div>
<input type="checkbox" class="rightopenSidebarMenu" id="rightopenSidebarMenu">
<label for="rightopenSidebarMenu" class="rightsidebarIconToggle">
<div class="right spinner diagonal part-1"></div>
<div class="right spinner horizontal"></div>
<div class="right spinner diagonal part-2"></div>
</label>
<div class="rightsidebarMenu">
<ul class="rightsidebarMenuInner">
<li>Sohan <span>Web Developer</span></li>
<li><span>Sabbir</span></li>
<li><span>Sumi</span></li>
<li><span>Shovon</span></li>
</ul>
</div>

Answer 1

You need to add id with checkbox, so it can apply checkbox uniquely for opening toggle
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background: white;
padding: 0;
margin: 0;
font-family: tahoma;
}
body {
background-image: url(scene.jpg);
background-size: cover;
background-position: center;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #000000;
position: fixed;
height: 60px !important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #000000 0%, #3f5efb 100%);
}
.rightsidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #000000 0%, #3f5efb 100%);
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba (255, 255, 255, 0.10);
}
.rightsidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba (255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: white;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba (255, 255, 255, 0.10);
}
.rightsidebarMenuInner li {
list-style: none;
color: white;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba (255, 255, 255, 0.10);
}
.sidebarMenuInner li a {
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
color: white;
border: 2px;
}
.rightsidebarMenuInner li a {
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
color: white;
border: 2px;
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba (255, 255, 255, 0.50);
}
.rightsidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba (255, 255, 255, 0.50);
}
input[type="checkbox"] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
input[type="checkbox"] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
input[type="checkbox"]#openSidebarMenu:checked~.sidebarMenu {
transform: translateX(0);
}
input[type="checkbox"]#rightopenSidebarMenu:checked~.rightsidebarMenu {
transform: translateX(0);
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 35px;
height: 22px;
width: 22px;
}
.rightsidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 35px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.right.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.right.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
margin-top: 3px;
}
.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
}
.right.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.right.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
margin-top: 3px;
}
input[type="checkbox"]#openSidebarMenu:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type="checkbox"]#openSidebarMenu:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type="checkbox"]#openSidebarMenu:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -8px;
}
input[type="checkbox"]#rightopenSidebarMenu:checked~.rightsidebarIconToggle>.right.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type="checkbox"]#rightopenSidebarMenu:checked~.rightsidebarIconToggle>.right.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type="checkbox"]#rightopenSidebarMenu:checked~.rightsidebarIconToggle>.right.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -8px;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div class="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Munem Sohan <span>Web Developer</span></li>
<li><span>Company</span></li>
<li><span>Facebook</span></li>
<li><span>Twitter</span></li>
</ul>
</div>
<input type="checkbox" class="rightopenSidebarMenu" id="rightopenSidebarMenu">
<label for="rightopenSidebarMenu" class="rightsidebarIconToggle">
<div class="right spinner diagonal part-1"></div>
<div class="right spinner horizontal"></div>
<div class="right spinner diagonal part-2"></div>
</label>
<div class="rightsidebarMenu">
<ul class="rightsidebarMenuInner">
<li>Sohan <span>Web Developer</span></li>
<li><span>Sabbir</span></li>
<li><span>Sumi</span></li>
<li><span>Shovon</span></li>
</ul>
</div>