非常漂亮的纯css3实现多彩侧边导航（非常流畅），附效果演示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3隐藏悬浮网站左侧标签式导航栏代码 </title> <style type="text/css"> a:link, a:hover, a:visited, a:active { color: #fff; text-decoration: none; } body { height: 100%; width: 100%; margin: 0; padding: 0; background: #fff; } .card-holder { position: fixed; width: 0px; overflow: visible; } .card-wrapper { display: inline-block; float: right; clear: both; } .card { position: relative; left: 32px; padding: 16px 32px 16px 64px; margin: 8px; x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5); box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5); background: #fff; transition: all 0.3s ease-in-out 0.1s; } .card:hover { position: relative; left: 100%; margin-left: -32px; box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.5), 0 8px 8px -8px rgba(0, 0, 0, 0.5); transition: all 0.3s ease-in-out; } .card-content { display: inline-block; color: #fff; font-family: 'Droid Sans', sans-serif; font-size: 16px; font-weight: bold; white-space: nowrap; } .bg-01 { background: #539770; } .bg-02 { background: #4B7D74; } .bg-03 { background: #8DC2BC; } .bg-04 { background: #EDD6B4; } .bg-05 { background: #BE7467; } .bg-06 { background: #E2AE63; } </style> </head> <body> <div class='card-holder'> <div class='card-wrapper'> <a href='#'> <div class='card bg-01'> <span class='card-content'>标题1</span> </div> </a> </div> <div class='card-wrapper'> <a href='#'> <div class='card bg-02'> <span class='card-content'>标题2</span> </div> </a> </div> <div class='card-wrapper'> <a href='#'> <div class='card bg-03'> <span class='card-content'>标题3</span> </div> </a> </div> <div class='card-wrapper'> <a href='#'> <div class='card bg-04'> <span class='card-content'>标题4</span> </div> </a> </div> <div class='card-wrapper'> <a href='#'> <div class='card bg-05'> <span class='card-content'>标题5</span> </div> </a> </div> <div class='card-wrapper'> <a href='#'> <div class='card bg-06'> <span class='card-content'>长标题1</span> </div> </a> </div> </div> <!--以下无正文 转载或者使用请注释出自梦想匣子 lssfxy.kuaizhan.com--> <div style="width:960px;margin:0px auto; clear:both; text- align:center; "> <script src="/statics/js/ad/96090.js" type="text/javascript"></script> </div> <div style="width:960px;margin:0px auto 0px auto; clear:both; text-align:center; font-size:12px; line-height:25px; "> </body> </html>
直接复制代码即可使用
