Forums

AndyHowells

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 - 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?

TheDoc

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!

AndyHowells

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.

chrisburton

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().

treehouse : what would you like to learn today?

Forums

JQuery Fade In alternative for this