从左到上移动侧栏

Question

I have this sidebar which is initially placed on the left to the right side on desktop and bigger screens. is it possible that this sidebar moves to the top from the bottom in tablet and smaller screen? like when I clicked on the sidebar in desktop or bigger screens it navigates from left to right, what I want is that when I clicked on the sidebar in tablet or smaller it should expand from top to bottom This is what I have so far.

 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

Try tihs out for the solution, let me know if you need more explanation

 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

You can use @media queries to determine screen size, and then style it accordingly. Here is a simple explanation from W3schools, then instead of transitioning from the left, you can do it from the top.