jQuery animer une diapositive horizontale sur la page

Salut à tous, un autre intéressant,

Je construis un menu qui glisse sur toute la largeur de la page (largeur: 100%;) et qui nécessite de l’aide. Un bouton fléché flottant à droite de la page déclenche le glissement d’une barre de menu lorsque vous cliquez dessus. Je voudrais que le bouton fléché glisse devant lui et qu’une fois pour toutes, changez l’image de la flèche en son fichier opposé.

Le gros problème est que la largeur et la hauteur de celles-ci doivent être flexibles pour permettre un contenu variable. J’ai une faible tentative pour que cela fonctionne, mais je sais que beaucoup de facteurs me manquent. Mon code ne touche même pas le déplacement du bouton fléché avec le rest … et ce n’est pas faute d’effort!

De l’aide? Je vous remercie!

HTML:

slide out menu

this is the content

CSS:

 #main { width:100%; height:306px; top:50%; margin-top:-153px; position:absolute; } #sortinggger { width:30px; height:100%; float:right; background-color:#000; position:relative; z-index:3; } .arrow_small { position:absolute; left:50%; top:50%; margin-left:-6px; margin-top:-12px; } #overlay { width:100%; height:100%; position:absolute; } #content { width:100%; height:100%; position:absolute; z-index:2; 

Javascript:

 $(document).ready(function(){ //hide functions $('#slider').css('display', 'none'); //menu slide out $('#sortinggger').click(function (){ var bar = $('#slider'); bar.show(function(){ this.animate({'marginRight':'100%'},1000); }); }); }); 

Est-ce ce que vous cherchez? Essayez ceci dans votre navigateur:

HTML:

 
 

Image would go here

content...

CSS:

  * { margin: 0; padding: 0; } #slider { width: 6%; height: 350px; top: 33%; background-color: black; position: absolute; right: 0; } .arrow_small { position:absolute; left:50%; top:50%; margin-left:-6px; margin-top:-12px; } #image { width: 75px; background-color: black; position:relative; color: white; float: left; } #content { position: relative; overflow: hidden; left: 100px; color: white; } 

js:

  $(function() { $('#image').toggle(function (){ $("#slider").animate({"width":"100%"}, 1000); }, function() { $("#slider").animate({"width":"6%"}, 1000); }); }); 

J’ai supprimé l’image que vous aviez dans votre seul parce que je ne l’avais pas et je voulais la tester localement avec du texte. J’espère que cela t’aides!