這個做Web網(wǎng)頁的系列文章寥假，我會慢慢更新的。這也是對我使用Web前端技術(shù)的練習(xí)和總結(jié)（順便練練用Markdown的寫作）霞扬。如果大家覺得好的話糕韧，歡迎收藏、點贊喻圃、關(guān)注萤彩！
這個演示的圖片如下：
動態(tài)圖片有點大，所以一時打開會比較卡湊活著看吧：http://47.96.224.250/m/demo.gif
也可以自己把下面兩個圖像腦洞補幀：
演示的鏈接如下：
服務(wù)器地址：http://47.96.224.250/m/1.html
由于我沒有使用響應(yīng)式布局斧拍，可能排版會亂雀扶，建議使用電腦觀看或者手機瀏覽器UA調(diào)整成電腦模式
1.搭建網(wǎng)頁基本框架，并引入外部樣式表和腳本
- 頁面結(jié)構(gòu)大致是這樣(詳見底部源碼)：
body>(div.sidebar>li*n>a.icon)+a.btn
- 接下來引用下外部腳本：
因為需要有點擊事件肆汹，所以這里我直接采用JQuery來實現(xiàn)愚墓。
jQuery是一個快速、簡潔的JavaScript框架昂勉，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）浪册。jQuery設(shè)計的宗旨是“write Less，Do More”岗照，即倡導(dǎo)寫更少的代碼村象，做更多的事情。它封裝JavaScript常用的功能代碼谴返，提供一種簡便的JavaScript設(shè)計模式煞肾，優(yōu)化HTML文檔操作、事件處理嗓袱、動畫設(shè)計和Ajax交互籍救。
我參考了w3school jQuery教程，直接使用最簡單的CDN渠抹，來引用外部的腳本蝙昙。
CDN的全稱是Content Delivery Network闪萄，即內(nèi)容分發(fā)網(wǎng)絡(luò)。CDN是構(gòu)建在網(wǎng)絡(luò)之上的內(nèi)容分發(fā)網(wǎng)絡(luò)奇颠，依靠部署在各地的邊緣服務(wù)器败去，通過中心平臺的負載均衡、內(nèi)容分發(fā)烈拒、調(diào)度等功能模塊圆裕，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞荆几，提高用戶訪問響應(yīng)速度和命中率吓妆。CDN的關(guān)鍵技術(shù)主要有內(nèi)容存儲和分發(fā)技術(shù)。
使用 Google 的 CDN：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
使用 Microsoft 的 CDN：
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
再給幾份文檔供參考：
jQuery 教程 | 菜鳥教程
jQuery API 中文文檔
jQuery中文網(wǎng)
- 引入外部樣式表：
<link rel="stylesheet" >
這里采用的是ionicons圖標庫的圖標
我采用的是國外的CDN吨铸，國內(nèi)的也可以使用行拢，參考文檔：ionic icon(圖標) | 菜鳥教程
<link rel="stylesheet" >
2.放入圖標，寫CSS樣式
- 圖標自己上ionicons圖標庫看看诞吱，引用采用的是
<a>錨點的class方式引入舟奠，不采用官網(wǎng)給的JS腳本標簽引入，點開圖標下面會顯示默認“智能引入”房维，在上面有個USAGE沼瘫，滑倒最低有個class引入方法，基本上操作幾次咙俩，你看看“智能引入”圖標英文名字就知道怎么寫了晕鹊。
- 寫CSS樣式：
這個這個，具體咱也不好給你講暴浦，你搜搜標簽、屬性大概就知道什么意思晓锻，就會用了（英文字面意思）
主要講講這個：
.btn:before{
content:'\f32a';
}
.btnc:before{
content:'\f2c0';
}
在html中是這樣的：
<a class="btn"></a>
那為啥會顯示這樣的圖標呢歌焦？
因為采用了webfont。
在css里面砚哆，如果想使用某個字體独撇，但是又擔心用戶電腦上沒有，就可以使用font-face屬性從服務(wù)器上引用這組字體躁锁。具體怎么用纷铣，搜一下font-face就很清楚了。
所以這里圖標也采用了十六進制編碼格式給“自定義”編碼進去了战转，所以引用后就可以顯示搜立，注意這里別忘引用這個“字符庫”,放在
.btn{}中。
font-family: ionicons;
參考下這個文檔吧：
font-face | 菜鳥教程
我具體獲得這個值槐秧，是在官網(wǎng)圖標庫通過開發(fā)者工具檢查元素得到的啄踊。
（我覺得這樣用簡單忧设，當然你也可以用其他方法）
3.寫JS腳本
由于這個事件很簡單，所以直接寫到html中就可以了颠通，具體怎么用址晕，在第一中給有jQuery相關(guān)文檔，可以參考一下顿锰！
<script type="text/javascript">
$('.btn').on('click',function(){
$('.btn').toggleClass('btnc');
$('.sidebar').toggleClass('side');
})
</script>
算了谨垃，簡要介紹下toggleClass()吧。
- 定義
toggleClass()就是所謂的切換效果硼控，對設(shè)置或移除被選元素的一個或多個類進行切換刘陶。 - 語法
$(selector).toggleClass(class,switch)
所以這么一看上面的代碼，不就是在點擊事件中淀歇，把兩個模塊預(yù)先寫好的樣式更換就行了易核，so easy對吧！
源代碼：
- index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>側(cè)邊欄</title>
<link rel="stylesheet" href="style.css">
<!--jQuery code-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" >
</head>
<body>
<div class="sidebar">
<ul>
<li><a href="" class="icon ion-logo-android"></a></li>
<li><a href="" class="icon ion-logo-playstation"></a></li>
<li><a href="" class="icon ion-logo-windows"></a></li>
<li><a href="" class="icon ion-logo-instagram"></a></li>
<li><a href="" class="icon ion-logo-python"></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>
- style.css:
@import 'https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css';
body,html{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
.sidebar{
float: left;
width: 100px;
height: 100%;
margin-left: -100px;
background: #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: #34495e;
}
.btn{
float: left;
padding: 0 10px;
font-size: 40px;
text-decoration: none;
color: #2c5e50;
font-family: ionicons;
cursor: pointer;
}
.btn:before{
content:'\f32a';
}
.btnc:before{
content:'\f2c0';
}
