HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
#ac_background.ac_background
img.ac_bgimage.fadeOut.fadeOut.fadeOut-Delay(style='z-index=1', src='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_hepburn.jpg', alt='Background')
.ac_overlay(style='z-index:2;')
.ac_loading
#ac_content.ac_content
h1
span
i Tours de rôles
| Acteurs et actrices d’un film à l’autre
span(style='letter-spacing:none;color:grey;')
br
.ac_menu
ul
// Introduction
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_hepburn2.jpg') Introduction
.ac_subitem.classic
span.ac_close
h2 Introduction
ul
li
| Il y a matière à s’en étonner : ce n’est que récemment que l’acteur a fait son entrée dans la critique. On pourrait dès lors s’empresser de lui faire une théorie ou une politique, comme l’auteur a depuis longtemps la sienne. Ou bien vouloir à l’inverse que la question reste neuve, commençante. C’est-à-dire envisager l’acteur non comme un sujet ou un thème, mais comme une zone ou un cœur aux contours indécis. On tournerait alors autour, de même qu’acteurs et actrices avancent eux-mêmes à tour de rôles, en sautant de l’un de l’autre, en jetant les masques plutôt qu’en les superposant [...]
p.credit-photo Photo : Audrey Hebpburn © Jack Cardiff
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq1.html', target='_new')
| | Introduction par Emmanuel Burdeau | A l’attention des adhérents : mise en place des programmations • auteurs susceptibles d‘intervenir en salles • mise à disposition des livres |
// De la vie des seconds roles
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_mulholland_drive.jpg') De la vie des seconds rôles
.ac_subitem.classic
span.ac_close
h2
| Série : de la vie des seconds rôles
br
span par Hervé Aubron
br
ul
li
| Entre les premiers rôles et les figurants, il n’y a que des seconds rôles, des rôles seconds, et jamais deuxièmes, troisièmes ou quatrièmes. On est second, et c’est tout. Il y a là une intransitivité mystérieuse, comme une impossibilité à faire dans le détail devant ces existences parallèles ou intermittentes. Il ne rime à rien de classifier leurs tempéraments – mieux vaut les prendre en bloc, tous ensemble, du bouffon de passage à l’homme de main, de la sale gueule à la jolie fille. [...]
p.credit-photo
| Photo :
em Mulholland Drive
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq2.html', target='_new')
|
em Un couple épatant, Cavale, Après la vie
| de Lucas Belvaux
em Mulholland Drive
| de David Lynch
em La Vie aquatique
| de Wes Anderson |
// Jouer avec
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_elephant.jpg', style='background-position:right top !important;') Jouer avec
.ac_subitem.spec1
span.ac_close
h2
| Série : jouer avec
br
span par Cyril Neyrat
br
ul
li
| [...] la logique d’un duo s’éclaire tout autant de son rapport au monde que de la relation de ses membres. Un acteur ne joue pas seulement avec un autre acteur : c’est ce que cette série de textes se propose de montrer. Il compose avec tout ce qui, pour lui, relève du dehors filmique : l’espace, la lumière, les conditions climatiques, mais aussi des choix des cadrage, de durée, de montage, l’état de la technique – tout ce qui fait un style, une forme, c’est-à-dire les conditions de visibilité et d’existence de l‘acteur. [...]
p.credit-photo
| Photo :
em King Kong
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq4.html', target='_new')
|
em Cœurs, On connaît la chanson
| de Alain Resnais
em Elephant, Gerry, Last Days
| de Gus Van Sant
em King Kong
| de Peter Jackson |
// L‘occasion des non acteurs
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_et_la_bas.jpg') L’occasion des non-acteurs
.ac_subitem.classic
span.ac_close
h2
| L’occasion des non-acteurs
br
span par Antoine Thirion
br
ul
li
| Si la démarcation entre acteurs pros et non-professionnels est dans le monde du cinéma objet de crispations fréquentes, c’est qu’elle est à l’écran infiniment trouble. Aucun argument ne saurait en effet trancher assez radicalement. (...) Une différence demeure pourtant, au-delà des résistances corporatistes. C’est que l’acteur d’occasion offre à un cinéaste une chance d’impureté, la possibilité de détendre l’intervalle classique entre acteur et personnage. [...]
p.credit-photo
| Photo :
em Et là-bas, quelle heure est-il ?
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq3.html', target='_new')
|
em L’enfant sauvage
| de François Truffaut
em Et là-bas, quelle heure est-il ?
| de Tsaï Ming-Liang
em Tropical Malady
| de Apichatpong Wheerasethakul
em Un couple parfait
| de Nobihuro Suwa
em Une sale histoire
| de Jean Eustache |
// Auteuil
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_auteuil.jpg') Daniel Auteuil
.ac_subitem(style='rgba(250, 250, 250, 0.4);')
span.ac_close
h2
| Daniel Auteuil
br
span par François Bégaudeau
br
ul
li
| Pas jouer fort, pas parler fort : il faut en venir à l’essentiel, à cette voix douce, murmure entravé en sus d’une diction mal assurée qui lui interdit les morceaux de bravoure façon tirade du nez de Cyrano –lui c’est plutôt Scapin, rusé mais poursuivi. [...]
p.credit-photo
| Photo :
em Daniel Auteuil
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq6.html', target='_new')
|
em Les Voleurs
| de André Téchiné
em L’Adversaire
| de Nicole Garcia
em Caché
| de Michael Haneke |
// Cooper
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_cooper.png') Gary Cooper
.ac_subitem
span.ac_close
h2
| Gary Cooper
br
span par François Bégaudeau
br
ul
li
| Roarke pouvait être joué par tous, mais il valait mieux qu’il soit « grand et sec », dira Miss Francon, comme un building, et bien bâti, et beau comme un dieu. C’est-à-dire qu’il ne pouvait être que Gary Cooper. N’importe qui et seulement lui, recette bizarre de l’adhésion, potion qui mêle la distinction aristocratique et le tout-venant prolétarien.
p.credit-photo
| Photo :
em Le Rebelle
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq5.html', target='_new') | Le Rebelle de King Vidor |
// Dean
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_dean.jpg') James Dean
.ac_subitem.spec2
span.ac_close
h2
| James Dean
br
span par Jean-Michel Frodon
br
ul
li
| Nulle part de manière aussi accomplie que dans
em La Fureur de vivre
| , James Dean incarne l’archétype du frère qui nous ressemble (quel que soit notre âge et notre sexe, nul doute que sa bissexualité l’aura servi), frère rebelle élevé au statut de premier rôle, et fixé à cette place par une mort survenue au moment même de son apparition.
p.credit-photo
| Photo :
em James Dean
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq6.html', target='_new')
|
em A l’est d’Eden
| de Elia Kazan
em La Fureur de vivre
| de Nicholas Ray
em Géant
| de George Stevens |
// Hepburn
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_hepburn_joy.jpg') Audrey Hepburn
.ac_subitem(style='rgba(250, 250, 250, 0.4);')
span.ac_close
h2
| Audrey Hepburn
br
span par Joy Sorman
br
ul
li
| De la femme à la jeune fille, du glamour à la gamine, de la miniature de Saxe à la poupée de chiffon. Femme libérée, poule chez Tiffany’s, fêtarde dans Rome, tête à claque vendant des fleurs à la criée.(...) coïncident toujours, chez Audrey Hepburn, la version rue et la version chic, rentre- dedans et distinguée [...]
p.credit-photo
| Photo :
em Audrey Hebpburn
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq6.html', target='_new')
|
em Vacances romaines
| de William Wyler |
// Kelly
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_kelly.jpg', style='background-position:0% top;') Grace Kelly
.ac_subitem.classic
span.ac_close
h2
| Grace Kelly
br
span par Axel Zeppenfeld
br
ul
li
| Peu importe qu’elle peine à jouer, ou qu’elle s’y refuse. Peu importe que sa pudeur lui interdise de s’exposer à la comédie : une faveur inexplicable l’arrache à la pesanteur qui pourrait l’accabler.
p.credit-photo
| Photo :
em Fenêtre sur cour
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq6.html', target='_new')
|
em La Main au collet, Fenêtre sur cour, Le crime était presque parfait
| de Alfred Hitchcock |
// Lupino
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_lupino.jpg') Ida Lupino
.ac_subitem(style='rgba(250, 250, 250, 0.4);')
span.ac_close
h2
| Ida Lupino
br
span par Charlotte Garson
br
ul
li
| La plupart des entrées d’Ida Lupino sont de savantes i(nte)rruptions, des incrustes bord-cadre. Comme la Petey Brown de
em The Man I Love
| (Raoul Walsh, 1947), voyeuse silencieuse dans l’encoignure de la pièce où son amant joue du piano, Lupino s’est tenue au seuil de plusieurs genres, entre populisme thirties et film noir. [...]
p.credit-photo
| Photo :
em Ida Lupino
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq6.html', target='_new')
|
em Le Grand couteau
| de Robert Aldrich
em Une femme dangereuse
| de Raoul Walsh
em La Cinquième victime
| de Fritz Lang |
// Seyrig
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_seyrig.png') Delphine Seyrig
.ac_subitem.classic
span.ac_close
h2
| Delphine Seyrig
br
span par Emmanuel Burdeau
br
ul
li
| C’est (...) d’abord de la voix de l’actrice qu’on se souvient, enchanteresse, traînante, aristocratique. [...]
p.credit-photo
| Photo :
em L’Année dernière à Marienbad
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq5.html', target='_new')
|
em L’Année dernière à Marienbad, Muriel, ou le temps d’un retour
| de Alain Resnais
em Le Charme discret de la bourgeoisie
| de Luis Buñuel |
// Thurman
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_thurman.jpg', style='background-position:0% top;') Uma Thurman
.ac_subitem(style='left:19%;background-color:rgba(0, 0, 0, 0.3);')
span.ac_close
h2
| Uma Thurman
br
span par Cyril Béghin
br
ul
li
| Elle existerait donc peut-être à cette croisée entre les angles du corps et les incidences des fantômes de cinéma. Résultat ? Une retenue ou une réserve, le sentiment répété que la comédienne ne se livre jamais ni à la réalité ni à l’image, et trouve l’intelligence de faire de ce retrait tout son sujet.
p.credit-photo
| Photo :
em Les liaisons dangereuses
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq5.html', target='_new')
|
em Les Liaisons dangereuses
| de Stephen Frears |
// Volonte
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/images/tdr_volonte.jpg') Gian Maria Volontè
.ac_subitem.classic(style="top:60%;")
span.ac_close
h2
| Gian Maria Volontè
br
span par Eugenio Renzi
br
ul
li
| Pendant les années 70, GMV s’engage dans (...) cette tendance que la critique a appelé la « fiction de gauche » (....) le trait commun est une mise en scène minimale et une thèse politique très affirmée, l’une et l’autre unies à l’ambition de lever le voile sur une vérité générale via la mise à nu d’une vérité particulière [...] GMV y fait preuve d’un tout autre atout : la capacité de devenir la copie parfaite du personnage, d’en imiter chaque geste, chaque mouvement, à la perfection.
p.credit-photo
| Photo :
em Lucky Luciano
| © DR
li
a(href='https://www.lacor.info/editions_de_lacor/communiques/pages/tours_de_roles_cmq5.html', target='_new') | Lucky Luciano, de Francesco Rosi |
// fin menu
// pied de page
p.ac_footer
a(href='https://www.lacor.info/editions_de_lacor/communiques/menu/telechargement_tdr_communique.html', target='_new') Téléchargement
a(href='https://www.lacor.info/', target="_new") ACOR
a(href='https://www.lacor.info/cinemas-ouest/index.php/livres/livres-edites-par-l-acor',target="_new") Ed. ACOR (papier)
a(href='https://www.lacor.info/editions_de_lacor/tours_de_roles.html', target='_new') Tours de rôles © 2007
a(href='https://www.lacor.info/editions_de_lacor/tours_de_roles.html', target='_new') ‹—
$mq--mobile = 320px
$mq--tablet = 600px
$mq--desktop = 1280px
// breakpoints (not used here for the moment) (eg @media break-S)
break-S = "screen and (max-width $mq--mobile)"
break-M = "screen and (min-width $mq--tablet)"
break-L = "screen and (min-width $mq--desktop)"
// font-size
font($scale-min, $scale-max)
font-size $scale-min
@media screen and (min-width $mq--mobile)
font-size "calc(%s + %s * ((100vw - %s) / %s))" % ($scale-min unit($scale-max - $scale-min, '') $mq--mobile unit($mq--desktop - $mq--mobile, ''))
@media screen and (min-width $mq--desktop)
font-size $scale-max
body
background #000
color #fff
font-family 'PT Sans Narrow', Arial, sans-serif
text-transform none
font(11px,20px)
a
color #fff
text-decoration none
i
font-style italic
h2
border-bottom 1px dotted #555
text-align center
span
font-size 0.8em
padding-bottom 1em
img
&.ac_bgimage
position fixed
background-position 50% top
opacity 0.8
display none
background-size cover
.ac_overlay
width 100%
height 100%
position fixed
top 0px
left 0px
background transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/pattern.png) repeat top left
.ac_loading
position fixed
top 10px
right 10px
background #000 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/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 auto
width 100%
top 56%
left 0
margin-top -65px
z-index 3
h1
background transparent
display block
float left
letter-spacing 3px
width 200px
height 50px
padding 20px
font-size 1.2em
font-weight normal
margin-right 1px
span
letter-spacing none
display block
font-weight normal
font-size 1.5em
.ac_menu
background transparent
float left
position relative
height 45px
width 0px
& > ul
float right
& > li
float left
position relative
height 45px
overflow hidden
a
margin-top 60px
opacity 0
display block
height 45px
padding 0px 10px
text-align justify
outline none
font-size 1em
font-weight normal
text-shadow 1px 1px 1px #000
.ac_subitem
width 45vw
left 50vw
height 0
margin-top 0
position fixed
z-index 99
overflow hidden
background rgba(250, 250, 250, 0.10)
h2
font-size 1.3em
font-weight normal
color #fff
padding 40px 0px 0px 40px
text-shadow 0px 0px 2px #000
ul
padding 0px 40px
li
margin 0px 0px
display block
a
color #fff
opacity 1
float left
font-size 0.9em
height 18px
margin-top 3px
&:hover
color #CB4618
.ac_subitem ul li:first-child,
.ac_subitem ul li:last-child
font-size 1em
text-transform none
text-align justify
border-bottom 1px dotted #555
padding 15px 0
margin-bottom 15px
.iframe-wrapper
width 95% !important
margin 60% auto auto !important
iframe
height 300px !important
.nav-bullet2
margin-top 7%
right 44%
.annonce-usager
font-size 0.9em
.credit-photo
font-size 0.8em
padding-top 1em
text-align right
color #999
text-shadow 1px 0 0 #fff
span
&.ac_close
float right
margin 10px 10px
width 12px
height 12px
cursor pointer
background transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/close.png) no-repeat top right
opacity 0.5
&:hover
opacity 1.0
.ac_footer
position fixed
bottom 0
left 0
width 100%
font-size 0.8em
background #000
opacity 0.9
height 20px
padding-bottom 3px
z-index 4
a
padding 5px 10px
letter-spacing 1px
text-shadow 1px 1px 1px #000
color #ddd
float right
span
font-weight bold
&.ac_left
float left
.footer
a
&:hover
color #fff
@media all and (max-width : 600px) and (orientation:portrait)
body
.ac_content
position fixed
width 100%
top 50px
left 0
margin-top -65px
h1
width 100%
padding-bottom 0
span
display inline
padding-right 3em
.ac_menu
margin-left 0
z-index 98
margin-top 100px
ul
display block
width 100%
li
margin-left 20px
position relative
width 30%
height 57px
overflow hidden
a
margin-top 0
opacity 0
text-align center
width 50%
padding 1px
font-weight normal
text-shadow 1px 1px 1px #000
.ac_subitem
width 100%
top 45%
left 0
h2
font-weight normal
color #fff
padding 40px 0px 0px 40px
text-shadow 0px 0px 2px #000
ul
padding 0px 10px
li
width 80%
height 35vh
a
display block
color #fff
width 80%
opacity 1
float left
@media all and (min-width : 800px) and (orientation:portrait)
.ac_content
position fixed
height 30vh
width 100%
top 50px
left 0
margin-top -65px
h1
width 100%
padding-bottom 0
span
display inline
padding-right 3em
padding-bottom 1em
.ac_menu
margin-left 0
z-index 98
margin-top 20%
& > ul
& > li
display block
position relative
height 30px
overflow hidden
width 600px
a
margin-top 0
opacity 0
text-align right
width 100%
padding 1px
font-weight normal
text-shadow 1px 1px 1px #000
.ac_subitem
width 60vw
height 0
top 40%
left 20%
h2
font-weight normal
color #fff
padding 10px 20px
text-shadow 0px 0px 2px #000
ul
padding 0 20px
li
margin 5px 0px
a
display block
color #fff
opacity 1
float left
.credit-photo
color #333
@media all and (min-width: 1160px)
.ac_subitem
width 40vw
top 40%
left 50vw
.ac_content
position fixed
height 40vh
width 100%
top 30%
left 0px
margin-top -120px
h1
padding-bottom 2em
.ac_menu
margin-left 5em
margin-top 20vh
$(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'
}, 600, 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 <li>
$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) {
$.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 : '600px',
marginTop : '-200px'
}, 600, 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 = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
$itemImage.insertBefore($ac_bgimage);
adjustImageSize($itemImage);
$ac_bgimage.fadeOut(1500, function() {
$(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 */
$(window).bind('resize.Menu' , function(e) {
adjustImageSize($ac_bgimage);
/* calculate new width for the menu */
var new_w = $(window).width() - $title.outerWidth(true);
$menu.css('width', new_w + 'px');
});
},
/* makes an image "fullscreen" and centered */
adjustImageSize = function($img) {
var w_w = $(window).width(),
w_h = $(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 $.Deferred(
function(dfd) {
var total_images = $ItemImages.length,
loaded = 0;
for(var i = 0; i < total_images; ++i){
$('<img/>').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();
});
Also see: Tab Triggers