CSS3是Web前端開發中非常重要的技術，在布局方面，CSS3可以幫助我們實現許多有趣的效果，比如側邊欄。

.sidebar {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: #333;
transition: all 0.5s ease-in-out;
}
.sidebar.active {
left: 0;
}

上面的代碼展示了如何使用CSS3來創建一個側邊欄。首先，為側邊欄創建一個CSS類，使用fixed屬性來使其固定在頁面的左側，top屬性指定離頁面頂部的距離，left屬性設置側邊欄距離頁面左側的距離，同時將其設置為-250px以使其隱藏。

接下來，為側邊欄創建active類，使用transition屬性為其添加過渡效果。在active類中，將left屬性設置為0以使其出現在頁面上。

我們可以使用JavaScript來控制側邊欄的出現和隱藏。比如，我們可以為頁面添加一個按鈕，使用以下代碼來創建一個可點擊的按鈕：

<button onclick="toggleSidebar()">側邊欄</button>

然后在JavaScript代碼中使用以下代碼來控制側邊欄出現和隱藏：

function toggleSidebar() {
var sidebar = document.querySelector('.sidebar');
sidebar.classList.toggle('active');
}

這將使側邊欄在按鈕點擊時出現或隱藏。