mardi 27 janvier 2015

Internal links return null errors and I can't find the mistake in my Javascript. External links work just fine


I set up a website and tried a fancy navigation, which I copied from http://ift.tt/1wojXSt and customized a little bit. (Thanks for inspiring me!)


This is my site


davidgoossens.com


The HTML and CSS work fine but internal links (when you open the navigation on the bottom right) keep returning 404s. My webhoster told me the mistake must be in the JS which is:



var nav = document.querySelector('.material-menu-wrapper');
var circle = document.querySelector('.material-btn');
var link = document.querySelector('.material-content').querySelectorAll('li');
var ham = document.querySelector('.material-hamburger');
var main = document.querySelector('.content-fade');



var win = window;

function openMenu(event) {
nav.classList.toggle('active');
circle.classList.toggle('active');
ham.classList.toggle('material-close');
main.classList.toggle('active');
for (var i = 0; i < link.length; i++) {
link[i].classList.toggle('active');
}
event.preventDefault();
event.stopImmediatePropagation();
}

function closeMenu() {
if (circle.classList.contains('active')) {
circle.classList.remove('active');
for (var i = 0; i < link.length; i++) {
link[i].classList.toggle('active');
}
ham.classList.remove('material-close');
main.classList.remove('active');
nav.classList.remove('active');
}
}


circle.addEventListener('click', openMenu, false);
circle.addEventListener('touchstart', openMenu, false);
win.addEventListener('click', closeMenu, false);
win.addEventListener('touchstart', closeMenu, false);`


This is the HTML of my navigation



<div class="material-menu-wrapper">
<div class="material-menu">
<div class="material-btn">
<div class="material-hamburger">
<div class="material-patty"></div>
<div class="material-patty"></div>
<div class="material-patty"></div>
</div>
</div>
<div class="material-content">
<nav>
<ul>
<li><a href="http://ift.tt/1CdDUyQ">Thesenpapier</a></li>
<li><a href="http://ift.tt/15Go3uT">Motivation</a></li>
<li><a href="http://ift.tt/1CdDUyW">Arbeitsproben</a></li>
<li><a href="http://ift.tt/15Go6qh">CV</a></li>

</ul>
</nav>
</div>
</div>
</div>


Would be great if you could help me fix this!!!


Best regards


David





Aucun commentaire:

Enregistrer un commentaire