Oggi vogliamo costruire un menu’ animato con jQuery per tutti gli usi. Ogni volta che si clicca su una voce di menu’, si aprira una window che contiene le sottovoci e verranno visualizzate piu’ informazioni. Inoltre, l’immagine di sfondo cambiera’ in base alla voce che stiamo clicccando. Ogni volta che appare la window, il menu’ principale va a scomparire e quando clicchiamo su chiudi eccolo che riappare.
Cominciamo a bomba.
CODICE HTML
Contiene gli elementi per l’immagine di sfondo, la sovrapposizione della griglia e l’icona per il caricamento dell’immagine.
All’inizio, appena aprima la pagina ci sara’ come immagini di sfondo la Default.jpg. le voci di menu sono contenute nella classe “ac_content” e le voci del sotto menu’ in quella “ac_subitem” come potete vedere qui di seguito:
Cafe + BarMagoo
-
Antipasti
Antipasti
- A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
- Misto salumi
- Crostini toscani
- Salmone affumicato
- Prosciutto Cinta senese
- Bruschette Varie
- Cocktail di gamberi
- Tartare di funghi
Diamo uno sguardo al foglio di stile.
CODICE CSS
L’immagine di sfondo sara’ nera, mentre i collegamenti bianchi. Definiremo all’interno del nostro foglio di stile le classi principali e credo non ci sia niente da aggiungere:
@import url('reset.css');
body{
background:#000;
color:#fff;
font-family: 'PT Sans Narrow', Arial, sans-serif;
text-transform:uppercase;
}
a{
color:#fff;
text-decoration:none;
}
img.ac_bgimage{
position:fixed;
left:0px;
top:0px;
width:100%;
opacity:0.8;
display:none;
}
.ac_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(../images/pattern.png) repeat top left;
}
.ac_loading{
position:fixed;
top:10px;
right:10px;
background:#000 url(../images/loader.gif) no-repeat center center;
width:50px;
height:50px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px 10px 10px 10px;
z-index:999;
opacity:0.7;
display:none;
}
.ac_content{
position:fixed;
height:90px;
width:100%;
top:50%;
left:0px;
margin-top:-65px;
}
.ac_content h1{
background:transparent url(../images/bg_menu.png) repeat top left;
display:block;
float:left;
width:90px;
height:50px;
padding:20px;
font-size:36px;
font-weight:bold;
line-height:20px;
margin-right:1px;
}
.ac_content h1 span{
display:block;
font-weight:normal;
font-size:14px;
}
.ac_menu{
background:transparent url(../images/bg_menu.png) repeat top left;
float:left;
position:relative;
height:90px;
width:0px;
}
.ac_menu > ul{
float:right;
}
.ac_menu > ul > li{
float:left;
position:relative;
height:90px;
overflow:hidden;
}
.ac_menu > ul > li a{
margin-top:60px;
opacity:0;
display:block;
height:90px;
padding:0px 10px;
text-align:center;
line-height:90px;
outline:none;
font-size:18px;
font-weight:bold;
text-shadow:1px 1px 1px #000;
}
.ac_subitem{
width:400px;
height:0px; /* animate to 400px */
top:50%;
right:0px;
margin-top:0px; /* animate to -200px */
position:fixed;
z-index:99;
overflow:hidden;
background:transparent url(../images/bg_menu.png) repeat top left;
}
.ac_subitem h2{
font-size:22px;
font-weight:bold;
color:#fff;
padding: 40px 0px 0px 40px;
text-shadow:0px 0px 1px #000;
}
.ac_subitem ul{
padding:0px 40px;
}
.ac_subitem ul li{
margin:10px 0px;
}
.ac_subitem ul li:first-child{
font-size:14px;
text-transform:none;
border-bottom:1px dotted #333;
padding-bottom:15px;
margin-bottom:15px;
}
span.ac_close{
float:right;
margin:10px;
width:11px;
height:12px;
cursor:pointer;
background:transparent url(../images/close.png) no-repeat top left;
opacity:0.4;
}
span.ac_close:hover{
opacity:1.0;
}
.ac_footer{
position:fixed;
bottom:0px;
left:0px;
width:100%;
font-size:13px;
background:#000;
opacity:0.9;
height:20px;
padding-bottom:5px;
}
.ac_footer a{
padding:5px 10px;
letter-spacing:1px;
text-shadow:1px 1px 1px #000;
color:#ddd;
float:right;
}
.footer a:hover{
color:#fff;
}
.ac_footer a span{
font-weight:bold;
}
.ac_footer a.ac_left{
float:left;
}
IL CODICE JAVASCRIPT
Creiamo il precaricamento delle immagini che si devono susseguire e poi costruiamo una funzione che chiuda l’immagine attuale per far comparire quella attribuita alla voce di menu’ cliccata. Completamente personalizzabile e ottimizzabile.
$(function() {
var $ac_background = $('#ac_background'),
$ac_bgimage = $ac_background.find('.ac_bgimage'),
$ac_loading = $ac_background.find('.ac_loading'),
$ac_content = $('#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($(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
$.when(loadImages()).done(function(){
$.when(showBGImage()).done(function(){
//hide the loading status image
$ac_loading.hide();
$.when(slideOutMenu()).done(function(){
$.when(toggleMenuItems('up')).done(function(){
initEventsSubMenu();
});
});
});
});
},
showBGImage = function() {
return $.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 = $(window).width() - $title.outerWidth(true);
return $.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 $.Deferred(
function(dfd) {
/*
slides in / out the items.
different animation time for each one.
*/
$menuItems.each(function(i) {
var $el_title = $(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 = $(this), // the Ecco il nostro menu’ animato in jQuery.
Alla prossima!
Pacman
Nostradamus
Magical Cat Adventure
Snake