Question

我正在尝试为我的HTML页面做一个侧边栏。但是我无法调整侧边栏的宽度。此外，单击时的菜单图标应关闭/打开侧边栏，但不起作用。

我是新学习者，请帮助。

#sidebar {
    background:#151719;
    height:1000px;
    width:20%; <!--- Cannot adjust width --->
    position:absolute;
    left:-248px; <!--- this will let the sidebar disapper --->
    transition:all .3 ease-in-out;
    -webkit-transition:all .3 ease-in-out;
    -moz-transition:all .3 ease-in-out;
    -ms-transition:all .3 ease-in-out;
    -o-transition:all .3 ease-in-out;
}

Answer 1

您已经接近，但注释分隔符应为/* .. */，而不是。 CSS不是HTML。这些注释会阻止CSS正确解析。

然后在中途有#sidebar {width: 100%;，它覆盖了顶部的width:248%;。

最后，选择复选框时用于移动侧栏的选择器应为#menuToggle:checked ~ #sidebar。你什么也没做。

如果您纠正了这些错误，则该页面将正常运行。

*{padding:0px;
  margin:0px;
  font-family:sans-serif;}
#sidebar{
	background:#151719;
	height:1000px;
	width:248px; /* Cannot adjust width */
	position:absolute;
	left:-248px; /* this will let the sidebar disapper */
	transition:all .3 ease-in-out;
	-webkit-transition:all .3 ease-in-out;
	-moz-transition:all .3 ease-in-out;
	-ms-transition:all .3 ease-in-out;
	-o-transition:all .3 ease-in-out;
	}
#sidebar .menu li{
	list-style-type:none;}
#sidebar .menu a{
	text-decoration:none;
	color:rgba(230,230,230,0.9);
	display:block;
	padding:15px 0;
	border-bottom:1px solid rgba(100,100,100,0.45);}
#header{
	width:100%;
	height:5%;
	margin:auto;
	border-bottom:1px solid #EEE;}
#header .brand{
	float:left;
	line-height:50px;
	color:#151719;
	font-size:30px;
	font-weight:bold;
	padding-left:20px;}
#sidebar{
	/* width:100%; */ /* removed because this would override the 248px above */
	text-align:center;}
#sidebar .menu li:last-child a{border-bottom:none;}
#sidebar a:hover{
	background:grey;
	color:black;}
.menu-icon{
	margin:2.5px 5px 0px 0px;
	padding:10px 15px;
	border-radius:5px;
	background:#151719;
	color:rgba(230,230,230,0.9);
	cursor:pointer;
	float:right;}
#menuToggle:checked ~ #sidebar {
	position:absolute;
	left:0;} /* Not sure is it correct or not, by clicking the checkbox, the sidebar should be displayed nicely, back to original */

<input type="checkbox" id="menuToggle" style="display:none;">
<label for="menuToggle" class="menu-icon">&#9776;</label>

<div id="header">
	<div class="brand">Cinema</div>
</div>

<div id="sidebar">
	<ul class="menu">
		<li><a href="#">Dashboard</a></li>
		<li><a href="#">Help Center</a></li>
		<li><a href="#">Summary</a></li>
		<li><a href="#">Customer Interface</a></li>
	</ul>
</div>

Answer 2

您可以这样设置宽度：

width: 20vw;
left: 0; // left: -20vw;

Answer 3

您的样式将应用于#menuToggle项目。因此，侧边栏永远不会听到有关此更改的消息。

#menuToggle:checked {
    position:absolute;
    left:0;
}

此外，由于两个元素都不具有HTML关系，因此CSS变通办法可能会有风险。重要的是要提到选择器#menuItem ~ #sidebar，它将选择#sidebar之前的#menuItem个。

#menuToggle:checked ~ #sidebar {
    position:absolute;
    left:0;
}

尽管当网站内容更多时，将来肯定会更容易崩溃。

我建议您在复选框上有一个事件侦听器，以在侧边栏元素上切换类。可以这样做：

document.getElementById('menuItem').addEventListener('change', function(e) {
     let sidebar = document.getElementById('sidebar');
     this.checked ?
          sidebar.classList.add('active') :
          sidebat.classList.remove('active');
});

侧边栏宽度无法调整

3 个答案: