Pro CSS3 Animation

Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS

h1 { font-size: 24px; }
.meny { background: #333; color: #eee; }
.meny ul { margin-top: 10px; }
.meny ul li { list-style: none; font-size: 20px; padding: 3px 10px; }
.meny ul li:before { content: '-'; margin-right: 5px;
color: rgba( 255, 255, 255, 0.2 ); }
.meny-contents>article { max-width: 400px; }
.meny-contents p { margin: 10px 0 10px 0; font-size: 16px; line-height: 1.32; }

Finally, the JavaScript,that covers hover, touch, and slide events is shown in Listing 9-22.

Listing 9-22. JavaScript for Side-Pull Navigation

(function(){
var meny = document.querySelector( '.meny' );
if (!meny || !meny.parentNode ) { return; }
var menyWrapper = meny.parentNode;
menyWrapper.className += ' meny-wrapper';
var indentX = menyWrapper.offsetLeft,
activateX = 40,
deactivateX = meny.offsetWidth || 300,
touchStartX = null,
touchMoveX = null,
isActive = false,
isMouseDown = false;
document.addEventListener( 'mousedown', onMouseDown, false );
document.addEventListener( 'mouseup', onMouseUp, false );
document.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'touchstart', onTouchStart, false );
document.addEventListener( 'touchend', onTouchEnd, false );
window.addEventListener( 'hashchange', onHashChange, false );
onHashChange();
document.documentElement.className += ' meny-ready';
function onMouseDown( event ) { isMouseDown = true; }
function onMouseMove( event ) {
if( !isMouseDown ) { var x = event.clientX - indentX;
if (deactivateX ) { deactivate(); }else if( x < activateX ) {activate(); } }
}
function onMouseUp( event ) { isMouseDown = false; }
function onTouchStart( event ) { touchStartX = event.touches[0].clientX - indentX;
touchMoveX = null;
if (isActive || touchStartX < activateX ) {
document.addEventListener( 'touchmove', onTouchMove, false ); }
}
function onTouchMove( event ) {
touchMoveX = event.touches[0].clientX - indentX;
if ( isActive && touchMoveX < touchStartX - activateX ) {
deactivate(); event.preventDefault();
}else if ( touchStartX < activateX && touchMoveX > touchStartX + activateX ) {
activate();
event.preventDefault(); } }
function onTouchEnd( event ) {