Grow your CSS skills. Land your dream job.

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?

    http://www.scoopweb.com/Debridement

    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

    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() {
    $(this).addClass('et_hover');
    }, function() {
    $(this).removeClass('et_hover');
    });

    Here’s the script link: http://www.scoopweb.com/js/custom.js?ver=1.0.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".