How is this collapsible menu done?
- Started
- Last post
- 7 Responses
- Hombre_Lobo
Hi all!
I've found that responsive menus are generally not as smooth and snappy as i would like on mobile devices. (its not that I'm using the wrong code, even on the websites of top responsive developers i personally don't find the menus smooth enough).
But i found this site - http://www.bienvillecapital.com/…
and that menu is super fast and smooth on mobile devices. Even if it isnt a responsive menu the code could be used for that purpose.Ive looked at the code and i can usually pull out the javascript an see how it works, but i cant figure this out.
it doesn't appear to run on any usual js, all i can see is sass. I dont think its css keyframes as it runs in IE 8 the same very smooth way (but it could use a fall back of course)
Anyone know how it works and why its so smooth?
Cheers guys! :)
- Continuity0
This looks suspiciously like Sid Lee's website ...
- That having been noted, I've no idea how it's done. Soz.Continuity
- utopian0
This actually looks and operates better than the Sid Lee Website
- monospaced0
I built one like this in Adobe Muse in a couple of minutes. No idea how these guys are doing it though. Probably something better, elegant, and incredibly more complicated that involves coding and training, but that does the exact same thing.
- ukit20
I just looked at it quickly but it's definitely JS. If you disable JS most of the layout disappears. If you search in this file:
http://dcikynrkliczx.cloudfront.…
You can find the div #menu_button which is what triggers the menu opening/closing.
- orrinward20
It's done with Jquery.
I believe the fluidity of it is that the Menu to the left is hidden by positioning it out of the frame rather than by going from 0 width to full width.
Sliding takes much less oomph than scaling and resizing does.
- very interesting...Hombre_Lobo
- thanks orrin. i thought you gave up on QBN, nice to see you around again!Hombre_Lobo
- I'm still here and post fairly frequently!orrinward2
- ideaist0
Wander through http://www.unheap.com/.
You'll fine it their, as well as any other jQuery you'll ever need for anything Hombre_Lobo.
; )
Pay it forward.
- http://www.berriart.… perhaps...ideaist
- Oooo I forgot about that site, it's fucking brilliant. Thanks dude! :DHombre_Lobo