Mobile Only - Slidebars Demos

Slidebars can be designed to operate on small screens only. This demo Slidebar only operates on screens under 600px wide, you may need to resize your screen to see.

Open mobile
Toggle mobile
Close mobile
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.