Css左側菜單向右是網頁設計中常用的布局方式之一，它可以使網頁更加優雅、簡潔、美觀，讓用戶在使用時更加舒適自然。

/* CSS樣式 */
.menu {
position: fixed;
top: 20px;
left: -200px;
width: 200px;
height: 100%;
background-color: #333;
transition: left 0.5s;
}
.menu.active {
left: 0;
}
.btn-menu {
position: fixed;
top: 20px;
left: 20px;
z-index: 1;
cursor: pointer;
}
/* HTML結構 */
<div class="menu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">圖書館</a></li>
<li><a href="#">寫作中心</a></li>
<li><a href="#">討論區</a></li>
<li><a href="#">個人中心</a></li>
</ul>
</div>
<div class="btn-menu">
<span class="iconfont"></span>
</div>

上述代碼中，我們首先定義了一個名為“menu”的CSS樣式，該樣式為菜單項在左側隱藏的狀態。當菜單項被展開時，使用“menu.active”樣式將其移動至左側，通過CSS的“transition”屬性使其具有過渡效果。

同時，我們還定義了一個名為“btn-menu”的按鈕，該按鈕被點擊后觸發菜單項的展開和隱藏。通過使用CSS中“position: fixed”屬性，我們可以固定該按鈕的位置，使其脫離文檔流，從而更好地控制其位置和樣式。

在HTML方面，我們使用“div”標簽來容納菜單項和按鈕。在菜單項中，我們使用“ul”和“li”標簽分別來實現菜單項和其子菜單項。通過這樣的方式，我們可以比較方便地實現網頁布局和樣式設計，達到更好的用戶體驗和交互效果。