# How can I create a slide-out like Magento?

**URL:** <https://forum.bubble.io/t/how-can-i-create-a-slide-out-like-magento/40363>\
**Category:** Questions\
**Created:** [October 19, 2018, 1:40pm UTC](https://forum.bubble.io/t/how-can-i-create-a-slide-out-like-magento/40363 "2018-10-19T13:40:31Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![fayewatson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fayewatson/32/2686_2.png) [@fayewatson](https://forum.bubble.io/u/fayewatson)\
**Post date:** [October 19, 2018, 10:00pm UTC](https://forum.bubble.io/t/how-can-i-create-a-slide-out-like-magento/40363/2 "2018-10-19T22:00:05Z")

</div>

Hi @antoni.deighton 🙂 Welcome to the Forum! One way is to use 2 floating groups to create a similar effect! One floating group would be used for a ‘black overlay effect’ (to ‘grey out’ the content of the main page, beneath the Slide Out Floating Group element), and above that would be the Slide Out Floating Group. Here is an example:

Preview:

> **[Bubble - Visual Programming](https://faye-demo-app.bubbleapps.io/version-test/slide-out)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Editor:

> **[Bubble Editor - faye-demo-app](https://bubble.io/page?type=page&name=slide-out&id=faye-demo-app&tab=tabs-2)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

On this page, there is a Sidebar Floating Group element (set to float:both) and the main page content:

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/a/a/aa8c2dc1c6a4a3dcf3b6c3a6bc64f7d7bf69e5d4.png)

Above that is the Black Overlay Floating Group that is equal to the height and width of the page (set to float: both):

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/3/8/3837d4abea126a59808a652b5af1f4b44f6c0109.png)

And above that is the Slide Out Floating Group (which expands the height of the page, but not the entire width (set to float: both):

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/d/6/d62ee5a7eab50c22f7ad85baa56fa78f352a1fc2.png)

Then there are two workflow events:

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/9/c/9c9965a9dbaf3782b88a1202d74b11b1c3311d11.png)  
This action shows the Black Overlay Floating Group immediately, and then the Slide Out Floating Group slides into the page using the animation “Slide Right In”

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/f/b/fb38c385f902fe953a07f64526aa2fed4d45a32c.png)  
This action hides the Slide Out Floating Group using the action “Slide Right Out”, and hides the Black Overlay Floating Group

Note: For this work properly, make sure the Slide Out Floating Group element is ‘above’ all of the other elements on the page, using the “Bring to Front” editor action a couple times. That should work! 🙂

---

_[View the full topic](https://forum.bubble.io/t/how-can-i-create-a-slide-out-like-magento/40363)._