Mobile-friendly CSS dropdown navigation

Question

I am probably going to invoke the ire of the pros here. I am a rank amateur trying to "learn as I go" on the job, but most javascript still has me baffled. (I'm fairly good in HTML and CSS.)

I am developing a new dropdown navigation for my company's website (yes, finally in over my head), but I can't seem to figure out to make it mobile-friendly. I have searched and searched and searched this site as well as others, but my ignorance is perhaps preventing me from understanding some of the possible solutions provided. (So rudimentary explanations would be highly appreciated from the patient.)

I am requiring instruction in just two things for making my navigation menu mobile-friendly:

1. I need the dropdown to respond to click/touch, not hover. Because all levels of my drop-down contain links, I want the user to have to click/touch each button twice before they go to the link. The first click/touch will simply open the actions I've assigned to the tags. (Example: first click/touch on model number will show an appended thumbnail image of model--I already know how to do this.)
2. I need the dropdown to able to close by either clicking/touching on a "close window" button or by clicking/touching the negative space on the page. At present, only refreshing the page or clicking/touching another active link enables the user to advance.

For the record, I am simply trying to adapt the dropdown menu demonstrated at the following page for our company's use, but it is hover rather than click/touch activated:

http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

Please help. Forgive my ignorance, I am trying. Blessed are the merciful.

Thanks in advance.

Answer 1

I would think that jQuery is your friend here, Specifically .on('click', ... and .on('dblclick', ...

There are a few ways I can think to do this. one is to keep track of your clicked items such that the first time an item is clicked 'this' is remembered and when the item is clicked again we compare the items and if they match trigger the event:

var clickedItem = '';

$(document).on('click', '#dropdown1', function() {
  if (clickedItem == '' || clickedItem != this) {
    clickedIten = this;
    Do other stuff..
  }
  else if (clickedItem == this) {
    Open Dropdown...
  }
});

As for closing the dropdown when nothing is clicked checkout jQuery focusout and set it to a general selector for all of the dropdown.

Answer 2

At the risk of being dealt the full wrath of the pro developers on here, I've decided to post my solution, such as it is, just incase it helps others that are as lazy as me.

I too am a rank amateur and, like many others, have come up against the problem of pure html/css dropdown menus working on mobiles and tablets when going mobile friendly.

The thing is, on my old, none mobile friendly site, the dropdown menu worked just fine on mobiles, iPhones, tablets etc but after re-developing it to be mobile friendly (thanks Google!) it suddenly didn't!? After spending hours going through my code to find out why, I realised that the only difference between the old site and new, other than pixel widths being changed to % widths, was that the new site had this new and ALL important meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I knew this code needed to be there but now I also knew that it was causing all my problems... Well, all my website related problems anyway.

I came up with this lazy and cheeky solution that got my dropdown menu working as it had before going mobile friendly.

Simply change the initial-scale a nominal amount below 1.0 and add a bit of code for good measure, like this:

<meta name="viewport" content="width=device-width, initial-scale=0.994, user-scalable=yes">

I'm not sure why this works but I can only assume that setting the initial-scale to 1.0, ie, the full width of the screen, disables these devices inbuilt double tap feature.

Setting it just below, opens the door just enough for their own double tap features to work again, saving you the trouble of putting in a whole bunch of complicated code just to get mobiles, iPhones and tablets to do something they're already capable of doing.

I have tested this on my Sony Z1 and also put it through Googles mobile friendly test and no problems there!