Menu "décalant" le site

Bonjour,

Je dois réaliser la version mobile d'un site web et l'un des choix est que le clic sur un pictogramme de menu décale le site sur un un côté pour faire apparaitre un menu et ne laisser apparaitre plus qu'un bout de la page principale...je vous avoue que je ne sais pas vraiment comment réaliser ceci...

Savez vous si une bibli comme jQueryMobile le permet ou auriez-vous d'autres pistes svp ?

Bonjour et bienvenue sur le forum Yks,

Ici, pas de solution toute faite, c'est à toi de mettre les mains dans le cambouis

Pour résumer, ce n'est pas forcément très compliqué. Si tu regarde bien et que tu réfléchis à ce que tu vois, la plupart des sites utilisant cet effet (comme par exemple cette démonstration) positionnent l'ensemble de la page dans un wrapper positionné de façon relative. Lors du clic sur le bouton menu, le panel menu auparavant caché se déplace en même temps que le wrapper contenant l'ensemble de la page, ce qui donne l'effet de le repousser vers la droite. Cet effet de déplacement pour être obtenu facilement avec Javascript, et encore plus facilement avec jQuery.
Ici un exemple à réadapter basé sur la lib jQuery :

$('#nav-open-btn').on('click', function() {
    $('.wrapper').animate({ left: '70%' }, 500);
});

$('#nav-close-btn').on('click', function() {
    $('.wrapper').animate({ left: '0' }, 500);
});

Voilà, tu as normalement tout pour refaire de même de ton côté. Si tu as un souci, tu peux revenir poster ton code ou mieux, un jsFiddle pour que nous puissions directement voir ce qui ne vas pas.
Bonne continuation
Modifié par audrasjb (03 Dec 2014 - 09:14)