hexo+yilia添加隱藏左邊欄目按鈕

---

效果圖：

點擊按鈕時，縮進左側邊欄，再次點擊再彈出來。

添加隱藏左邊欄目按鈕

參考：添加隱藏左邊欄目按鈕

下面爲引用內容：

折騰了一個下午,終於把隱藏左邊側邊欄目的效果實現了. 實現了點擊按鈕隱藏側邊欄, 查找和修改源碼實在是太麻煩了.

製作按鈕樣式

先找一款你喜歡的CSS菜單按鈕切換,或者自己實現一個,我在網上找到一款比較簡單的樣式,稍微做了下修改.

.mymenucontainer {
	display:block;
	cursor:pointer;
	left:0;
	top:0;
	width:35px;
	height:35px;
	z-index:9999;
	position:fixed;
}
.bar1 {
	width:35px;
	height:3px;
	background-color:#333;
	margin:6px 0;
	transition:0.4s;
	-webkit-transform:rotate(-45deg) translate(-8px,8px);
	transform:rotate(-45deg) translate(-8px,8px);
}
.bar2 {
	width:35px;
	height:3px;
	background-color:#333;
	margin:6px 0;
	transition:0.4s;
	opacity:0;
}
.bar3 {
	width:35px;
	height:3px;
	background-color:#333;
	margin:6px 0;
	transition:0.4s;
	-webkit-transform:rotate(45deg) translate(-4px,-6px);
	transform:rotate(45deg) translate(-4px,-6px);
}
.change .bar1 {
	-webkit-transform:rotate(0deg) translate(0px,0px);
	transform:rotate(0deg) translate(0px,0px);
}
.change .bar2 {
	opacity:1;
}
.change .bar3 {
	-webkit-transform:rotate(0deg) translate(0px,0px);
	transform:rotate(0deg) translate(0px,0px);
}

樣式製作完成後,壓縮,然後添加進\themes\yilia\source\main.0cf68a.css文件中,添加在最前面即可

添加按鈕到相應的位置

打開\themes\yilia\layout\layout.ejs文件, 找到<div class="left-col",在其上面添加如下代碼:

<div class="mymenucontainer" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

在</body>之後, </html>前添加如下Js代碼:

<script>
    var hide = false;
    function myFunction(x) {
        x.classList.toggle("change");
        if(hide == false){
            $(".left-col").css('display', 'none');
            $(".mid-col").css("left", 6);
            $(".tools-col").css('display', 'none');
            $(".tools-col.hide").css('display', 'none');
            hide = true;
        }else{
            $(".left-col").css('display', '');
            $(".mid-col").css("left", 300);
            $(".tools-col").css('display', '');
            $(".tools-col.hide").css('display', '');
            hide = false;
        }
    }
</script>

重新生成文件,部署即可看到效果, 可以看看我的博客效果

效果圖：

引用結束

結合我的配置進行修改

因爲我的左側邊欄添加了心知天氣（如下圖），所以按鈕不能放在一起，因此進行了修改：

修改位置

主要變化：修改按鈕位置，移到右邊：left: 260px;，修改bar1,bar2,bar3的顏色：background-color: #0087ca;：修改文件：H:\Hexo\themes\yilia\source\main.0cf68a.css

.mymenucontainer {
  display: block;
  cursor: pointer;
  left: 260px;  /*原來： left:0; */
  top: 0;
  width: 35px;
  height: 35px;
  z-index: 9999;
  position: fixed;
}
.bar1 {
  width: 35px;
  height: 3px;
  background-color: #0087ca;  /*原來： background-color:#333; */
  margin: 6px 0;
  transition: 0.4s;
  -webkit-transform: rotate(-45deg) translate(-8px, 8px);
  transform: rotate(-45deg) translate(-8px, 8px);
}

事件響應

因爲修改了圖標位置，事件響應時也要對應修改位置：縮小後設置爲$(".mymenucontainer").css('left', '0');,展開：$(".mymenucontainer").css('left', '260px');。
修改文件：H:\Hexo\themes\yilia\layout\layout.ejs

</body>

<!-- 《添加摺疊按鈕腳本 -->
<script>
    var hide = false;
    function myFunction(x) {
        x.classList.toggle("change");
        if(hide == false){
            $(".left-col").css('display', 'none');
            $(".mid-col").css("left", 6);
            $(".tools-col").css('display', 'none');
            $(".tools-col.hide").css('display', 'none');
            hide = true;

            $(".mymenucontainer").css('left', '0');

        }else{
            $(".left-col").css('display', '');
            $(".mid-col").css("left", 300);
            $(".tools-col").css('display', '');
            $(".tools-col.hide").css('display', '');
            hide = false;

            $(".mymenucontainer").css('left', '260px');
        }
    }
</script>
<!-- 添加摺疊按鈕腳本》 -->

</html>

響應式：手機端隱藏按鈕

手機端(當頁面變小時)隱藏按鈕：修改文件：H:\Hexo\themes\yilia\source\main.0cf68a.css，找到@media screen and (max-width:800px)下面的內容：

@media screen and (max-width:800px) {
    #container, body, html {
        height:auto;
        overflow-x:hidden;
        overflow-y:auto
    }
    #mobile-nav {
        display:block
    }
    .body-wrap {
        margin-bottom:0
    }
    .left-col{
        display:none
    }
}

在.left-col中添加一個按鈕的標籤：

    .left-col,.mymenucontainer {
        display:none
    }

效果圖：

🐛

有個小問題：在PC端進行測試時，如果先嚐試縮放，然後返回再展開，直接測試手機端，就會出現問題：按鈕仍然撐開界面；但是如果進到頁面直接測試手機端就不會這種問題（或者是在縮放後進行測試也不會影響）。
因爲這個問題好像影響不是很大，就不深入了。

---

文章首發於：hexo+yilia添加隱藏左邊欄目按鈕