Puede usar transiciones CSS3 o quizás animaciones CSS3 para deslizar un elemento.

Para soporte de navegador: http://caniuse.com/

Hice dos ejemplos rápidos para mostrarte cómo me refiero.

Transición de CSS (al pasar el mouse)

Demo One

Código relevante

 .wrapper:hover #slide { transition: 1s; left: 0; } 

En este caso, estoy left: -100px; la transición de la posición desde la left: -100px; a 0; con un 1s. duración. También es posible mover el elemento usando transform: translate();

Animación CSS

Demo dos

 #slide { position: absolute; left: -100px; width: 100px; height: 100px; background: blue; -webkit-animation: slide 0.5s forwards; -webkit-animation-delay: 2s; animation: slide 0.5s forwards; animation-delay: 2s; } @-webkit-keyframes slide { 100% { left: 0; } } @keyframes slide { 100% { left: 0; } } 

El mismo principio que el anterior (Demo uno), pero la animación se inicia automáticamente después de 2s, y en este caso he configurado animation-fill-mode para forwards , que persistirá en el estado final, manteniendo el div visible cuando termine la animación.

Como dije, dos ejemplos rápidos para mostrar cómo se podría hacer.

EDITAR: para obtener más información sobre las animaciones y transiciones CSS, consulte:

Animaciones

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Transiciones

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Espero que esto haya ayudado.

Utilice la transform 2D de CSS3 para evitar problemas de rendimiento (móvil)

Una trampa común es animar las propiedades left / top / right / bottom en lugar de usar css-transform para lograr el mismo efecto. Por una variedad de razones, la semántica de las transformaciones las hace más fáciles de descargar, pero las funciones left / top / right / bottom son mucho más difíciles.

Fuente: Mozilla Developer Network (MDN)

Manifestación:

 var $slider = document.getElementById('slider'); var $toggle = document.getElementById('toggle'); $toggle.addEventListener('click', function() { var isOpen = $slider.classList.contains('slide-in'); $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in'); }); 

 #slider { position: absolute; width: 100px; height: 100px; background: blue; transform: translateX(-100%); -webkit-transform: translateX(-100%); } .slide-in { animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; } .slide-out { animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards; } @keyframes slide-in { 100% { transform: translateX(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateX(0%); } } @keyframes slide-out { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); } } 

 
 
 
Lorem
 
Ipsum
 
Dolor
 
 
 Toggle 

Aquí hay otra solución que usa la transformación css (para fines de rendimiento en dispositivos móviles, vea la respuesta de @ mate64) sin tener que usar animaciones y fotogtwigs clave.

Creé dos versiones para deslizar desde cualquier lado.

 $('#toggle').click(function() { $('.slide-in').toggleClass('show'); }); 

 .slide-in { z-index: 10; /* to position it in front of the other content */ position: absolute; overflow: hidden; /* to prevent scrollbar appearing */ } .slide-in.from-left { left: 0; } .slide-in.from-right { right: 0; } .slide-in-content { padding: 5px 20px; background: #eee; transition: all .5s ease; /* our nice transition */ } .slide-in.from-left .slide-in-content { transform: translateX(-100%); -webkit-transform: translateX(-100%); } .slide-in.from-right .slide-in-content { transform: translateX(100%); -webkit-transform: translateX(100%); } .slide-in.show .slide-in-content { transform: translateX(0); -webkit-transform: translateX(0); } 

  
 
 
 
Lorem
 
Ipsum
 
Dolor
 
 
 
 
 
 
 
One
 
Two
 
Three
 
 
 
 Toggle 

UTILIZAR ESTO PARA DERECHO A DESLIZAMIENTO IZQUIERDO:

HTML:

  
 
 
HOME
 
ABOUT
 
SERVICES
 
CONTACT
 
  

CSS:

 /*nav*/ .nav{ position: fixed; right:0; top: 70px; width: 250px; height: calc(100vh - 70px); background-color: #333; transform: translateX(100%); transition: transform 0.3s ease-in-out; } .nav-view{ transform: translateX(0); } .nav ul{ margin: 0; padding: 0; } .nav ul li{ margin: 0; padding: 0; list-style-type: none; } .nav ul li a{ color: #fff; display: block; padding: 10px; border-bottom: solid 1px rgba(255,255,255,0.4); text-decoration: none; } 

JS:

  $(document).ready(function(){ $('a#click-a').click(function(){ $('.nav').toggleClass('nav-view'); }); }); 

ARCHIVO DE TUTORIAL Y FUENTE: [VER ESTE VÍDEO] [1]

DEMO: http://www.themeswild.com/read/slide-navigation-left-to-right