Why Use jQuery for a Mobile Drop Down

Good question! Asking these types of questions help find better solutions. But each solution comes with it's own unique set of problems.

Let's talk about the problems with the code from the current project:

OK so let's take our code we just did in the stage. If we ever alter a link in the menu it will automatically be added to the drop down. So you're not modifying the same functionality in two places. One could forget to add the link in a drop down if it wasn't generated automagically by the jQuery. If the menus were generated by some sort of server-side language we may not need to worry about that. Since this is plain old HTML we do.

OK so if the jQuery doesn't kick in the media query hides the links which is bad...because there's not even the links in the menu displaying on smaller browser widths.

To mitigate this problem we could add a class like:

$("#menu").addClass("js_present").append($select); //Line 6 of app.js

And then alter the media queries like so:

@media (min-width: 320px) and (max-width: 568px) {
  #menu.js_present ul {
    display:none;
  }
}

@media (min-width: 568px) {
  #menu.js_present select, #menu.js_present button {
    display:none;
  }
}

We could style the menu (unordered list and list items) better for when JavaScript is disabled so it does look less "gross".

/**
Styling when JavaScript is disabled.
**/

@media (min-width: 320px) and (max-width: 568px) {
  #menu ul li {
    width:15%;
    font-size:12px;
  }
}


/** 
Modify CSS to hide links on small width and show button and select
Also hides select and button on larger width and show's links.

Styling when JavaScript is enabled.
**/

@media (min-width: 320px) and (max-width: 568px) {
  #menu.js_present ul {
    display:none;
  }
}

@media (min-width: 568px) {
  #menu.js_present select, #menu.js_present button {
    display:none;
  }
}

That would probably be the best solution. So the user can still get to the pages when their connection / device is flakey.

However to respond to your specific question - "Since we've been told to be as unobtrusive as possible, if a mobile device has shodding internet connection or javascript disabled, why would we want the entire experience to hinge on this code being able to run?"

The whole point is to enhance the experience. So given the improvements above - they still can get to the content. That's all that's required. Anything else is superfluous. We're progressively enhancing it with the jQuery code.

Now we have a more sensible default, but we also enhance it with jQuery. Tapping little links on a mobile device may be a bit tricky but at least they can get there. Having the drop down menu enables us to get the user's intent better when navigating.

Does that clear things up?