web-dev-qa-db-fra.com

Comment faire un menu coulissant semblable au menu latéral de Facebook Mobile avec html, css, jquery?

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.

jqueryhtmlcss
19
Jean Hules

C'est assez simple avec jQuery. Ce sont les étapes à suivre. 

  1. Fixer le popout sur un côté de l'écran en utilisant un positionnement fixe
  2. Ajouter une zone cliquable avec laquelle l’utilisateur déclenche l’effet de glisser dans/hors
  3. Créez une animation jQuery pour faire glisser le contenu sur/hors des marges négatives
  4. Dans le rappel d'animation, modifiez le mode d'affichage du déclencheur (afficher/masquer). 

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.

http://jsfiddle.net/tzDjA/

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;   
}

Réponse originale (ne fonctionne pas à partir de jQuery 1.9)

http://jsfiddle.net/WMGXr/1/

$('#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; }
25
mrtsherman

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/

15
CodeFuze

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

4
Osi

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)

1
sfletche

Je dirais de regarder ces liens: http://css-tricks.com/off-canvas-menu-with-css-target/ Ou http://codepen.io/ jasonhowmans/pen/dykhL

0
malikov