J'en ai 2 <div>
s avec les identifiants A
et B
. div A
a une largeur fixe, qui est considérée comme une barre latérale.
La disposition ressemble au diagramme ci-dessous;
Le style est comme ci-dessous;
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
}
J'ai <a id="toggle">toggle</a>
qui agit comme un bouton à bascule. Lors du clic sur le bouton bascule, la barre latérale peut se cacher à gauche et div B
devrait s'étirer pour remplir l'espace vide. Au deuxième clic, la barre latérale peut réapparaître à la position précédente et div B
devrait se réduire à la largeur précédente.
Comment puis-je faire cela en utilisant jQuery?
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Vous pouvez également voir n'importe quelle version animée sur http://jsfiddle.net/hThGb/2/
Voir ce violon pour un aperçu et consultez la documentation des méthodes jquerys toggle et animate .
$('#toggle').toggle(function(){
$('#A').animate({width:0});
$('#B').animate({left:0});
},function(){
$('#A').animate({width:200});
$('#B').animate({left:200});
});
Fondamentalement, vous animez les propriétés qui définissent la disposition.
Une version plus avancée:
$('#toggle').toggle(function(){
$('#A').stop(true).animate({width:0});
$('#B').stop(true).animate({left:0});
},function(){
$('#A').stop(true).animate({width:200});
$('#B').stop(true).animate({left:200});
})
Cela arrête l'animation précédente, efface la file d'attente d'animation et commence la nouvelle animation.
Vous pouvez visiter w3school pour la solution sur ce lien est ici et il y a un autre exemple également disponible qui pourrait sûrement aider, Jetez un oeil
Utiliser Javascript
var side = document.querySelector("#side");
var main = document.querySelector("#main");
var togg = document.querySelector("#toogle");
var width = window.innerWidth;
window.document.addEventListener("click", function() {
if (side.clientWidth == 0) {
// alert(side.clientWidth);
side.style.width = "200px";
main.style.marginLeft = "200px";
main.style.width = (width - 200) + "px";
togg.innerHTML = "Min";
} else {
// alert(side.clientWidth);
side.style.width = "0";
main.style.marginLeft = "0";
main.style.width = width + "px";
togg.innerHTML = "Max";
}
}, false);
button {
width: 100px;
position: relative;
display: block;
}
div {
position: absolute;
left: 0;
border: 3px solid #73AD21;
display: inline-block;
transition: 0.5s;
}
#side {
left: 0;
width: 0px;
background-color: red;
}
#main {
width: 100%;
background-color: white;
}
<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>
Les éléments suivants fonctionneront avec les nouvelles versions de jQuery.
$(window).on('load', function(){
var toggle = false;
$('button').click(function() {
toggle = !toggle;
if(toggle){
$('#B').animate({left: 0});
}
else{
$('#B').animate({left: 200});
}
});
});
$('#toggle').click(function() {
$('#B').toggleClass('extended-panel');
$('#A').toggle(/** specify a time here for an animation */);
});
et dans le CSS:
.extended-panel {
left: 0px !important;
}
$(document).ready(function () {
$(".trigger").click(function () {
$("#sidebar").toggle("fast");
$("#sidebar").toggleClass("active");
return false;
});
});
<div>
<a class="trigger" href="#">
<img id="icon-menu" alt='menu' height='50' src="Images/Push Pin.png" width='50' />
</a>
</div>
<div id="sidebar">
</div>
Au lieu de cela, #sidebar donne l'id de ur div.