Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upNew "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 :: |
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).