Just like I expected: the next assignment for my MMP 240 is to code a responsive navigation bar. Based on this article, I am due to state my opinion regarding the different responsive techniques commonly used and to try to apply one of them to my project: Primavera de los Realizadores.
As I already mentioned, I usually use Bootstrap. Yet, this framework comes with a pre-built responsive navbar. All I have to do is to copy and paste this code appropriately to make the magic happen. Pretty easy, but not really didactic. Although I have to acknowledge that I sometimes practice it, the copy and paste technique does not really help to understand learn the ropes… There is nothing better like the “do it yourself!”
First step is to decide where and how to display the navigation. The article lists several solutions, each with pros and cons:
First of all, if I want a good grade for this assignment, I am not going to go for the Do Nothing or Hide and Cry solutions. I think their titles are pretty self explanatory: Needless to tell you why I would stay away from this kind of approach.
The Footer Anchor and Footer Only solutions are interesting, but they create jumps that can cause confusion: Indeed, suddenly the page scrolls down to the bottom. Basic users might find this disruptive.
So, by elimination, you should get it now: Yes! I choose the Toggle solution. And here’s how it looks like on my project. It actually took me about half an hour to code this, 3 lines of jQuery and few CSS rules. KISS!
By the way, if you are curious about these views, just let you know that I used the “Device Mode & Mobile Emulation” tool from Chrome which let you emulate any kind of mobile devices. Very handy!