Jump Start 2.0 mobile menu
-
Topic
-
Ok, so perhaps the mobile menu in JS 2.0 still needs a little more love for next release.
The mobile menu links don’t work on block level (iOS at least). Adding “display: block” works but then the menu text links dissapear when pressed.
Clicking on top menu link text (or block) won’t open submenu unless specifically pressing the “+” sign, which quite a few seem to miss.
The “no-click” CSS menu class won’t work on mobile (iOS at least).
-
Replies
-
Setting up the menu in this way was done for a main purpose — in order to give the user a deliberate way to toggle a dropdown open and closed. So this means there needs to be a click action to open/close. Now this is straight forward in your case if you want the parent item to not be a link, however for many, this isn’t the case. So having the text link as an inline item allows it to be separated from the toggle button.
But yeah I agree with all your concerns. I will look at going towards how I’ve done it in my other themes, where a hover brings open the menu (which on iOS is the first tap), and then the click (second tap) will follow through to the link of the button. This will allow for the parent menu item to be styled as a single block-level button.
http://demoblvd.com/themes/akita/ (Example, just referring to the action of an individual dropdown, not anything about the outer menu)
The main issue of this method which I wanted to avoid originally is that there is no clear way for the user to hide the submenu after they’ve opened it. They have to effectively “hover off,” which on iOS means to tap your finger elsewhere outside of the menu. Which I suppose is not so bad.
And yeah the no-click class I just forgot to apply it to the mobile nav. I can add that, which would just make your second tap not do anything.
I am using no-click on a parent item for desktop menus. I would like it to be the same on mobile- not clickable, because I do not want to use the page or a # for the link.
Thanks for your help!
Yeah, I’ve added the “no-click” class for the 2.0 release. I also made some significant improvements to the usability of mobile menu buttons as I described above.
Feel free to preview the updates here:
http://demoblvd.com/plugins/builder/
.. You can see the mobile menu and also note that the “Sample Layouts” header has “no-click” class.
- You must be logged in to reply to this topic.