这是大体上的原理，当然案例比这个多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title><style> body{ overflow:hidden;} nav.menu { position: fixed; z-index: 20; background-color: #67b5d1; overflow: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }nav.menu ul { list-style-type: none; margin: 0; padding: 0; } nav.menu a { font-weight: 300; color: #fff; }nav.slide-menu-left, nav.slide-menu-right, nav.push-menu-left, nav.push-menu-right { top: 0; width: 300px; height: 100%; }nav.slide-menu-left, nav.push-menu-left { left: -300px }body.sml-open nav.slide-menu-left, body.pml-open nav.push-menu-left { left: 0 }.mask { position: fixed; top: 0; left: 0; z-index: 15; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); } </style> </head> <body><nav class="menu slide-menu-left"> <ul> <li><button class="close-menu">← 关闭</button></li> <li><a href="#">Broccoli</a></li> <li><a href="#">Tomato</a></li> <li><a href="#">Cucumber</a></li> <li><a href="#">Kale</a></li> <li><a href="#">Celery</a></li> </ul> </nav><!-- /slide menu left --><div id="wrapper"> <div class="info-bar"> <div class="container"> <a href="http://www.callmenick.com/?p=458" class="icon fa fa-home" data-title="Back To Tutorial"></a> <a href="http://callmenick.com/tutorial-demos/image-caption-reveal-on-hover/" class="icon fa fa-arrow-left" data-title="Pevious Demo"></a> <!-- <a href="" class="icon fa fa-arrow-right" data-title="Next Demo"></a> --> <a href="http://callmenick.com/tutorial-demos/slide-push-menus/slide-push-menus.zip" class="icon fa fa-download" data-title="Download Source"></a> <a href="http://www.callmenick.com/tutorials" class="icon fa fa-folder-open" data-title="Tutorial Archives"></a> </div> </div><!-- /.info-bar --> <header> <div class="branding"> <div class="container clearfix"> <div class="logo"> <a href="http://www.callmenick.com"> <img src="img/logo.png" alt="Call Me Nick - Tutorials, Resources, & Articles for Web Design & Web Development" /> </a> </div> <div class="social"> <a href="https://www.facebook.com/callmenick1" target="_blank" class="fb">facebook</a> <a href="https://twitter.com/nicksalloum_" target="_blank" class="twitter">twitter</a> <a href="https://plus.google.com/115555859876227750152/" target="_blank" class="googleplus">google plus</a> <a href="http://feeds.feedburner.com/callmenick_" target="_blank" class="rss">rss</a> <a href="http://www.callmenick.com/subscribe/" class="email">email</a> </div> </div> </div><!-- /.branding --> <div class="site-title"> <div class="container"> <h1>CSS3过渡效果实现的各种动画效果菜单</h1> </div> </div> </header> <div id="main"> <div class="container"> <div class="buttons"> <button class="nav-toggler toggle-slide-left">左边滑入菜单</button> <button class="nav-toggler toggle-slide-right">右边滑入菜单</button> <button class="nav-toggler toggle-slide-top">上边滑入菜单</button> <button class="nav-toggler toggle-slide-bottom">下边滑入菜单</button><br> <button class="nav-toggler toggle-push-left">左边推拉式菜单</button> <button class="nav-toggler toggle-push-right">右边推拉式菜单</button> <button class="nav-toggler toggle-push-top">上边推拉式菜单</button> <button class="nav-toggler toggle-push-bottom">下边推拉式菜单</button> </div><!-- /buttons --> <section class="content"> <h1>Vegetables</h1> <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p> <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p> <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p> </section> </div> </div><!-- #main --> <footer> <div class="container"> <div class="clearfix"> <aside> <ul> <li><a href="http://www.callmenick.com/">Welcome</a></li> <li><a href="http://www.callmenick.com/category/tutorials">Tutorials</a></li> <li><a href="http://www.callmenick.com/category/snippets">Snippets</a></li> <li><a href="http://www.callmenick.com/category/articles">Articles</a></li> <li><a href="http://www.callmenick.com/category/resources">Resources</a></li> </ul> </aside> <aside> <ul> <li><a href="http://www.callmenick.com/about">About</a></li> <li><a href="http://www.callmenick.com/contact">Contact</a></li> <li><a href="http://www.callmenick.com/subscribe">Subscribe</a></li> </ul> </aside> <aside class="logo"> <a href="http://www.callmenick.com/"> <img src="img/logo.png" alt="Tutorials, Snippets, Resources, and Articles for Web Design and Web Development"> </a> </aside> </div> <div class="copyright"> <span> © 2014, Nick Salloum<br> <a href="http://callmenick.com" target="_blank">callmenick.com</a> </span> </div> </div> </footer><!-- /footer --> </div><script> ( function (window) { var mask = document.createElement("div");mask.className = "mask"; var cq=document.querySelector(".toggle-slide-left"); cq.addEventListener("click",function(){ document.body.className="sml-open";document.body.appendChild(mask);}) var cd=document.querySelector(".close-menu"); cd.addEventListener("click",function(){ document.body.className=""; document.body.removeChild(mask);}) mask.addEventListener( "click", function(){ document.body.className="";document.body.removeChild(mask); })} )( window ); </script> </body> </html>