CSS左側滑動菜單導航是現代網站設計中使用較多的一種效果，它可以幫助網站用戶更方便的訪問網站內部的各個功能頁面。本文將帶給大家如何通過CSS代碼來實現一個簡單的左側滑動菜單導航。

html {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
}
.sidebar {
width: 250px;
background-color: #333;
color: #fff;
height: 100%;
overflow-x: hidden;
transition: all .3s ease-in-out;
}
.sidebar .logo {
padding: 20px;
text-align: center;
font-size: 24px;
}
.sidebar .menu {
margin-top: 40px;
}
.sidebar .menu li {
list-style: none;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
transition: all .3s ease-in-out;
}
.sidebar .menu li:hover {
background-color: #444;
}
.main {
flex: 1;
padding: 20px;
}
.show-sidebar .sidebar {
margin-left: -250px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
position: fixed;
z-index: 2;
width: 250px;
margin-left: -250px;
transition: all .3s ease-in-out;
}
.show-sidebar .sidebar {
margin-left: 0;
}
}

上述CSS代碼中，我們首先設置了整個html和body元素的高度為100%。接下來，我們創建一個.container容器來包含網頁的所有內容，同時使用flex屬性來實現左右兩欄布局。其中，左側菜單欄的class為.sidebar，右側內容欄的class為.main。

在.sidebar樣式中，我們設置了菜單欄的寬度、背景色和顏色，同時設置overflow-x為hidden，防止菜單內容溢出菜單欄。我們還使用了CSS過渡效果來實現菜單欄的滑動效果。

在主體內容區域中，我們設置了一個show-sidebar類來控制菜單欄的顯示和隱藏效果，同時使用@media查詢和max-width屬性針對小屏幕設備進行了響應式設計。

最后，通過JavaScript代碼監聽菜單按鈕的點擊事件，動態為菜單圖標和容器添加show-sidebar類來實現菜單欄的顯示和隱藏效果，從而實現一個完整的左側滑動菜單導航效果。