I am experimenting with a responsive design and facing an issue - the width of my #menu in CSS is initially set to 0, but I need to change this value based on user input using JavaScript.
Now, I want to dynamically adjust the width of the menu for different screen sizes by modifying the CSS. Here is what I have tried:
@media only screen and (min-width: 320px) and (max-width: 480px) {
#menu {
height: 30px;
width: 200px;
}
}
However, this approach does not work as the width is set through JavaScript.
How can I update the JavaScript code to achieve this?
function toggleMenu() {
var menu = document.getElementById("menu");
var basket = document.getElementById("basket1");
if (menu.style.width == '420px') {
menu.style.width = '0';
menu.style.opacity = 1;
basket.style.opacity = 1;
} else {
menu.style.width = "420px";
menu.style.opacity = 1;
basket.style.opacity = 0;
}
}.nav-menu {
overflow: hidden;
height: 35px;
position: absolute;
right: 49px;
top: 10px;
background: rgba(14, 13, 13, 0.7);
transition: 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(14, 13, 13, 0.7);
}
#menu {
width: 0;
}<div>
<div id="menuToggle">
<input type="checkbox" onclick="toggleMenu()">
<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>
</div>
<div>
<nav class="nav-menu" id="menu">
<ul>
<li><a href="#" onclick="openSection('figurative1')">FIGURATIVE</a></li>
<li><a href="#" onclick="openSection('painting1')">PAINTING</a></li>
<li><a href="#" onclick="openSection('portrait1')">PORTRAIT</a></li>
<li><a href="#" onclick="openSection('stilllife1')">STILL LIFE</a></li>
<li><a href="#" onclick="openSection('landscape1')">LANDSCAPE</a></li>
</ul>
</nav>
</div>
</div>