CSS 菜單欄隱藏按鈕是一種常用的網頁設計技巧。通過隱藏菜單欄，可以讓網頁更加簡潔美觀。下面我們來看一下如何使用 CSS 實現菜單欄隱藏按鈕。

/* 隱藏菜單欄的樣式 */
.hide-menu {
display: none;
}
/* 顯示菜單欄的樣式 */
.show-menu {
display: block;
}
/* 隱藏按鈕的樣式 */
.hide-button {
display: block;
background-color: #333;
color: #fff;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
/* 顯示按鈕的樣式 */
.show-button {
display: none;
}

以上代碼定義了隱藏菜單欄、顯示菜單欄、隱藏按鈕和顯示按鈕的樣式。接下來，我們需要通過 JavaScript 來實現菜單欄的隱藏和顯示功能。

var menu = document.getElementById('menu');
var hideButton = document.getElementById('hide-button');
var showButton = document.getElementById('show-button');
hideButton.addEventListener('click', function() {
menu.classList.add('hide-menu');
menu.classList.remove('show-menu');
hideButton.classList.add('hide-button');
hideButton.classList.remove('show-button');
showButton.classList.add('show-button');
showButton.classList.remove('hide-button');
});
showButton.addEventListener('click', function() {
menu.classList.add('show-menu');
menu.classList.remove('hide-menu');
hideButton.classList.add('show-button');
hideButton.classList.remove('hide-button');
showButton.classList.add('hide-button');
showButton.classList.remove('show-button');
});

以上代碼實現了點擊隱藏按鈕隱藏菜單欄，點擊顯示按鈕顯示菜單欄的功能。其中，menu是菜單欄的元素，hide-button和show-button是隱藏按鈕和顯示按鈕的元素。

使用 CSS 菜單欄隱藏按鈕，可以有效地提升網頁的用戶體驗。希望本文能夠對你有所幫助。