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).
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.