Creating an Animated Menu With Custom Hamburger Icon

Design help General
1

I love how the links on this nav bar animate. Is this possible in Webflow?

Thanks in advance!

2

Hey @Infimorus

BORN are cool agency here in the London, worked with them before and I was wondering also if this was possible. But to get you started @Arthur and few others have done some similar thingsL http://slick-template.webflow.io/

Doesnt repsond in the same way as the BORN site at mobile level but as a cloneable project hopefully this can give you a few ideas.

The only obstacle i think is the animation of the links down on Desktop + Ipad and then in from the left to right on mobile. You would need to create some custom JavaScript for that :slight_smile: hope thise helps!

2 Likes
3

it’s do-able in webflow. not very difficult. all done in interactions.

4

Hi @Infimorus,

I’ve seen that before, I was looking for full width video examples and stumbled upon it whilst browsing awwwards. I didn’t notice the menu though! Very very slick. As @Revolution said, how the navigation come in when you click on the menu is doable in interactions, have a look on the forum for articles about time delays etc and you’ll be able to get them to come in one after another.

The other aspect of the menu that is really nice is the hamburger to x (close) transition. There are a tonne of examples in other sites how people are doing this. Apple have done one of my favourite ones, resize your browser so its smartphone width and click the hamburger menu to see it. Now, I have absolutely no clue if transitions like that are possible in WF (wouldn’t know where to start!) but this page has some cool ones that I think you can code in http://www.transformicons.com/

Hope this helps, ta,
Jamie

2 Likes
5

Thanks everyone for your input…I love the link you shared @jamiesamman992.

A follow up question: On the same page, if you scroll down to Feature Work, you will notice that when you hover over the image tiles, a transparent overlay appears that makes the text more legible. Is it possible to pull this effect off in WF?

Here is my current approach:

  1. Inside of a section, I inserted two columns.
  2. Assigned an image to the background of the column and forced some column height. This allows the pictures to tile the page with out any gaps
  3. I placed animated text on top in a div block (animation courtesy of interactions)

Now the problem I am having is that if I place div or anything else on top of the column section, I get a gap, therefore I can’t cover the entire background picture.

Any suggestions?

Thanks in advance!

1 Like
6

yes. fairly easy to do.

the table has some predefined values.

You can either

  1. class the table down to the columns… (to take complete control of the table)

  2. or use divs.

In reality… the table is just a smart div. So you can achieve your expected result using either method.

7

Thanks for the quick response!

Using divs is what gives me the gaps. Maybe I’m doing it wrong, which is very much possible :smile:

All I did is drop a div into the column. Initially it floats on top, but after specifying a covering height it covered the height of the column nicely, but the width had a 10 px gap on each side.

8

the table itself is what’s creating the gap.

drop a table onto the form

section → container → table.

class the table, and the column and change the border / margin…
either in the table or the column… I don’t remember which.

I think border for table and margin for columns.

some properties will appear unchanged… and will require a manual change.

for example… the left margin may say “0”… but go ahead a different in there anyways.

See what it does.

Unless they’ve updated it… there are hidden settings the table / column.

specifically - are you looking to replicate this ?

9

Here is a screenshot of what I am referring to. You can find this same thing on Born Group’s page under Featured Work.

2304Ă—830 2.31 MB

10

not intended to be an exact replica.

http://born.webflow.io/

1 Like
11

Brilliant…so which trick did you use?

12

@Revolution do you mind sending me to the development environment link? I still can’t get the padding to go away.

Much appreciated!

13

not a problem. I actually made it public and cloneable on Friday night.

but I can never find my stuff (including my profile).

I’m not sure if I have a Public Profile. I have yet to find it.

Here’s the external links:

http://born.webflow.io/

I did find this page… but it’s not linked to the Discover or Designer pages.

https://webflow.com/website/Born-Media-Group

Supposidly this page is cloneable ?

14

Thanks so much @Revolution…I was able to successfully clone it :smile:
This was huge help for me!!

Cheers