This demo series will show you how you can make your navigation mobile friendly and accessible using jQuery whether javascript is enabled on the client-side or not.
JS Mobile Menu Demo Series
This series is approximately 45 minutes long. You should expect it to take at least twice that time to do complete the work.
1 – Menu setup (18min)
2 – jQuery setup and custom script (17min)
3 – Styling the menu for proper behavior (13min)
Interested in digging deeper? (Not required, but educational!)
Mobile Orientation Checker and Background Images Code
One student had a question about why her background image looked fuzzy and blown out on her iPhone. It’s a common problem when using “background-size: cover” on iOS devices, and the workarounds are not necessarily simple. There are several ways to address the issue, including lines and lines and lines (keep going) of css media queries that try to target every conceivable device range combination, but as you can imagine, this is onerous. To help answer this question with a simple homegrown solution, I wrote a quick little script that might help you with this problem. As I said, it is only one of many possible ways to deal with it, but it’s reasonably simple and is an easy way to begin understanding the differences between handheld agents vs. desktop agents. Additionally, it will help you understand how mobile user agents are determined.
The accompanying video below explains everything and shows how the script works on multiple devices, including a Macbook Pro, Android phone, iPhone 5C, and an iPad Mini. These were the only devices I had at my disposal when making the video, so there’s a chance the script might not be perfect for every device. In addition, the script deals with what happens when we switch orientations as well. Since switching orientations can wreak havoc on responsive background images on mobile devices, you can take a peek at some potential options. Because some oddball devices report opposite values for portrait vs. landscape orientations, this script might be less than perfect in those, but it should work well for most devices. Anyway, there are also links to the compressed files below the video area if you want to fool around with the scripts.
YOU SHOULD PLAY THIS VIDEO BACK AT 1.5x SPEED. It was really late when I recorded it and I am talking somewhat slowwwwwwly.
File Resources:
mobile-device-orientation-checker-banner
mobile-device-orientation-checker