I was looking into creating a few navigation bars for practice. In todays life, been responsive is a must since our mobile devices are becoming irresistible.
I want to understand the terminology, not much for the code. I want a navigation bar that when it reaches a window width of 480px, it will condense the navigation bar to a simple button (hamburger icon).
Should i first design the navigation bar as if it was on a smaller device, then use javascript to check the size of the window and if the size is larger, to change the parameters of the css? Or should i simply just use @media and have that change without javascript?
The reason why im asking is because i see a ton of examples out there that utilize both javascript and css.
I just want to understand the terminology in plain english before i jump in and see what i necessary and what isn’t.
You can use css and media queries to change the navigation bar to a hamburger button at the prescribed width however you will still need to use use js so that you can then open the mobile navigation menu on click as mobiles don’t work very well with hover (there are css methods using the checkbox hack to get around this but in the end its still easier to add a little js to create the open and close of the mobile with a click action and indeed the checkbox hack is not well supported on android).
The menus themselves should be styled by css and you should use the same html for the mobile menu (in most cases) rather than duplicating html or creating another menu.
How can i approach it using javascript so that the onclick event toggles whenever i click the navigation toggle? I seen examples like:
However, most examples ive seen include jQuery and JQuery isn’t something i know and its something i don’t feel like partaking since i don’t really know Javascript too well to begin with.