我正在一个引导程序的网站上工作,我有一个非画布边栏,我已经被推入查看并在选择关闭图标时推回 . 它工作正常,但我需要找到一种方法,使其移动视图的宽度为100% . 侧边栏的工作方式,我无法使用媒体查询css,因为它在打开时使用JavaScript来设置侧边栏的宽度 . 我打开时设置为宽度为45%,这是桌面视图所需要的 . 但是,在移动视图中,它需要扩展整个宽度(100%),因为移动设备尺寸的45%宽度不够 . 我是JS的新手,所以我不确定如何用JS做到这一点 . 有没有办法使用JS在特定分辨率断点处设置宽度?
谢谢你的帮助 .
以下是我的代码:HTML:
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<h2>Button to open side menu</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
</body>
CSS:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
JS:
function openNav() {
document.getElementById("mySidenav").style.width = "45%";
document.getElementById("main").style.marginRight = "45%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
1 回答
最佳做法是不尝试直接使用JavaScript操作CSS . 您可以设置classNames,而不是将宽度设置为“45%”或“0”:
并添加这些CSS:
希望它会有所帮助 .