Matt. Christopher Matt. Christopher - 2 months ago 6
HTML Question

How do I stop my menu from saving its state in the URL?

I have a menu which when I click on goes to /#0 of the page to indicate that it has been opened, what I'm wondering how to do is to either prevent this from showing or find an alternative way of opening the menu. Here's the menu trigger html:

<header class="cd-header">
<a href="#0" class="cd-3d-nav-trigger">
Menu
<span></span>
</a>
</header>


And my full javascript file can be found here

jQuery(document).ready(function($){
//toggle 3d navigation
$('.cd-3d-nav-trigger').on('click', function(){
toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
});

//select a new item from the 3d navigation
$('.cd-3d-nav').on('click', 'a', function(){
var selected = $(this);
selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
updateSelectedNav('close');
});

$(window).on('resize', function(){
window.requestAnimationFrame(updateSelectedNav);
});

function toggle3dBlock(addOrRemove) {
if(typeof(addOrRemove)==='undefined') addOrRemove = true;
$('.cd-header').toggleClass('nav-is-visible', addOrRemove);
$('.cd-3d-nav-container').toggleClass('nav-is-visible', addOrRemove);
$('main').toggleClass('nav-is-visible', addOrRemove).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//fix marker position when opening the menu (after a window resize)
addOrRemove && updateSelectedNav();
});
}

//this function update the .cd-marker position
function updateSelectedNav(type) {
var selectedItem = $('.cd-selected'),
selectedItemPosition = selectedItem.index() + 1,
leftPosition = selectedItem.offset().left,
backgroundColor = selectedItem.data('color'),
marker = $('.cd-marker');

marker.removeClassPrefix('color').addClass('color-'+ selectedItemPosition).css({
'left': leftPosition,
});
if( type == 'close') {
marker.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
toggle3dBlock(false);
});
}
}

$.fn.removeClassPrefix = function(prefix) {
this.each(function(i, el) {
var classes = el.className.split(" ").filter(function(c) {
return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = $.trim(classes.join(" "));
});
return this;
};
});


Thanks in advance.

Answer

Expanding on my comment above, you need to prevent the default action from occurring.

$('.cd-3d-nav-trigger').on('click', function(e){
    e.preventDefault();

    toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
});

You can also return false from the click handler which will prevent the default action and stop propagation of the event to parent elements.

Comments