CSS漢堡菜單效果是現代網站設計中非常流行的一種交互效果。顧名思義，它就像一個漢堡一樣，當用戶點擊它時，會彈出一個菜單選項。在這篇文章中，我們將介紹如何使用CSS創建漢堡菜單效果。

.menu {
display: none;
position: absolute;
top: 50px;
right: 0;
width: 200px;
height: 200px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
z-index: 999;
padding: 20px;
}
.menu li {
display: block;
margin-bottom: 10px;
}
.hamburger-menu {
display: block;
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
z-index: 999;
cursor: pointer;
}
.hamburger-menu::before,
.hamburger-menu::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
margin-top: -1px;
margin-left: -10px;
background-color: #000;
}
.hamburger-menu::before {
transform: translateY(-6px);
}
.hamburger-menu::after {
transform: translateY(6px);
}
.menu-open .menu {
display: block;
}
.menu-open .hamburger-menu::before {
transform: translateY(0) rotate(45deg);
}
.menu-open .hamburger-menu::after {
transform: translateY(0) rotate(-45deg);
}
.menu-open .hamburger-menu {
background-color: transparent;
}

需要注意的是，我們使用一個包含無序列表的div來創建菜單。這樣我們可以使用內置的列表屬性來控制菜單中的選項間距和邊距。

我們還為. hamburger-menu元素添加了偽元素before和after，用于創建漢堡菜單的線條。使用transform: translateY()和旋轉角度來調整它們的位置，從而創建漢堡菜單的形狀。

最后，我們使用JavaScript在點擊漢堡菜單時切換菜單的可見性。通過為. hamburger-menu添加一個menu-open類，我們可以使用CSS樣式定義在菜單打開時發生的事情。

這就是如何使用CSS創建漢堡菜單效果。它是一個簡單但很實用的交互效果，可以使網站更加直觀和易于使用。