从左到上移动侧栏

Question

我有这个侧边栏，它最初放置在桌面和更大屏幕上的左侧到右侧。 在平板电脑和较小的屏幕中，此侧边栏是否有可能从底部移动到顶部？ 就像当我在桌面或更大的屏幕上单击侧边栏时，它会从左到右导航，我想要的是当我在平板电脑或更小的平板电脑中单击侧边栏时，它应该从上到下展开 这就是我目前所拥有的。

function openNav() {
document.getElementById("mySidebar").style.width = "40%";
document.getElementById("main").style.marginLeft = "40%";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}

.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 999999;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
color: black;
padding: 10px 15px;
border: none;
background: transparent;
outline: none;
}
#main {
transition: margin-left .5s;
background-color: #fff;
border: 1px solid black;
height: 100vh;
width: 48px;
@media (max-width: 768px) {
width: 100%;
text-align: center;
height: 48px;
}
}

<div id="mySidebar" class="sidebar">
<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">
<button class="openbtn" onclick="openNav()">☰</button>
</div>

Answer 1

试试这个解决方案，如果您需要更多解释，请告诉我

var x = window.matchMedia("(max-width: 768px)");
function openNav() {
if (!x.matches) {
document.getElementById("mySidebar").style.height = "60%";
document.getElementById("mySidebar").style.width = "100%";
document.getElementById("main").style.marginTop = "50%";
} else {
document.getElementById("mySidebar").style.width = "40%";
document.getElementById("main").style.marginLeft = "40%";
}
}
function closeNav() {
if (!x.matches) {
document.getElementById("mySidebar").style.height = "0";
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginTop = "0";
} else {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
}

.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 999999;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: all 0.5s;
padding-top: 60px;
@media (max-width: 768px) {
height: 0;
width: 0;
}
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
font-size: 36px;
right: 0;
top: 5px;
margin-left: 40px;

@media (max-width: 768px) {
bottom: 0;
left: 25px;
margin-top: 40px;
}
}
.openbtn {
font-size: 20px;
cursor: pointer;
color: black;
padding: 10px 15px;
border: none;
background: transparent;
outline: none;
}
#main {
transition: margin-top .5s;
background-color: #fff;
border: 1px solid black;
height: 100vh;
width: 48px;
@media (max-width: 768px) {
height: 48px;
width: 100vw;
}
}

<div id="mySidebar" class="sidebar">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
</div>

Answer 2

可以使用@media查询来确定屏幕大小，然后相应地设置其样式。这是W3schools的简单解释，然后您可以从顶部进行过渡，而不是从左侧过渡。