The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How was this made?

  • # April 28, 2013 at 1:48 am

    I’ve gone through this website, I love the animation for the navigation when hovering over the nav items and how everything changes so quickly, without lag and all, but ive also noticed that the url doesn’t change either, is this done through hiding boxes and all ? or is this javascript? or ajax? can someone give more insight please?

    I’m doing my best and trying to re-create it.

    # April 28, 2013 at 6:18 am

    It’s some form of tabbed navigation (Google keywords right there) using JavaScript (not Ajax, though that is JavaScript too). All the content seems to be there when inspecting the DOM and they use JavaScript to hide/show parts of that content. The menu animation can be done with a simple CSS3 transition, though it seems they use JavaScript there, too.

    # April 28, 2013 at 12:50 pm

    This reply has been reported for inappropriate content.

    Just like @CrocoDillon stated, it uses JavaScript (jQuery) to add a custom class to the menu links on hover:

    $main_menu.find('>li').hover(function() {
    }, function() {

    Here’s the script link:

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed