Tutorials

13 replies to this thread. Most Recent

Richard van Heukelum

8 Feb 2016, 12:27 pm

[Pro] Another cool menu

Another cool menu done with @softpress #Freeway7, inspired by @codrops’ Responsive Multi-Level Menu:

http://fwdemo.rvanheukelum.com/stickednavigation/

Ontwerpzaam.nl | Papendrecht, The Netherlands

Hardware: 27” iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM /

Software : macOS 10.12.6 Sierra / Freeway7 (user since Freeway1)

Has moved on with CoffeeCup Software : Site Designer / Form Designer / Content Slider / Email Designer / Sonar / Website Insight and occasionally Blocs Web Design App. Use CraftCMS.

DeltaDave

8 Feb 2016, 6:28 pm

Another cool menu

Nice - I’ll have a closer look at this one later.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

18 Feb 2016, 9:10 pm

Very Cool.

agallagher

18 May 2017, 3:38 pm

Can you post how you did that

Thanks Anthony

Richard van Heukelum

19 May 2017, 6:06 pm

Well, what do we have here

– Richard

Ontwerpzaam.nl | Papendrecht, The Netherlands

Hardware: 27” iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM /

Software : macOS 10.12.6 Sierra / Freeway7 (user since Freeway1)

Has moved on with CoffeeCup Software : Site Designer / Form Designer / Content Slider / Email Designer / Sonar / Website Insight and occasionally Blocs Web Design App. Use CraftCMS.

Per-Arne Sollien

19 May 2017, 10:22 pm

Hi Richard,

I get these mails too. I am a long time Freeway user but have no clue on programming.

The menu you have made is fantastic. Is it possible to buy a copy of this menu with a short information on how to

adjust the design of the hamburger and the colors used - or ask you to adapt this to my designs of hamburgers ( 2 ).

This is one of them - must be transparent as the png.

I guess to change the “click on image” is easy by replacing the image in the Resourses…

Regards from Norway,

Per-Arne Sollien

  1. mai 2017 kl. 20:06 skrev “Richard van Heukelum” <[email protected]>:

Well, what do we have here

– Richard

Richard van Heukelum

22 May 2017, 9:55 pm

On 19 May 2017, 10:22 pm, Per-Arne Sollien wrote:

Hi Richard,

I get these mails too. I am a long time Freeway user but have no clue on programming.

Welcome to the club, neither have I :)

The menu you have made is fantastic. Is it possible to buy a copy of this menu with a short information on how to adjust the design of the hamburger and the colors used - or ask you to adapt this to my designs of hamburgers ( 2 ).

No, sorry … I just don’t sell my results of experiments I did with other people’s work. I just give it away. Even when it’s customised for fellow Freeway users :)

This is one of them - must be transparent as the png. I guess to change the “click on image” is easy by replacing the image in the Resourses …

That’s a pretty save bet when you need to change the image for something new (preferably an .svg).

But you really should fiddle around with the stylesheet to locate and change the colorscheme tot whatever your needs are.

– Richard

Ontwerpzaam.nl | Papendrecht, The Netherlands

Hardware: 27” iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM /

Software : macOS 10.12.6 Sierra / Freeway7 (user since Freeway1)

Has moved on with CoffeeCup Software : Site Designer / Form Designer / Content Slider / Email Designer / Sonar / Website Insight and occasionally Blocs Web Design App. Use CraftCMS.

Per-Arne Sollien

22 May 2017, 11:54 pm

: )

Very generous of you to share this. Thanks, I will try find the right colorscheme and change it as you advised me to do. I thought the menu item was an image to adjust - not a font icon.

Best regards from Norway

Per-Arne Sollien

  1. mai 2017 kl. 23:55 skrev Richard van Heukelum <[email protected]>:

On 19 May 2017, 10:22 pm, Per-Arne Sollien wrote:

Hi Richard,

