​

var $menu  = $("#menu");

var $nav   = $("nav");

var $navUl = $nav.find("ul");

var $links = $navUl.find("a");

var nLinks = $links.length;

var linkH  = $links.outerHeight();

var interaction = false; // Was any menu interaction? (so we can hide the menu)

var menuHovered = false;

var hash = window.location.hash; // If a user comes to the page usign a hash like http://mypage.com#video

var mouseY = 0; // Needed to know the mouse position when menu is opening

var $pages = $("#pages > div"); // Get all pages;

​

​

$(document).on("mousemove", function( e ){

    mouseY = e.clientY; // Update the Y value

});

​

function openMenu() {

  $navUl.stop().animate({top: 0});

  $nav.stop().animate({height: linkH*nLinks}, {

    duration: 600,

    step: function( menuHeight ){

        // keeps removing and adding class during the animation time.

        // (it's an overkill but no other solution to that issue so far)

        $links.removeClass("hover").filter(function(i, e){

          var t = e.getBoundingClientRect().top;

          return mouseY > t  &&  mouseY < t+linkH;

        }).addClass("hover"); // only to the link returned by `.filter()` condition

    }

  });

}

​

function closeMenu() {

  if(!interaction) return; // Don't close menu if no item was clicked

  $navUl.stop().animate({top: - $navUl.find(".selected").position().top });

  $nav.stop().animate({height: linkH});

}

​

function setSelected() {

  $links.removeClass("selected");               // Remove from all

  $("a[href='"+hash+"']").addClass("selected"); // Add to clicked one (by var hash)

  closeMenu(); // force close menu!!

}

​

function openPage(){

  $( hash ).stop().fadeIn().siblings().fadeOut();

  setSelected(); // Set active state depenging on hash value

}

​

openPage(); // Open a page on website load (If we have hash value ofc.)

​

$links.on("click", function( e ){

  e.preventDefault();                   // Prevent browser action

  interaction = true;

  hash = $(this).attr("href");          // !!!!! here is where hash changes

  history.replaceState(null, '', hash); // Set HASH to address bar

​

  openPage();    // open page (ID) depending on hash value (it does also the selected stuff)

}).hover(function(){

   $(this).toggleClass("hover");

});

​

$menu.hover(openMenu, closeMenu);