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
  • #41434
    Andy Howells

    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.


    (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>')
    $('<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() {,

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


    [You can see it in operation here]( – 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?


    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!

    Andy Howells

    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.


    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.