New "side-menus" component. - #551
Conversation
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-menu`s siblings (`<header class="bar">` & `<div class="content">`). I have working code to handle the wrapping of siblings automatically, as well as working code that works without the wrapper (but I realized I was going to have to add more "moving bits" to get the subtle drop shadow to animate without the wrapper). 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).
|
Great！ |
|
Alternate solution: https://github.com/jakiestfu/Snap.js/ |
|
@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. |
|
@joshas Thanks for the heads up. Changing 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. :) |
|
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. |
|
@emisicka: I'll take a look at that when I have time. Can you put your code somewhere I can access it? |
|
@mrienstra Cool. I changed up the content with examples to recreate what I was experiencing. http://misicka.com/ratchet/ |
|
Thank you, @mrienstra! |
|
@mrienstra why scroll doesn't work in menu bar? |
|
/CC @twbs/ratchet |
|
what's up? why pr still open? |
|
^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. |
|
Is there a more reliable fork of this project this could be merged into? |
|
Not that I'm aware of, I'm new here... :) |
|
Great :)))) 👍 But can you add more features for menu like :: |
12 participants
Based on the
modalscomponent.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 theside-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).