Adding Fragment Identifier Links to Codrops Blueprint Page Stack Navigation- Help

[Katieblackmore7]

0

I am using this amazing Page Stack Navigation Template from Codrops and have changed and adapted it to meet my needs. I have nearly finished the whole website that was built around this cool feature, when I suddenly realised that I cannot add other internal site links without completely messing it up. I want to be able to change pages and be able to jump to sections without always going through the menu.

E.g. An internal link at the bottom of the documents page that will jump to the manuals page without the user having to click the menu button.

Here are the links to the original document to make it easier:

GitHub - codrops/PageStackNavigation: A template for a simple page stack...

[m3g4p0p]

Hi @Katieblackmore7, in the source code of the github repo (not in the article though) there’s the following function which does exactly that:

//changes to a page such as id="page-manuals" without opening the menu and preserving menu transition functionality
window.openPageNoTransition = function(id){

	var futurePage = id ? document.getElementById(id) : pages[current],
		futureCurrent = pages.indexOf(futurePage),
		stackPagesIdxs = getStackPagesIdxs(futureCurrent);

	// set transforms for the new current page
	futurePage.style.WebkitTransform = 'translate3d(0, 0, 0)';
	futurePage.style.transform = 'translate3d(0, 0, 0)';
	futurePage.style.opacity = 1;

	classie.remove(futurePage, 'page--inactive');

	// set current
	if( id ) {
		current = futureCurrent;
	}

	buildStack();
}

Exposing it to the window presumably is only for testing purposes, so I’d rather define it as a regular function inside the IIFE. You might then use it like so, analogously to the nav items (giving your direct links a link--direct class or something):

function initEvents () {
  // ...

  document.querySelectorAll('.link--direct').forEach(function (link) {
    link.addEventListener('click', function (event) {
      event.preventDefault()
      openPageNoTransition(event.target.hash.slice(1))
    })
  })
}