Slide in Sidebar

Design help Animations & Interactions
1

Hi All

I want to create a slide in Sidebar that will have my CONTACT information

When ‘Contact Us’ is clicked the Sidebar will slide in blah blah

I have searched the forum and looked at the Demo kit

However I still have no clue where to start

Any advice greatly received!

Thanks

Paul

2

Hi @quittoo :smile:

I think what you’re looking for is an interaction to show/hide

Check out this video tutorial. it may help: http://tutorials.webflow.com/click-to-show-hide

Cheers!

3

Hi thanks

I have watched that but it is NOT what I am trying to do

It is the next interaction down Example 4, on the interactions page where you click a button and a SIDEBAR appears.

I just can’t work out:

A) How to Build the SIDEBAR, I am creating a container and adding a DIV Block and Re-sizing

B) I have no clue on how to place the Sidebar Hidden on the right hand side of my page

Whatever I do, I can scroll and see the sidebar and I know that is not right

Any advice gladly taken

Regards

Paul

4

Alrighty, so @pixelgeek is correct, we need to use a hide/show type of interaction to accomplish opening and closing a sidebar.

First

You need to add a div, give it a class of sidebar. Set it to position: fixed, and height: 100% - this will tell it to stick to the side of the page. You can use the controls in the position bar to set whether it stays on the left or right of the page.

1440×784 980 KB

Next

Create an interaction on the sidebar called
hide sidebar on load, set its initial appearance to be horizontally -100%

Finally

Add an interaction on the element you want to open and close the sidebar when clicked
Tell it to affect a different element - the sidebar - and then on click move to origin
on second click - move -100% horizontally



Final result


Hope this helps you :slight_smile: I have followed the same steps/principles from the example #4 on the interactions page and the video that @pixelgeek sent.

1 Like
5

Hi Jaiden

Thanks for the update

When I create the Div should it be placed in a container?

If I create the div on its own it overlaps the menus

I will play around with the info you sent and I’m sure I will muddle through!

Thanks again

Paul

6

Hi Jaiden

Got this working by looking at your info and watching the video again

Thanks for your help

Any idea how I can open the sidebar when clicking the contact us link

Thanks again

Paul

7

Hey Paul!

Glad you got it working. :slight_smile:

Apply the “sidebar” interaction to the Contact Us link to have the contact us link open and close the sidebar.

8

Hi Jaiden

Go there in the end… BUT

I was building this on the CONTACT page as I was trying something new.

It worked fine on the Contact page, however, as my footer was created
as a SYMBOL if mucked u the rest of the site.

Do you know what is the order of building stuff like this

Should I build all the functionality into the say… Header and Footer BEFORE creating the Symbol to share with the rest of the site.

I guess it’s just the order of things that I need to understand

Thanks for all your help

Regards

Paul

9

Hey Paul!

Building the header and footer fully before using symbols could prove to be the better course of action. For general structure guidelines Webflow also has awesome video tutorials here

Have a good one! :smile:
Jaiden

10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.