If you've ever wanted to have a panel slide on to the screen after someone clicks a button, we've got you covered.
Showing and hiding an element on click is a very common interaction, and one that we showcase on our Interactions page.
So how did we do it? We’ll show you. Just follow these steps, and check out the live version in your Webflow account.
Step 1: Add the elements of the interaction
For this interaction, we’ll need a button to trigger the interaction and our menu, which requires a div block.
Step 2: Style the elements
You can style your elements however you’d like, but remember to create clear, memorable class names so they’re easy to remember later.
For this example, we’ll call our div block “Side Menu” and give it the following styles:
- Fixed Position: Right (To keep it pinned to the right of the screen)
- Height: 100% (So it covers the full height of the screen when expanded)
- Width: 30%
- Background-Color: Black
Step 3: Add and style elements in our side menu
For this example, I’ll add an image, a heading, and some paragraph text—but you can feature anything you want here, from a navigation menu to an author bio.
Step 4: Add an interaction to our side menu
To keep the side menu off the screen on load, we need to add an initial appearance, and set it to move 100% to the right (so 100% of it will be off-screen).
Step 5: Add an interaction to the button
To make the button the trigger for the interaction, we also need to give it an interaction.
Select the button, choose the Click Trigger, check the “Affect different element(s)” box, and type in “Side Menu.” Now each of the following interaction steps will affect the side menu, not the button.
Step 6: Add a first click
In this case, the first click will trigger the side menu to slide in from the right of our screen. For this step, we’ll simply move the menu back to its original on-page position, at the default speed of 500ms.
Step 7: Add a second click
The second click will move the side menu back off of the screen. So in this step, we’ll move the object back to its initial appearance — 100% to the right.
Step 8: Done!
And there you have it! Now in the live preview we can see that clicking the button will cause the side menu to move out from the right. Clicking it again will cause the side menu to move back — perfect!
Want to see this example for yourself? Open it in your Webflow account.
Build complex interactions and animations without even looking at code.
There can be many reasons for a website to exist
I often witness some very unsolicited advising taking place. Some people tend to have premade answers when it comes to websites and more often than not, it comes from a good place. In spite of that, most of them don’t bother to ask anything about the project before weighing in.
I get it. We all know our stuff. But a website can serve many purposes and unless you were part of the process, you don’t know what it is we’re doing here. And you don’t know the function of every component of that project. So thanks for the input but we’re good.
That said, it doesn’t mean that everyone who will give their opinion about our work is out of line. We must always be open to constructive criticism and set the ego aside when it comes to problem solving. I just think we should be smart and think for ourselves rather than to take everything at face value.
Personality disconnect
Just like you, I don’t like to be sold to, and I don’t like when companies try to exploit my inner dumbass. Even though it has become some sort of buzzword, authenticity is what it’s all about — true authenticity that is. It’s what we should all strive for while we make our way through that colossal white noise vortex.
Perception is the name of the game. We have a say in how people view us, and view our businesses. Even though we can only control a portion of the big picture, it’s our job to nudge that perception to where we want it to be.
Pro tip: If you’re a brand (or solopreneur), don’t just find another brand to imitate. Truly ask yourself what you stand for and what you want to be. Be as genuine as possible. Define your brand’s personality and then act accordingly. Without any restraint, broadcast who you are to the world.
If you do what others do simply because you think: “It worked for them, it’ll work for me.” Think twice about that. I know, you know, and everybody knows this would do a disservice to you and your audience.
For instance, you’re a freelancer and you present yourself as a funny easygoing person. You’re then hired to work in an agency for 2 months but 3 days in, it’s getting pretty obvious you're not funny nor easygoing. Uh-oh! You managed to pull a Plaxico Burress and you’re now stuck in a very unfortunate situation.
Same goes for brands. You claim to care about the environment and people but then you use an antitheft device on your cars to violate the Clean Air Act. Whoopsy-daisy! Turns out you’re garbage and the environment was way down on your priority list.
The ones who will make it to the other side are the ones who dared to be different
Most people are scared to break the mould. They say stuff like: “If we talk like this, we could possibly offend blond mothers over 42 who also drive electric cars.” Or: “If we look different from the competition, this could maybe potentially make us lose business opportunities at some point perhaps.” Yes — solid point. Essentially, it all comes down to what type of brand (or person) we want to be.
The truth is, brands willing to take risks will always come out on top.
So with this in mind, I’ll paraphrase my very good friend, Paul Arden: “If you always play it safe, you’ll be the same as everyone else. And that’s seriously bad for business.”
But from the right perspective, times like these afford us a peachy opportunity to stand out. That’s right, I said peachy. While most are content with being bland, I think we should aim higher. Why not try to turn some heads and get some reactions? If we’re ok with people remaining indifferent, we fail. Because indifferent people won’t pay attention to us, talk about us, hire us, refer us, and so on. The Apples and Nikes of the world understand this. They apply it with precision and consistency. So if they can do it, why can’t we? My advice to you is simple:
Be brave. Stand out. And know that, yes, that will probably alienate some people. Chances are, they weren’t the customers you wanted anyway.
As you were.
