Can you help me figure out how to smoothly transition the width of an element with the style attributes transition: 0.5s and width: fit-content? Specifically, I want to apply this transition to the entire element, not just the padding. Here is the Codepen for reference.
I would appreciate a simple and straightforward solution!
window.onload = function() {
function openMenu() {
document.getElementById("sideMenuID").style.width = "50vw";
}
function closeMenu() {
document.getElementById("sideMenuID").style.width = "0";
}
}body {
font-family: "Helvetica", sans-serif;
}
.sideMenu {
white-space: nowrap;
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sideMenu a {
padding: 8px 8px 16px 36px;
text-decoration: none;
font-weight: bold;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sideMenu button {
border: none;
padding: 0px 0px 0px 0px;
text-decoration: none;
font-size: 18pt;
font-weight: bold;
color: #ffffff;
background-color: inherit;
display: block;
transition: 0.3s;
cursor: pointer;
}
.sideMenu a:hover button:hover {
color: #b8b8b8;
}
.sideMenu .closebtn {
float: right;
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openSideMenuIcon {
position: fixed;
z-index: 2;
color: #b8b8b8;
}
@media screen and (max-height: 450px) {
.sideMenu {padding-top: 15px;}
.sideMenu a {font-size: 18px;}
}<html>
<head>
<title>Summer Vacation Countdown!</title>
<meta name="description" content="A summer vacation countdown made by Austin Charbonneau, a freshman." />
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css"></link>
</head>
<body id="body">
<script>
function openMenu() {
document.getElementById("sideMenuID").style.width = "fit-content";
document.getElementById("sideMenuID").style.paddingRight = "7vw";
}
function closeMenu() {
document.getElementById("sideMenuID").style.width = "0";
document.getElementById("sideMenuID").style.paddingRight = "0px";
}
</script>
<div id="sideMenuID" class="sideMenu">
<a href="javascript:void(0)" class="closebtn" onclick="closeMenu()">×</a>
<a><button onclick="openTimeSetMenu()" id="setTimeMenuOpenButton">Set Closing Time</button></a>
<a><button onclick="" id="contactSuggestions">Contact/Suggestions</button></a>
</div>
<span style="position: absolute;font-size:50px;cursor:pointer;color: #b8b8b8;z-index: 0;" onclick="openMenu()">☰</span>
</body>
</html>