Events - Slidebars Demos

Slidebars 2 dispatches events indicating it's current behaviour. You can listen for events and attach a handling function to be executed, this demo logs events in the console. For more information check out the Events page in the Help Center.

Please note: exiting Slidebars will stop this website from working, to fix this you must re-initialize or refresh the page.

Initialize Slidebars
Exit Slidebars
Reset CSS
Open
Toggle
Close
Slidebars
Adchsm

Hi, I'm Adam.

I'm a freelance website designer and front-end developer in BCN.

Left and Right

Top and Bottom

Multiple Same Side

Animation Styles

Mobile Only

Custom Widths and Heights

Custom Transition Durations

Callbacks

Events

This is a left Slidebar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This is a right Slidebar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This is a top Slidebar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This is a bottom Slidebar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This is a secondary left Slidebar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This is a reveal Slidebar, the site slides out revealing the Slidebar underneath.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This is a push Slidebar, which pushes the site across.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This is an overlay Slidebar, which lays over the site.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This is a shift Slidebar, which slides in under the site.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This is a mobile only Slidebar, which only works on screens under 600px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This Slidebar has a custom fixed width of 150px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This Slidebar has a custom fluid height of 50%.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This Slidebar has a varying fluid width - 30% on large screens, 50% on medium sized screens and 70% on small screens.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This Slidebar has a custom transition duration of 200ms.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This Slidebar has a custom transition duration of 600ms.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This Slidebar is just used to demonstrate events.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.

This Slidebar is just used to demonstrate callbacks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida justo lorem, eget pellentesque tellus viverra id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor vel sapien vel tincidunt. Mauris eu scelerisque lorem. Pellentesque faucibus vestibulum libero. Nullam sollicitudin viverra vestibulum. Ut sit amet ornare eros. In feugiat, dolor tincidunt egestas vulputate, mi nunc ullamcorper enim, ac suscipit sapien turpis vitae lectus. Fusce finibus sagittis neque, in condimentum risus tempor eu.

Curabitur vel semper ipsum. Aliquam erat volutpat. In quis auctor nunc. Quisque lacinia convallis magna id dictum. Quisque ac lorem non sapien elementum malesuada. Donec fermentum aliquam tortor non faucibus. Morbi a leo vitae dolor tristique fringilla. Nam quis tristique mi. Nulla vitae nunc id magna molestie semper. Sed vel gravida mi.