Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript JQuery Fade In alternative for this

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #41434
    Andy Howells
    Participant

    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?

    #118037
    TheDoc
    Member

    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!

    #118041
    Andy Howells
    Participant

    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.

    #118042
    chrisburton
    Participant

    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.