Bob drudgery-06-03 19:28:43
最后发布:-06-03 19:28:43首发:-06-03 19:28:43
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：/Bobdragery/article/details/90757500
准备工作
1、矢量图标网站/
2、配色网站/
3、jQuery-cdn
<script src="/jquery/3.2.1/jquery.min.js"></script>
成品效果截图
展开后：
展开前：
废话不不多说上代码：
html代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>sidebar</title> <link rel="stylesheet" href="../style.css"> <script src="/jquery/3.2.1/jquery.min.js"></script></head><body><div class="sidebar"> <ul> <li><a class="ion-social-apple" href="/cn/shop/buy-mac/macbook-pro/MV912CH/A#"></a></li> <li><a class="ion-ios-game-controller-b" href="/"></a></li> <li><a class="ion-social-twitter" href="/cctvxinwen?topnav=1&wvr=6&topsug=1"></a></li> <li><a class="ion-social-youtube" href=""></a></li> <li><a class="ion-ios-basketball" href="/nba/"></a></li> <li><a class="ion-social-rss" href="/Dominic-Ji/"></a></li> <li><a class="ion-social-github" href="/jackfrued/Python-100-Days"></a></li> <li><a class="ion-music-note" href="/#/song?id=287035"></a></li> </ul></div><a class="btn"></a><script type="text/javascript"> $('.btn').on('click',function () { $('.btn').toggleClass('btnc'); $('.sidebar').toggleClass('side'); })</script></body></html>a标签中的链接可自由更换css代码
@import "/ionicons/2.0.1/css/ionicons.min.css";body, html { margin: 0; padding: 0; height: 100%; width: 100%; font-family: sans-serif;}.sidebar { float: left; width: 100px; margin-left: -100px; height: 100%; background-color: #2c3e50; overflow: hidden; transition: 0.8s all;}.side { margin-left: 0;}/*靠边*/.sidebar ul { margin: 0; padding: 0;}/*去点*/.sidebar ul li { list-style: none;}/*去下划线*/.sidebar ul li a { text-decoration: none; color: white; height: 80px; width: 100%; font-size: 40px; line-height: 80px; text-align: center; display: block; transition: 0.6s all;}.sidebar ul li a:hover { background: #95a5a6;}.btn { float: left; padding: 0 10px; font-size: 40px; text-decoration: none; color: #2c3e50; font-family: Ionicons; cursor: pointer;}.btn:before { content: '\f20d';}.btnc:before { content: '\f12a';}
