Here's the issue I'm facing:
On my website, there is a sidebar menu located on the left-hand side. However, when the screen size decreases, the menu occupies too much space, so I have implemented a "minimize" feature for it. This involves applying a different style to the menu when the screen width falls below a certain pixel size using a media query.
My goal now is to provide users with the ability to minimize the menu even on larger screens by clicking a button. This would essentially mean applying the same style as defined in my media query.
I am aware that I could simply add a class to the container upon clicking the button and manually replicate the code from the media query for this new class. However, I believe there must be a more efficient way to achieve this without duplicating the code.
At the moment, this is how the styling is structured:
/* Default menu style */
#menu{
width:100px;
background-color:#ddd;
padding:15px;
}
#menu li{
color:red;
padding:20px 20px;
}
/* Style for smaller screens (max-width:600px) */
@media (max-width: 600px) {
#menu{
width:40px;
padding:5px;
}
#menu li{
padding: 10px 10px;
}
...
/* ...additional styles... */
}
/* Same style for class .buttonClicked */
.buttonClicked #menu{
width:40px;
padding:5px;
}
.buttonClicked #menu li{
padding: 10px 10px;
}
...
/* ...additional styles... */
The example provided is simplistic compared to the actual complexity of the menu styling, hence my desire to avoid unnecessary duplication of code.
Additionally, here is a JsFiddle link showcasing the current setup: https://jsfiddle.net/rtnp67s2/3/
EDIT : Essentially, what I aim to achieve is a refactor of the existing styling code. Is this feasible?
An ideal solution might resemble something like the following (though not functional):
/* Combined style for small screens (<600px) or when class .buttonClicked is active */
@media (max-width: 600px), .buttonClicked {
#menu{
width:40px;
padding:5px;
}
#menu li{
padding: 10px 10px;
}
/*... over 100 lines of additional styling... */
}
Thank you in advance!