CSS漢堡是Web開發(fā)中常用的一個(gè)圖標(biāo),通常用于展開和收起菜單,給用戶更好的交互體驗(yàn)。下面介紹一下創(chuàng)建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; }
使用以上代碼可以快速創(chuàng)建一個(gè)簡單的CSS漢堡圖標(biāo),其中.spanspan標(biāo)簽表示菜單按鈕上的三條線。為了實(shí)現(xiàn)折疊和展開菜單的功能,通常會(huì)在CSS中添加對應(yīng)的動(dòng)畫效果。
例如下面的代碼可以實(shí)現(xiàn)一個(gè)漢堡圖標(biāo)的展開和收起效果:
.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); }
以上代碼表示當(dāng)按鈕處于active狀態(tài)時(shí),把三條線變成透明,同時(shí)上下兩個(gè)線-8px的位置向中間移動(dòng),最后上下的線分別做45度和-45度的旋轉(zhuǎn)動(dòng)畫。這樣就可以實(shí)現(xiàn)漢堡菜單的展開和收起的效果。