I am trying to change the behaviour of an element on my page when the screen is resized.
I have a left navigation menu that is open at max screen width of say 1200px but when the window is resized below 1200px I would like the left navigation to be closed and only open when hovered (like Amazons menu).
I have both elements setup and ready to go. For the normal navigation I have a css class of ".dropdown open" and for the closed hover menu I have a css class of ".dropdown"
Is there a way to use jQuery to swap the classes when the window is resized?
I'd appreciate some advice on how to do this please....
MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property
Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)