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!
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
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
Alrighty, so @pixelgeek is correct, we need to use a hide/show type of interaction to accomplish opening and closing a sidebar.
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.
Create an interaction on the sidebar called
hide sidebar on load, set its initial appearance to be horizontally -100%
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
Hope this helps you I have followed the same steps/principles from the example #4 on the interactions page and the video that @pixelgeek sent.
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!
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
Glad you got it working.
Apply the “sidebar” interaction to the Contact Us link to have the contact us link open and close the sidebar.
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
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!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.