Animated Content Menu with jQuery

Great jQuery tutorial as usual. The one thing I would add is a :hover state for the links to make it obvious they need to be clicked. I just jumped right to the demo and it wasn’t immediately obvious that I had to click the main menu items to start the action. I know, I know, the cursor turned into a pointer, but I was expecting a flyout on hover.

I think I’ve fixed it. Here was my script for anyone that may have the same issue:

var $j = jQuery.noConflict();
$j(function() {
var $ac_background = $j(‘#ac_background’),
$ac_bgimage = $ac_background.find(‘.ac_bgimage’),
$ac_loading = $ac_background.find(‘.ac_loading’),

$ac_content = $j(‘#ac_content’),
$title = $ac_content.find(‘h1’),
$menu = $ac_content.find(‘.ac_menu’),
$mainNav = $menu.find(‘ul:first’),
$menuItems = $mainNav.children(‘li’),
totalItems = $menuItems.length,
$ItemImages = new Array();

/*
for this menu, we will preload all the images.
let’s add all the image sources to an array,
including the bg image
*/
$menuItems.each(function(i) {
$ItemImages.push($j(this).children(‘a:first’).attr(‘href’));
});
$ItemImages.push($ac_bgimage.attr(‘src’));

var Menu = (function(){
var init = function() {
loadPage();
initWindowEvent();
},
loadPage = function() {
/*
1- loads the bg image and all the item images;
2- shows the bg image;
3- shows / slides out the menu;
4- shows the menu items;
5- initializes the menu items events
*/
$ac_loading.show();//show loading status image
$j.when(loadImages()).done(function(){
$j.when(showBGImage()).done(function(){
//hide the loading status image
$ac_loading.hide();
$j.when(slideOutMenu()).done(function(){
$j.when(toggleMenuItems(‘up’)).done(function(){
initEventsSubMenu();
});
});
});
});
},
showBGImage = function() {
return $j.Deferred(
function(dfd) {
//adjusts the dimensions of the image to fit the screen
adjustImageSize($ac_bgimage);
$ac_bgimage.fadeIn(1000, dfd.resolve);
}
).promise();
},
slideOutMenu = function() {
/* calculate new width for the menu */
var new_w = $j(window).width() – $title.outerWidth(true);
return $j.Deferred(
function(dfd) {
//slides out the menu
$menu.stop()
.animate({
width : new_w + ‘px’
}, 700, dfd.resolve);
}
).promise();
},
/* shows / hides the menu items */
toggleMenuItems = function(dir) {
return $j.Deferred(
function(dfd) {
/*
slides in / out the items.
different animation time for each one.
*/
$menuItems.each(function(i) {
var $el_title = $j(this).children(‘a:first’),
marginTop, opacity, easing;
if(dir === ‘up’){
marginTop = ‘0px’;
opacity = 1;
easing = ‘easeOutBack’;
}
else if(dir === ‘down’){
marginTop = ’60px’;
opacity = 0;
easing = ‘easeInBack’;
}
$el_title.stop()
.animate({
marginTop : marginTop,
opacity : opacity
}, 200 + i * 200 , easing, function(){
if(i === totalItems – 1)
dfd.resolve();
});
});
}
).promise();
},
initEventsSubMenu = function() {
$menuItems.each(function(i) {
var $item = $j(this), // the
$el_title = $item.children(‘a:first’),
el_image = $el_title.attr(‘href’),
$sub_menu = $item.find(‘.ac_subitem’),
$ac_close = $sub_menu.find(‘.ac_close’);

/* user clicks one item : appetizers | main course | desserts | wines | specials */
$el_title.bind(‘click.Menu’, function(e) {
$j.when(toggleMenuItems(‘down’)).done(function(){
openSubMenu($item, $sub_menu, el_image);
});
return false;
});
/* closes the submenu */
$ac_close.bind(‘click.Menu’, function(e) {
closeSubMenu($sub_menu);
return false;
});
});
},
openSubMenu = function($item, $sub_menu, el_image) {
$sub_menu.stop()
.animate({
height : ‘400px’,
marginTop : ‘-200px’
}, 400, function() {
//the bg image changes
showItemImage(el_image);
});
},
/* changes the background image */
showItemImage = function(source) {
//if its the current one return
if($ac_bgimage.attr(‘src’) === source)
return false;

var $itemImage = $j(”);
$itemImage.insertBefore($ac_bgimage);
adjustImageSize($itemImage);
$ac_bgimage.fadeOut(1500, function() {
$j(this).remove();
$ac_bgimage = $itemImage;
});
$itemImage.fadeIn(1500);
},
closeSubMenu = function($sub_menu) {
$sub_menu.stop()
.animate({
height : ‘0px’,
marginTop : ‘0px’
}, 400, function() {
//show items
toggleMenuItems(‘up’);
});
},
/*
on window resize, ajust the bg image dimentions,
and recalculate the menus width
*/
initWindowEvent = function() {
/* on window resize set the width for the menu */
$j(window).bind(‘resize.Menu’ , function(e) {
adjustImageSize($ac_bgimage);
/* calculate new width for the menu */
var new_w = $j(window).width() – $title.outerWidth(true);
$menu.css(‘width’, new_w + ‘px’);
});
},
/* makes an image “fullscreen” and centered */
adjustImageSize = function($img) {
var w_w = $j(window).width(),
w_h = $j(window).height(),
r_w = w_h / w_w,
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h,
new_left,new_top;

if(r_w > r_i){
new_h = w_h;
new_w = w_h / r_i;
}
else{
new_h = w_w * r_i;
new_w = w_w;
}

$img.css({
width : new_w + ‘px’,
height : new_h + ‘px’,
left : (w_w – new_w) / 2 + ‘px’,
top : (w_h – new_h) / 2 + ‘px’
});
},
/* preloads a set of images */
loadImages = function() {
return $j.Deferred(
function(dfd) {
var total_images = $ItemImages.length,
loaded = 0;
for(var i = 0; i < total_images; ++i){
$j('’).load(function() {
++loaded;
if(loaded === total_images)
dfd.resolve();
}).attr(‘src’ , $ItemImages[i]);
}
}
).promise();
};

return {
init : init
};
})();

/*
call the init method of Menu
*/
Menu.init();
});

Sorry for the long posts though I’d like to share my FINAL fix:

var $j = jQuery.noConflict();
$j(function() {
var $ac_background = $j(‘#ac_background’),
$ac_bgimage = $ac_background.find(‘.ac_bgimage’),
$ac_loading = $ac_background.find(‘.ac_loading’),

$ac_content = $j(‘#ac_content’),
$title = $ac_content.find(‘h1’),
$menu = $ac_content.find(‘.ac_menu’),
$mainNav = $menu.find(‘ul:first’),
$menuItems = $mainNav.children(‘li’),
totalItems = $menuItems.length,
$ItemImages = new Array();

/*
for this menu, we will preload all the images.
let’s add all the image sources to an array,
including the bg image
*/
$menuItems.each(function(i) {
$ItemImages.push($j(this).children(‘a:first’).attr(‘href’));
});
$ItemImages.push($ac_bgimage.attr(‘src’));

var Menu = (function(){
var init = function() {
loadPage();
initWindowEvent();
},
loadPage = function() {
/*
1- loads the bg image and all the item images;
2- shows the bg image;
3- shows / slides out the menu;
4- shows the menu items;
5- initializes the menu items events
*/
$ac_loading.show();//show loading status image
$j.when(loadImages()).done(function(){
$j.when(showBGImage()).done(function(){
//hide the loading status image
$ac_loading.hide();
$j.when(slideOutMenu()).done(function(){
$j.when(toggleMenuItems(‘up’)).done(function(){
initEventsSubMenu();
});
});
});
});
},
showBGImage = function() {
return $j.Deferred(
function(dfd) {
//adjusts the dimensions of the image to fit the screen
adjustImageSize($ac_bgimage);
$ac_bgimage.fadeIn(1000, dfd.resolve);
}
).promise();
},
slideOutMenu = function() {
/* calculate new width for the menu */
var new_w = $j(window).width() – $title.outerWidth(true);
return $j.Deferred(
function(dfd) {
//slides out the menu
$menu.stop()
.animate({
width : new_w + ‘px’
}, 700, dfd.resolve);
}
).promise();
},
/* shows / hides the menu items */
toggleMenuItems = function(dir) {
return $j.Deferred(
function(dfd) {
/*
slides in / out the items.
different animation time for each one.
*/
$menuItems.each(function(i) {
var $el_title = $j(this).children(‘a:first’),
marginTop, opacity, easing;
if(dir === ‘up’){
marginTop = ‘0px’;
opacity = 1;
easing = ‘easeOutBack’;
}
else if(dir === ‘down’){
marginTop = ’60px’;
opacity = 0;
easing = ‘easeInBack’;
}
$el_title.stop()
.animate({
marginTop : marginTop,
opacity : opacity
}, 200 + i * 200 , easing, function(){
if(i === totalItems – 1)
dfd.resolve();
});
});
}
).promise();
},
initEventsSubMenu = function() {
$menuItems.each(function(i) {
var $item = $j(this), // the
$el_title = $item.children(‘a:first’),
el_image = $el_title.attr(‘href’),
$sub_menu = $item.find(‘.ac_subitem’),
$ac_close = $sub_menu.find(‘.ac_close’);

/* user clicks one item : appetizers | main course | desserts | wines | specials */
$el_title.bind(‘click.Menu’, function(e) {
$j.when(toggleMenuItems(‘down’)).done(function(){
openSubMenu($item, $sub_menu, el_image);
});
return false;
});
/* closes the submenu */
$ac_close.bind(‘click.Menu’, function(e) {
closeSubMenu($sub_menu);
return false;
});
});
},
openSubMenu = function($item, $sub_menu, el_image) {
$sub_menu.stop()
.animate({
height : ‘400px’,
marginTop : ‘-200px’
}, 400, function() {
//the bg image changes
showItemImage(el_image);
});
},
/* changes the background image */
showItemImage = function(source) {
//if its the current one return
if($ac_bgimage.attr(‘src’) === source)
return false;

var $itemImage = $j(”);
$itemImage.insertBefore($ac_bgimage);
adjustImageSize($itemImage);
$ac_bgimage.fadeOut(1500, function() {
$j(this).remove();
$ac_bgimage = $itemImage;
});
$itemImage.fadeIn(1500);
},
closeSubMenu = function($sub_menu) {
$sub_menu.stop()
.animate({
height : ‘0px’,
marginTop : ‘0px’
}, 400, function() {
//show items
toggleMenuItems(‘up’);
});
},
/*
on window resize, ajust the bg image dimentions,
and recalculate the menus width
*/
initWindowEvent = function() {
/* on window resize set the width for the menu */
$j(window).bind(‘resize.Menu’ , function(e) {
adjustImageSize($ac_bgimage);
/* calculate new width for the menu */
var new_w = $j(window).width() – $title.outerWidth(true);
$menu.css(‘width’, new_w + ‘px’);
});
},
/* makes an image “fullscreen” and centered */
adjustImageSize = function($img) {
var w_w = $j(window).width(),
w_h = $j(window).height(),
r_w = w_h / w_w,
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h,
new_left,new_top;

if(r_w > r_i){
new_h = w_h;
new_w = w_h / r_i;
}
else{
new_h = w_w * r_i;
new_w = w_w;
}

$img.css({
width : new_w + ‘px’,
height : new_h + ‘px’,
left : (w_w – new_w) / 2 + ‘px’,
top : (w_h – new_h) / 2 + ‘px’
});
},
/* preloads a set of images */
loadImages = function() {
return $j.Deferred(
function(dfd) {
var total_images = $ItemImages.length,
loaded = 0;
for(var i = 0; i < total_images; ++i){
$j('’).load(function() {
++loaded;
if(loaded === total_images)
dfd.resolve();
}).attr(‘src’ , $ItemImages[i]);
}
}
).promise();
};

return {
init : init
};
})();

/*
call the init method of Menu
*/
Menu.init();
});