Grow your CSS skills. Land your dream job.

JQuery Fade In alternative for this

  • # December 18, 2012 at 8:15 pm

    Hey all,

    I made a JQuery function for creating a mobile nav, code below.

    It works fine, adding the class & making the nav appear when tapped, but I want to see if there is a way to fade, rather than just snap the menu in.

    Code:


    (function() { // Mobile Nav
    var mobileNav = {
    nav: $('nav'),
    firstLi: $('nav ul li:first-child'),
    ul: $('nav ul'),
    init: function() {
    $('<span class="nav-open icon-th-list"></span>')
    .insertBefore(mobileNav.nav)
    .on('click', this.show);
    $('<li class="home"><a href="/">Home</a></li>').insertBefore(mobileNav.firstLi);
    $('<p>Call Us Now: <span class="no-break"><a href="tel:02380659945">02380 659 945</a></span></p>').insertBefore(mobileNav.ul);
    },

    show: function() {
    mobileNav.close.call(mobileNav.nav),
    mobileNav.nav.addClass('active');
    },

    close: function() {
    var $this = $(this);
    $('<span class="close-nav icon-cancel"></span>')
    .prependTo(this)
    .on('click', function() {
    $this.removeClass('active');
    })
    }
    };
    mobileNav.init();

    })();

    [You can see it in operation here](http://v4.unleash-it.co.uk) – Reduce your browser width to see it.

    Basically the adding of the “active” class is what does the real work. Is there a way to fade in/out when adding/removing a class?

    # December 18, 2012 at 11:24 pm

    You *could* apply some CSS transitions depending on the class. You’d only see it in newer browsers and older browsers would still do the snap, but that’s a pretty good trade off!

    # December 18, 2012 at 11:35 pm

    Yeah I tried some transitions, problem is the active basically reveals it from display: none to block. Is there a way to transition display?

    Alternatively I could try doing it as a height change, like 0 up to full or something.

    # December 18, 2012 at 11:37 pm

    I think I would do something similar that Chris has done. Throw it underneath your logo at full width and use text that just says “Menu” or whatever. The way it sits now, it just feels awkward.

    Update: When you close out the menu, I would append a class of “closed”. This way you can target `active` and `closed` for the fadeToggle().

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

You must be logged in to reply to this topic.

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