I get these mails too. I am a long time Freeway user but have no clue on programming.

Welcome to the club, neither have I :)

The menu you have made is fantastic. Is it possible to buy a copy of this menu with a short information on how to adjust the design of the hamburger and the colors used - or ask you to adapt this to my designs of hamburgers ( 2 ).

No, sorry … I just don’t sell my results of experiments I did with other people’s work. I just give it away. Even when it’s customised for fellow Freeway users :)

This is one of them - must be transparent as the png. I guess to change the “click on image” is easy by replacing the image in the Resourses …

That’s a pretty save bet when you need to change the image for something new (preferably an .svg).

But you really should fiddle around with the stylesheet to locate and change the colorscheme tot whatever your needs are.

– Richard

Richard van Heukelum

23 May 2017, 2:35 pm

The ‘click to open’ image next to the hamburger (as shown above) is just there to point out to the visitor that ‘the hamburger’ is the (only) navigation option there is at that point. It’s nothing more than just a rather friendly gesture other than letting the visitors find it out for themselves. You could get rid of it of course, but there’s nothing wrong with a heads-up to your clientèle :)

The hamburger is a button item, styled like this:

 .dl-menuwrapper button:after {
     content: '';
     position: absolute;
     width: 68%;
     height: 5px;
     background: #fff;
     top: 10px;
     left: 16%;
     box-shadow: 0 10px 0 #fff, 0 20px 0 #fff;
 }

The ‘height’ here is the height of 1 horizontal bar, the top bar of the hamburger. The middle and bottom bars are both ‘drop shadows’, placed at a distance of 10px and 20px and both coloured ‘white’ to complete the hamburger.

– Richard

Ontwerpzaam.nl | Papendrecht, The Netherlands

Hardware: 27” iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM /

Software : macOS 10.12.6 Sierra / Freeway7 (user since Freeway1)

Has moved on with CoffeeCup Software : Site Designer / Form Designer / Content Slider / Email Designer / Sonar / Website Insight and occasionally Blocs Web Design App. Use CraftCMS.

billy kimmel

1 Aug 2017, 11:10 pm

Richard, A while ago you posted a cool menu called Stacked Navigation. I downloaded it and have beed playing around and wondered if it’s possible to alter the menu button hamburger? I want to make it custom or add the word menu.

Billy

Richard van Heukelum

2 Aug 2017, 8:24 am

Hi Billy, do you mean this one?

The hamburger that’s currently used is a css created ‘icon’, not an image or whatever. You can change/remove this if you want, just as long as you apply the same ‘link’ to its replacement … whatever that is.

– Richard

Ontwerpzaam.nl | Papendrecht, The Netherlands

Hardware: 27” iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM /

Software : macOS 10.12.6 Sierra / Freeway7 (user since Freeway1)

Has moved on with CoffeeCup Software : Site Designer / Form Designer / Content Slider / Email Designer / Sonar / Website Insight and occasionally Blocs Web Design App. Use CraftCMS.

billy kimmel

2 Aug 2017, 1:30 pm

Yes. Where in the js code is this stated?

Billy

billy kimmel

2 Aug 2017, 4:26 pm

So what I’m trying to do is replace the menu-button with a link to an image instead. Just not sure were to place the link and what code to remove in the component.css file

Billy

Back to Top

waltd

2 Aug 2017, 11:48 pm

The button that you see there is constructed with CSS. You’ll need to fiddle with the .menu-button selector, as well as the .menu-button:before and .menu-button:after selectors. The simplest thing to do would be to delete :before and :after selectors, and then put a background-image property on the .menu-button to be the image you want to see.

Walter

On Aug 2, 2017, at 12:26 PM, billy kimmel <[email protected]> wrote:

So what I’m trying to do is replace the menu-button with a link to an image instead. Just not sure were to place the link and what code to remove in the component.css file

Billy

Freeway user since 1997

http://www.walterdavisstudio.com