Tutorials

15 replies to this thread. Most Recent

Richard van Heukelum

1 Feb 2016, 3:04 pm

[Pro] Stacked Page Navigation

I saw quite a few very cool navigation examples lately, so I replicated one of those posted on Codrops, see the results below …

http://beta.ontwerpzaam.nl/stackednavigation/

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.

Richard van Heukelum

1 Feb 2016, 3:06 pm

Sorry, I just messed up the url, it should be http://fwdemo.rvanheukelum.com/stackednavigation

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

1 Feb 2016, 9:25 pm

Like that Richard.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

4 May 2016, 9:49 pm

Richard, can you share what you used to do the Stacked Page menu?

Billy

Richard van Heukelum

4 May 2016, 10:56 pm

Here you go: http://fwdemo.rvanheukelum.com/stackednavigation/stackednavigation.zip

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.

Kevin McElligott

31 May 2016, 10:26 am

I love this but beyond my capabilities I think.

Mad Farquhar

16 Jan 2018, 9:40 am

Not being much of a coder I have tried this stacked navigation stuff and liked it. One question is it possible to apply the Scripty Accordion to the pages as well? I have tried but it broke the accordion action.

Why do all the best things start with a ‘f’ ?

Mad Farquhar

16 Jan 2018, 10:43 am

Ah - it may be a p issue. Back on the yellow brick road….

Why do all the best things start with a ‘f’ ?

Richard van Heukelum

16 Jan 2018, 11:14 pm

I’ve tried the script accordion for a while, but ditched it. I’d rather stay with the ‘hand coded’ accordion Dan Jasker thought me a couple of years ago.

– 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.

Mad Farquhar

17 Jan 2018, 6:12 am

Thanks for the response Richard. I’ll have a browse for the Tasker version. I guess I may have to learn some coding skills to progress from my crap, to mediocre, amateur site design. :-(

Why do all the best things start with a ‘f’ ?

waltd

17 Jan 2018, 3:03 pm

Amateur means work “from the heart, from love”. I would class it above professional, which is just “from the love of money”.

Walter

On Jan 17, 2018, at 1:12 AM, Mad Farquhar <[email protected]> wrote:

to progress from my crap, to mediocre, amateur site design. :-(

Freeway user since 1997

http://www.walterdavisstudio.com

Mad Farquhar

17 Jan 2018, 3:18 pm

Aye - quite good Walter! Just as well my “love” means I don’t mind spending inordinate amounts of time “fettling”. Perhaps you might be able to tell me if it’s a pointless exercise trying to install (your) Scripty Action onto pages which have the stacked navigation actions? I am hacking it about something rotten, and even, to my utter surprise learning something (not, as yet, sure what) as I open code in jEdit. Certainly will need to reconcile all the variations I have saved over the last couple of days and probably start from ground zero as it’s all becoming a tad nebulous, and that’s before a large malt. Unfortunately I haven’t uploaded anything as yet as I don’t want the original site to be bust. Maybe look at making a compartment on the server to test / preview to outputs.

Why do all the best things start with a ‘f’ ?

waltd

17 Jan 2018, 3:42 pm

I had a look at the stacked navigation code, and I could not see anything wrong about it — it uses “vanilla” JavaScript (code written without a framework, just using the language itself), which usually means it won’t conflict with Prototype or jQuery. One thing that Prototype is a stickler about is traversing an array as if it was an object. The following code will work as intended without Prototype, even though it is considered hackish:

var bar = [1,2,3,4];
for(foo in bar){
    // do something with foo
}

The Prototype way to do this would be to use an iterator, which is part of the Enumerable module*:

bar.each(function(foo){
    // do something with foo
});

and the correct “vanilla” way to do it is with a fully defined for loop:

for(var idx = 0; idx < bar.length; ++idx){      var foo = bar[idx];     // do something with foo    }I didn't see any of these loops in your code, but I admit I didn't spend much time staring at it either. Perhaps that will give you (or the original author) something to think about. You can also see more about the error if you enable the Develop menu in Safari (Preferences / Advanced) and look at the JavaScript Console output while you navigate the page. If you see something in red there, post back to this thread and let us know what it says. (Copy and paste are your friends!)Walter*The `each` iterator has been added to the core JavaScript language in one of the more recent updates, too, but the signature is different. I don't know off-hand what the Prototype Enumerable module will do in that case. I do know that the version of Prototype bundled with my early Scripty Actions is quite out of date, and I haven't taken the time to update them. I may get around to that, if the demand is there.> On Jan 17, 2018, at 10:18 AM, Mad Farquhar <[email protected]> wrote:

Aye - quite good Walter! Just as well my “love” means I don’t mind spending inordinate amounts of time “fettling”. Perhaps you might be able to tell me if it’s a pointless exercise trying to install (your) Scripty Action onto pages which have the stacked navigation actions? I am hacking it about something rotten, and even, to my utter surprise learning something (not, as yet, sure what) as I open code in jEdit. Certainly will need to reconcile all the variations I have saved over the last couple of days and probably start from ground zero as it’s all becoming a tad nebulous, and that’s before a large malt. Unfortunately I haven’t uploaded anything as yet as I don’t want the original site to be bust. Maybe look at making a compartment on the server to test / preview to outputs.

Freeway user since 1997

http://www.walterdavisstudio.com

Richard van Heukelum

18 Jan 2018, 8:19 pm

Download files and screencast series here: Building Accordion Menus Using JQuery

Have fun ;)

– 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

20 Mar 2018, 6:47 pm

Richard, In your Stacked Navigation Menu I want to change the Menu Object “hamburger” to something else or at least another color or add the word Menu.

Could you show me how?

Billy

Back to Top

billy kimmel

17 Aug 2018, 4:07 pm

Can anyone tell me how to replace the “content” in the component.css file so that instead of text for my navigation icon I can have an image source.

Billy