CSS漢堡是Web開發中常用的一個圖標，通常用于展開和收起菜單，給用戶更好的交互體驗。下面介紹一下創建CSS漢堡的方法。

.navbar-toggle {
display: block;
position: relative;
padding: 10px 15px;
border: none;
cursor: pointer;
background-color: transparent;
}
.navbar-toggle span {
display: block;
width: 24px;
height: 2px;
margin-bottom: 6px;
position: relative;
background-color: #333;
border-radius: 2px;
z-index: 1;
}
.navbar-toggle span:before,
.navbar-toggle span:after {
content: "";
display: block;
width: 100%;
height: 2px;
position: absolute;
background-color: #333;
border-radius: 2px;
z-index: 1;
}
.navbar-toggle span:before {
top: -8px;
}
.navbar-toggle span:after {
bottom: -8px;
}

使用以上代碼可以快速創建一個簡單的CSS漢堡圖標，其中.spanspan標簽表示菜單按鈕上的三條線。為了實現折疊和展開菜單的功能，通常會在CSS中添加對應的動畫效果。

例如下面的代碼可以實現一個漢堡圖標的展開和收起效果：

.navbar-toggle.active span {
background-color: transparent;
}
.navbar-toggle.active span:before,
.navbar-toggle.active span:after {
top: 0;
}
.navbar-toggle.active span:before {
transform: rotate(45deg);
}
.navbar-toggle.active span:after {
transform: rotate(-45deg);
}

以上代碼表示當按鈕處于active狀態時，把三條線變成透明，同時上下兩個線-8px的位置向中間移動，最后上下的線分別做45度和-45度的旋轉動畫。這樣就可以實現漢堡菜單的展開和收起的效果。