jQuery Girl
  1. jQuery Girl
  3. jQuery barre latérale coulissante de droite à gauche avec redimensionnement du contenu
Intereting Posts
Liste et webmethod Userscript – Existe-t-il un moyen d’injecter du code jQuery dans angularjs dom? Paint App, JQuery Mobile – L’object n’a pas de méthode jQuery UI La saisie semi-automatique autoFocus ne fonctionne pas JQuery jqGrid prend-il en charge la barre de défilement horizontale et les colonnes gelées? Comment définir des waypoints dans l’url de googlemaps Comment puis-je obtenir les valeurs des balises span SignalR- Jquery: $ .connection.chathub renvoie undefined obtenir une variable php spécifique d’une boucle dans un paramètre de fonction jquery Soustraire un entier en utilisant jquery Compte à rebours Javascript, fuseau horaire et heure avancée Les données dynamics disparaissent lors de l’ajout HTML – Comment obtenir des décalages de sélection associés à des balises HTML Utiliser Ajax pour demander des données de contrôleur de rails Problèmes liés à la lecture du code HTTP d’état / d’erreur à partir de jQuery AJAX

jQuery barre latérale coulissante de droite à gauche avec redimensionnement du contenu

J’essaie de créer une barre latérale d’apparence similaire à l’image suivante.

http://soffr.miximages.com/jquery/AkFeEoh.png

Comme vous pouvez le voir sur l’image, je souhaite une barre latérale ouverte par défaut. Si l’utilisateur la ferme, un cookie sera enregistré, que la barre latérale soit ouverte ou non. La barre latérale ouverte ou fermée aurait également une incidence sur la taille du contenu de la page, ce que j’ai essayé de montrer avec% dans la maquette que j’ai faite.

Je cherchais quelque chose de similaire, mais le plus proche que je puisse trouver est le jsfiddle suivant, conçu pour un autre utilisateur qui voulait quelque chose de similaire … mais pas tout à fait pareil.

jsfiddle.net/7ZBQa

Quelqu’un peut-il m’aider s’il vous plaît avec cela, toute aide serait très appréciée =)

résultat requirejs avec un design réactif

HTML 

 
Content
   
 

CSS 

 #content,#sidebar { line-height: 300px; text-align: center; border: 1px solid; } #sidebar { background-color: #DEF; border-color: #BCD; display: none; } #content { background-color: #EFE; border-color: #CDC; width: 97%; } .use-sidebar #content {width: 64%;} .use-sidebar #sidebar { display: block; width: 32%; } .sidebar-at-left #sidebar {margin-right: 1%;} .sidebar-at-right #sidebar {margin-left: 1%;} .sidebar-at-left #content, .use-sidebar.sidebar-at-right #sidebar, .sidebar-at-right #separator {float: right;} .sidebar-at-right #content, .use-sidebar.sidebar-at-left #sidebar, .sidebar-at-left #separator {float: left;} #separator { background-color: #000; border: 1px solid #CCC; display: block; outline: none; width: 1%; margin-top: 145px; } .use-sidebar #separator { background: #000; border-color: #FFF; width:1%; } #separator:hover { border-color: #ABC; background: #DEF; }

jQuery

DEMO