Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                #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') ‹—

              
            
!

CSS

              
                $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

              
            
!

JS

              
                $(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();
});
              
            
!
999px

Console