1. Accueil
  2. Question et réponse
  3. Slideout page en utilisant javascript?

Slideout page en utilisant javascript?

2010-05-11 7 views

Répondre

2

Voici une solution très simple en utilisant la méthode animate de jQuery pour la viande. (Travail demo et le code ci-dessous.)

HTML

Vous avez besoin de trois éléments de base: un récipient (#slideout), son contenu (#slideout_contents), et un bouton à bascule (#slideout_toggle).

<body> 
<div>Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents.</div> 
<div id="slideout"> 
    <div id="slideout_contents"> 
     <a id="slideout_toggle">Open</a> 
     <h1>Header</h1> 
     <p>Some text.</p> 
     <p>Some text.</p> 
    </div> 
</div> 
</body>​

CSS

Vous devez placer absolument il étreint le bord gauche de l'écran.

body { 
    padding: 0px; 
    margin: 0px; 
} 
#slideout, #slideout_contents, #slideout_toggle { 
    background: #000; /* to see it on a blank page */ 
    color: #fff; 
    position: absolute; 
    top: 0px; 
} 
#slideout_contents { 
    left: -100px; /* adjust these */ 
    width: 100px; 
    height: 300px; 
} 
#slideout_toggle { 
    display: block; 
    text-decoration: none; 
    top: 50%; 
    left: 100px; 
    width: 50px; 
    text-align: center; 
}​

JavaScript (jQuery)

méthode de jQuery animate se charge du reste.

$('#slideout_toggle').toggle(function(){ 
    $(this).html('Close'); 
    $('#slideout_contents').animate({'left': '0px'}); 
},function(){ 
    $(this).html('Open'); 
    $('#slideout_contents').animate({'left': '-100px'}); 
});

Source

2010-05-11 02:32:28 Adam

Questions connexes

 Questions connexes