New "side-menus" component.

[mrienstra]

Based on the modals component.

See example at http://michaelrienstra.com/temporary/ratchet/side-menus.html

The current implementation relies on putting a wrapper (<div class="side-menu-siblings-wrapper">) around the side-menus siblings (<header class="bar"> & <div class="content">).

Alternatives: I have working code to handle the wrapping of siblings automatically, as well as mostly working code sans wrapper (abandoned when I realized it would take more "moving bits" to get the subtle drop shadow to animate, and the wrapper approach started to look cleaner).

Minimally tested on Android (Nexus 4) & iOS (iPhone 5).

Happy to do more testing / etc. if this component is of interest.

Attribution: I borrowed a few lines of CSS from http://mmenu.frebsite.nl/ (which is dual licensed under the MIT and GPL licenses).

[aceport]

Great！

[mrienstra]

Alternate solution: https://github.com/jakiestfu/Snap.js/

[joshas]

@mrienstra On Android 4.0.4 title bar doesn't move and obstructs first menu item. Also after opening there's a gap after menu, see attached screenshot.

[mrienstra]

@joshas Thanks for the heads up. Changing .bar from position: fixed to position: absolute seems to help with the title bar problem. Demo 3

Looks like Dolphin 10.3.1 (Nexus 4 running Android 4.4.2) has some problems with the animation (overshoots, then snaps back).

Haven't been able to reproduce the gap problem -- my emulator keeps crashing when I try to run 4.0 or 4.0.4. Let me know if you're in the mood to triage. :)

[emisicka]

This appears to break the modals component if they are both used on the same page. I implemented this into the "app-ios-mail" example. Even after moving the compose to a new page it appears there is some issue where it does not fire.

[mrienstra]

@emisicka: I'll take a look at that when I have time. Can you put your code somewhere I can access it?

[emisicka]

@mrienstra Cool. I changed up the content with examples to recreate what I was experiencing. http://misicka.com/ratchet/

[ramilexe]

Thank you, @mrienstra!

[ramilexe]

@mrienstra why scroll doesn't work in menu bar?

[XhmikosR]

/CC @twbs/ratchet

[milushov]

what's up? why pr still open?

[tomershvueli]

^bump. Was debugging for a while trying to figure out why the example is working and my code is not with the same version number when I realized the PR is still open and not merged... could be nice to merge it just so Ratchet has this functionality.

[trumb1mj]

Is there a more reliable fork of this project this could be merged into?

[tomershvueli]

Not that I'm aware of, I'm new here... :)

[Toomavic]

Great :)))) 👍

But can you add more features for menu like :: ability to drag , ability to control width of menu, make menu overlay the page not pushing the body ..