Je crée un site Web et ai une liste verticale de boutons sur le côté gauche du site. Je veux les cacher sur le côté, donc seulement un onglet. Lorsque le menu est masqué, je veux que l'onglet dise quelque chose comme More, puis lorsque le menu est visible, je veux que l'onglet indique masquer.
Donc, j'ai quelques questions ... Comment puis-je faire le menu, qui est essentiellement juste une div, glisse de l'extérieur de l'écran sur clic, tout en ayant le texte sur l'onglet changer et le changement de destination a href la fonction de glissement est terminée, l’onglet dira masquer, et en cliquant dessus, il renverra la div de l’écran.
Si vous avez l'application facebook sur votre téléphone, je souhaite essentiellement la reproduire sur mon site Web.
C'est assez simple avec jQuery. Ce sont les étapes à suivre.
Important - toggle event est obsolète dans jQuery 1.8 et supprimé dans 1.9. Ma réponse originale ne fonctionnera plus. Cette nouvelle version fonctionnera dans les versions plus anciennes et plus récentes de jQuery. Cette méthode utilise un gestionnaire de clics et une classe appelée hidden
pour déterminer si la fenêtre contextuelle doit être animée à l'écran ou non.
jQuery
//when the trigger is clicked we check to see if the popout is currently hidden
//based on the hidden we choose the correct animation
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
left: 0
}, 'slow', function () {
$('#trigger span').html('Close'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
left: -40
}, 'slow', function () {
$('#trigger span').html('Show'); //change the trigger text at end of animation
});
}
CSS
/* minimal CSS */
#popout {
position: fixed; /* fix the popout to the left side of the screen */
top: 50px;
left: -40px; /* use a negative margin to pull the icon area of the popout off the Edge of the page */
width: 75px;
border: 1px dotted gray;
color: gray;
}
#trigger { /* create a clickable area that triggers the slide in/out effect */
position: absolute; /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */
top: 0;
bottom: 0;
right: 0;
cursor: pointer;
}
$('#toggle').toggle(
function() {
$('#popout').animate({ left: 0 }, 'slow', function() {
$('#toggle').html('Close');
});
},
function() {
$('#popout').animate({ left: -40 }, 'slow', function() {
$('#toggle').html('Show');
});
}
);
<div id="popout">
<div id="toggle">Show</div>
<br style="clear: both" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
#popout { position: fixed; height: 100px; width: 75px; border: 1px dotted gray; background: darkblue; color: white; top:50px; left: -40px; }
#toggle { float: right; }
Jquery .toggle et .animate fonctionneront comme indiqué par mrtsherman. Je suggérerais d'utiliser z-index et de peaufiner un peu plus le fichier css. Commander ceci pour un exemple - http://jsfiddle.net/codefuze/HYjEB/1/
Pourquoi ne pas simplement utiliser CSS3 Transitions
à la place?
C'est assez simple et, entre-temps, entièrement supporté par Internet Explorer (10).
Voici un bon tutoriel: Utilisation des transitions CSS
Et un bel exemple de ce type de menu: Menu Slide and Push
Si vous cherchez une solution plus prédéfinie, Bootstrap propose également un menu de diapositives sympa.
Voir l'exemple 'offcanvas' suivant: http://getbootstrap.com/examples/offcanvas/ (Vous devrez réduire votre écran à la taille d'un mobile pour pouvoir voir le 'Basculer la navigation' en action)
Je dirais de regarder ces liens: http://css-tricks.com/off-canvas-menu-with-css-target/ Ou http://codepen.io/ jasonhowmans/pen/dykhL