CSS 點擊彈出導航菜單是以一個連續的按鈕開始，然后在每次單擊該按鈕時，它都會打開一組額外的選項。這對于需要節省空間的設計來說特別有用。以下是一些簡單的 CSS 代碼，用于創建這種類型的導航菜單：

/* 設置按鈕 */
.toggle-btn {
width: 30px;
height: 30px;
background: #777;
position: relative;
}
/* 設置菜單 */
.menu {
width: 160px;
height: 100px;
position: absolute;
top: 40px;
left: -200%;
background: #ddd;
transition: all 0.5s ease;
}
/* 當按鈕被點擊時，顯示菜單 */
.toggle-btn:checked + .menu {
left: 0;
}

以上是用于創建 CSS 導航菜單的基本代碼。需要解釋一下作用：

1. 設置按鈕 - 這里我們設置按鈕的大小、背景顏色和相對定位，以便在后面的步驟中使用。
2. 設置菜單 - 我們在這里設置菜單的大小、位置、背景顏色和過渡效果。transition屬性的作用是，當菜單顯示或隱藏時過渡效果會給人帶來更加平滑的感覺。
3. 當按鈕被點擊時 - 當用戶單擊按鈕時，我們將菜單移動到左側。這是使用 CSS 選擇器完成的。這里我們使用了:checked偽類，匹配被選中的開關按鈕。

注意：以上代碼只是基本樣式，你可以通過添加 CSS 樣式改變菜單的外觀，從而使其更符合你的需求。