CSS漢堡菜單樣式圖是一種在網頁設計中經常出現的菜單樣式，它可使菜單欄更加具有現代感和美觀度。在這篇文章中，我們將分享一些有關CSS漢堡菜單樣式圖的信息。

.menu-icon {
display: block;
width: 25px;
height: 20px;
position: relative;
cursor: pointer;
}
.menu-icon .line {
width: 100%;
height: 3px;
background-color: #000;
position: absolute;
left: 0;
top: 50%;
margin-top: -1px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.menu-icon .line::before,
.menu-icon .line::after {
content: '';
width: 100%;
height: 3px;
background-color: #000;
position: absolute;
left: 0;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.menu-icon .line::before {
top: -8px;
}
.menu-icon .line::after {
bottom: -8px;
}
.menu-icon.active .line {
background-color: transparent;
}
.menu-icon.active .line::before {
-webkit-transform: translateY(8px) rotate(45deg);
transform: translateY(8px) rotate(45deg);
}
.menu-icon.active .line::after {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}

以上CSS代碼允許您創建一個簡單的漢堡菜單樣式圖，帶有三條線，當用戶點擊它時，圖標會產生變化。這個菜單樣式由一個div元素和幾個子元素組成，這些子元素分別是三條線，它們分別充當菜單按鈕的橫桿。

您可以用這個CSS樣式來創建屬于自己的漢堡菜單樣式圖，使您的網頁設計更加現代化和美觀。