\n </a>\n </div>\n <div class="card-wrapper">\n <a href="#">\n <div class="card bg-03">\n <span class="card-content">menu item #3</span>\n </div>\n </a>\n </div>\n <div class="card-wrapper">\n <a href="#">\n <div class="card bg-04">\n <span class="card-content">item #4</span>\n </div>\n </a>\n </div>\n <div class="card-wrapper">\n <a href="#">\n <div class="card bg-05">\n <span class="card-content">menu item #5</span>\n </div>\n </a>\n </div>\n <div class="card-wrapper">\n <a href="#">\n <div class="card bg-06">\n <span class="card-content">long menu item #1</span>\n </div>\n </a>\n </div>\n</div>”,”css”:”a:link,\na:hover,\na:visited,\na:active {\n color: #fff;\n text-decoration: none;\n}\n\nbody {\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n \n background: #fff;\n}\n\n.card-holder { \n position: fixed;\n width: 0px;\n overflow: visible;\n}\n\n.card-wrapper {\n display: inline-block;\n float: right;\n clear: both;\n}\n\n.card {\n position: relative;\n left: 32px;\n padding: 16px 32px 16px 64px;\n margin: 8px; \n x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);\n box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);\n background: #fff;\n transition: all 0.3s ease-in-out 0.1s;\n}\n\n.card:hover {\n position: relative;\n left: 100%;\n margin-left: -32px;\n box-shadow: \n 0 -8px 8px -8px rgba(0, 0, 0, 0.5),\n 0 8px 8px -8px rgba(0, 0, 0, 0.5);\n transition: all 0.3s ease-in-out;\n}\n\n.card-content {\n display: inline-block;\n color: #fff;\n font-family: ‘Droid Sans’, sans-serif;\n font-size: 16px;\n font-weight: bold;\n white-space: nowrap;\n}\n\n.bg-01 { background: #539770; }\n.bg-02 { background: #4B7D74; }\n.bg-03 { background: #8DC2BC; }\n.bg-04 { background: #EDD6B4; }\n.bg-05 { background: #BE7467; }\n.bg-06 { background: #E2AE63; }”,”js”:””},”options”:{“activeKey”:”player”,”hide”:{“html”:false,”css”:false,”js”:false},”name”:{“html”:”HTML”,”css”:”CSS”,”js”:”JavaScript”},”layout”:”left”}}</div>

</div>

第4270篇《CSS3侧边栏动画导航菜单》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点