[Solved] CSS animated menu won't work on iphone and ipad

[ChrisK]

Hi,
I made a cool (yes, it looks cool to me :)) animated menu only in CSS. It works fine in IE, FF or Chrome.
When I try it on an Android device, it works fine too. But when I open it on my Ipad or an iPhone, nothings happens.
This is really disappointing as I was planning to use it for the responsive part of my personal website. Does anyone have an idea? Did I miss something with selectors or so?

Thanks in advance
Chris.

[Shikkediel]

Hover doesn’t work on Apple stuff, I think you’ll need to adapt it with some JavaScript to also work on touch. Android apparently has a built-in trick to emulate, I reckon it works with a tap there?

[ChrisK]

Yes, as you said, it work with a tap.
And a tap anywhere else swith on the reverse state.

[Shikkediel]

No way around hard coding it for iMerchandise, I think. But a tap anywhere else complicates things – reversing with a tap on the parent itself is easier. Here’s an example with one of the menu items :

Link to the pen

I’ve removed the hover effect for demonstrative purpose and gave it a toggling mousedown-touch functionality.

[ChrisK]

Well I guess it’s the solution i’ll have to use. I was willing to avoid javascript as I’m totally new with it and don’t know how to use it. Anyway thanks, i’ll push further in that way… as far as I can :)

[Shikkediel]

Keep in mind that jQuery’s used here, for which the site would need a link to or include the library. Having it hand, I’m sure it’ll be quite convenient for issues you may come across with further development. It could be done with plain JavaScript but it’s a bit ‘messy’ and less straightforward when it comes to coding stuff. Do give a shout if you get stuck somewhere, I could have a look an maybe throw in a few lines.

Edit – there may be a CSS approach as well but using jQuery seems to be a cleaner method for something like this.

https://css-tricks.com/the-checkbox-hack/

And I read it’s somewhat buggy in older iOS versions.

[ChrisK]

Thanks again… Now it’s time for me to give a shout :)

More seriously, I already tried the checkbox hack but for some reason I can’t remind, I gave up.

By the way, the solution you suggested work fine in this Codepen

http://codepen.io/anon/pen/azEYNw

however, when I try to insert it in my website, nothing happens. As well as if try to copy/past it in my own codepen account (in a new pen). I assume it have something to do with the library. This is quite disappointing because the page uses jQuery for another function (localscroll). Where did i go wrong? An idea?

Edit : just found on Codepen how to use jQuery. I forgot to click on the gear left to JS. Now it works there, but not on my website.

[Shikkediel]

Could you paste a link to your site? I can only guess about any cause…

[ChrisK]

As this site is for a school project, i downloaded the script locally.
This is a work in progress (but I have to finish it this week-end) and overall, don’t pay attention to the gallery section wich is ugly as hell (I’ll have to rethink it quickly).
The menu (which is appearing when you shrink the window) is called menu-bulle. you can chck it out here :
http://www.chrisk.fr/preview/

Thanks again… Ho and by the way, it’s in french. sorry :)

[Shikkediel]

Pas de problème. I see the issue – the link to the lib is really old, 1.4.2. That’s quite ancient for jQuery. The .on method that is used in the script I posted won’t work. Luckily not too many things have been ‘thrown away’, it’s mostly new features that have been added. First try could be to update jQuery and see if the scroll scripts still work.

[Shikkediel]

I’d be add/changing classes rather than directly affecting CSS

Quoting @Paulie_D in another topic with a good suggestion. So here’s an adaptation of the earlier pen – more CSS and slightly leaner script :

Pen variation add and remove class

Although in this case an id would be slightly more correct :

$(this).find('.test1').attr('id', 'active1');
$(this).find('.test1').removeAttribute('id');

[ChrisK]

Guess what? I tryed to update my jQuery file with the jquery-2.1.3.min.js, and the menu is fully working BUT now my scroll don’t start anymore… I guess i’ll have to find another way to make it work as i have not enough time to start learning to use jQuery (don’t get me wrong, i’ll do it after my exam).

I’ll try the “Pen variation add and remove class” as well. Hope it will work with my old jQuery version.

[Shikkediel]

It may be better to use a recent lib version but this could be a quick fix :

$('.parent2').bind('mousedown touchstart', function() {

Instead of :

$('.parent2').on('mousedown touchstart', function() {

[ChrisK]

You just made my day! It works fine…
however I agree on the fact that I should be using the latest update of jQuery. I’ll correct (or should say try to) it after my exam.
Thanks again for spending some time. It really helped a lot.

[Shikkediel]

Je t’en prie. Good luck with the exam. :-)

[Author]

Posts