Home › Forums › JavaScript › JQuery Fade In alternative for this
- This topic is empty.
-
AuthorPosts
-
December 18, 2012 at 8:15 pm #41434
Andy Howells
ParticipantHey 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 #118037TheDoc
MemberYou *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 #118041Andy Howells
ParticipantYeah 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 #118042chrisburton
ParticipantI 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().
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.