
Tutorials
15 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.13.6 High 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.
Replaced Adobe with Affinity Publisher, Affinity Designer and Affinity Photo.
DeltaDave
8 Feb 2016, 6:28 pmAnother cool menu
Nice - I’ll have a closer look at this one later.
D
Glasgow, Scotland
iMac 27 5K El Cap and Pro Final
Richard van Heukelum
19 May 2017, 6:06 pmWell, 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.13.6 High 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.
Replaced Adobe with Affinity Publisher, Affinity Designer and Affinity Photo.
Per-Arne Sollien
19 May 2017, 10:22 pmHi 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
- 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 pmOn 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.13.6 High 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.
Replaced Adobe with Affinity Publisher, Affinity Designer and Affinity Photo.
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
- 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 pmThe ‘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.13.6 High 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.
Replaced Adobe with Affinity Publisher, Affinity Designer and Affinity Photo.
billy kimmel
1 Aug 2017, 11:10 pmRichard, 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 amHi 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.13.6 High 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.
Replaced Adobe with Affinity Publisher, Affinity Designer and Affinity Photo.
billy kimmel
2 Aug 2017, 4:26 pmSo 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
waltd
2 Aug 2017, 11:48 pmThe 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
billy kimmel
17 Oct 2019, 11:47 pmRichard, Do you know if I can incorporate Max’s slideshow into this template without conflicts? Billy
