html - CSS - 如何防止打开左右侧边栏？

Question

我是 HTML 和 CSS 的初学者。我最近正在学习 Web 开发并尝试制作一个简单的网站页面。在该页面上，将有两个侧边栏。一个是左侧栏，另一个是右侧栏。但是当我点击左侧边栏菜单图标时，它会同时打开左侧和右侧边栏，但我只想打开左侧边栏。当我点击右侧边栏菜单图标时，它只会打开右侧边栏。我在这里做错了什么？

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>

标签： htmlcss

Answer 1

您需要使用复选框添加 id，因此它可以唯一地应用复选框来打开切换

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>