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.
I never really thought about a Select Menu as navigation. It looks too cumbersome to me, requiring a lot of CSS and Javascript. Keep in mind that this article dates from 2012. I am not sure this solution is still commonly used today, when techniques using jQuery or CSS3 will let you create “sexy” menu with three lines of code. Additionally, it brakes the design, since it relies on the core system styles.
Similarly, the Left Fly Out seems to also require a lot of CSS and Javascript. Eventually, plugins like Flexnavs would do the work for you, but again, the purpose of this assignment is to try to practice by building my own code.
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!