[jQuery] Don't add ".html" in URL - Please help!!

[jQuery] Don't add ".html" in URL - Please help!!

Hello everybody! Up front, I excuse me for my bad English!

I develop a website and found this fancy animated sidebar-menu: Codyhouse
Furthermore, I specialized on PHP and MySQL, so actually I'm not able to develop jQuery!

But I have a problem! I have the menu like this: 
  2. <nav class="cd-side-navigation">
  3. <ul>
  4. <li>
  5. <a href="#0" class="selected" data-menu="/index.php?site=0">
  6. <svg class="nc-icon outline"><!--SVG ICON STUFF--></svg>
  7. Home
  8. </a>
  9. </li>
  10.             <--! More entries... -->
So in the end, it looks a litte bit like this:  Home

Now I've got the main.css file, which is linked to my HTML-file:
  2. jQuery(document).ready(function($){
  3. //set some variables
  4. var isAnimating = false,
  5. firstLoad = false,
  6. newScaleValue = 1;

  8. //cache DOM elements
  9. var dashboard = $('.cd-side-navigation'),
  10. mainContent = $('.cd-main'),
  11. loadingBar = $('#cd-loading-bar');

  13. //select a new section
  14. dashboard.on('click', 'a', function(event){
  15. event.preventDefault();
  16. var target = $(this),
  17. //detect which section user has chosen
  18. sectionTarget = target.data('menu');
  19. if( !target.hasClass('selected') && !isAnimating ) {
  20. //if user has selected a section different from the one alredy visible - load the new content
  21. triggerAnimation(sectionTarget, true);
  22. }

  24. firstLoad = true;
  25. });

  27. //detect the 'popstate' event - e.g. user clicking the back button
  28.   $(window).on('popstate', function() {
  29.   if( firstLoad ) {
  30.    /*
  31.    Safari emits a popstate event on page load - check if firstLoad is true before animating
  32.    if it's false - the page has just been loaded 
  33.    */
  34.       var newPageArray = location.pathname.split('/'),
  35.        //this is the url of the page to be loaded 
  36.        newPage = newPageArray[newPageArray.length - 1].replace('.html', '');
  37.       if( !isAnimating ) triggerAnimation(newPage, false);
  38.    }
  39.    firstLoad = true;
  40. });

  42.   //scroll to content if user clicks the .cd-scroll icon
  43. mainContent.on('click', '.cd-scroll', function(event){
  44. event.preventDefault();
  45. var scrollId = $(this.hash);
  46. $(scrollId).velocity('scroll', { container: $(".cd-section") }, 200);
  47. });

  49. //start animation
  50. function triggerAnimation(newSection, bool) {
  51. isAnimating =  true;
  52. newSection = ( newSection == '' ) ? 'index' : newSection;
  54. //update dashboard
  55. dashboard.find('*[data-menu="'+newSection+'"]').addClass('selected').parent('li').siblings('li').children('.selected').removeClass('selected');
  56. //trigger loading bar animation
  57. initializeLoadingBar(newSection);
  58. //load new content
  59. loadNewContent(newSection, bool);
  60. }

  62. function initializeLoadingBar(section) {
  63. var selectedItem =  dashboard.find('.selected'),
  64. barHeight = selectedItem.outerHeight(),
  65. barTop = selectedItem.offset().top,
  66. windowHeight = $(window).height(),
  67. maxOffset = ( barTop + barHeight/2 > windowHeight/2 ) ? barTop : windowHeight- barTop - barHeight,
  68. scaleValue = ((2*maxOffset+barHeight)/barHeight).toFixed(3)/1 + 0.001;
  70. //place the loading bar next to the selected dashboard element
  71. loadingBar.data('scale', scaleValue).css({
  72.    height: barHeight,
  73.    top: barTop
  74. }).attr('class', '').addClass('loading '+section);
  75. }

  77. function loadNewContent(newSection, bool) {
  78. setTimeout(function(){
  79. //animate loading bar
  80. loadingBarAnimation();
  82. //create a new section element and insert it into the DOM
  83. var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent);
  84. //load the new content from the proper html file
  85. section.load(newSection+'.html .cd-section > *', function(event){
  86. //finish up the animation and then make the new section visible
  87. var scaleMax = loadingBar.data('scale');
  89. loadingBar.velocity('stop').velocity({
  90. scaleY: scaleMax
  91. }, 400, function(){
  92. //add the .visible class to the new section element -> it will cover the old one
  93. section.prev('.visible').removeClass('visible').end().addClass('visible').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  94. resetAfterAnimation(section);
  95. });

  97. //if browser doesn't support transition
  98. if( $('.no-csstransitions').length > 0 ) {
  99. resetAfterAnimation(section);
  100. }

  102. var url = newSection+'.html';

  104. if(url!=window.location && bool){
  105.        //add the new page to the window.history
  106.        //if the new page was triggered by a 'popstate' event, don't add it
  107.        window.history.pushState({path: url},'',url);
  108.    }
  109. });
  110. });

  112. }, 50);
  113. }

  115. function loadingBarAnimation() {
  116. var scaleMax = loadingBar.data('scale');
  117. if( newScaleValue + 1 < scaleMax) {
  118. newScaleValue = newScaleValue + 1;
  119. } else if ( newScaleValue + 0.5 < scaleMax ) {
  120. newScaleValue = newScaleValue + 0.5;
  121. }
  123. loadingBar.velocity({
  124. scaleY: newScaleValue
  125. }, 100, loadingBarAnimation);
  126. }

  128. function resetAfterAnimation(newSection) {
  129. //once the new section animation is over, remove the old section and make the new one scrollable
  130. newSection.removeClass('overflow-hidden').prev('.cd-section').remove();
  131. isAnimating =  false;
  132. //reset your loading bar
  133. resetLoadingBar();
  134. }

  136. function resetLoadingBar() {
  137. loadingBar.removeClass('loading').velocity({
  138. scaleY: 1
  139. }, 1);
  140. }
  141. });
I don't know why and I don't get the clue. And all together results in this when I want to go to another page: 


How can I remove ".html" at the end of the url? 


Please help me. You'll be welcome!
Your sincerely, Nicolas.