輕鬆手刻Hamburger Menu Button

[  教學文 ]  手刻 Hamburger Menu Button

hamburger-button

大家在做RWD的時候一定常用到Hamburger Menu Button,有時候設計師已經切好圖讓你使用,

也有時候你需要自己做一個出來,這篇文章就很簡單的示範一下怎麼簡單的手刻一個Hamburger Menu。

 

HTML

Hamburger Menu Button當然在HTML的使用上就是一個按鈕,所以使用Button Tag來實現它,

裡面的三個class為icon-bar的span元件的使用就是用來畫那三條線。

(當然,你想做幾條就畫幾條,誰說一定要是Hamburger…lol)

結構放好了,再來是

CSS 

首先先簡單的清掉Button Tag default的樣貌,

(這個範例的使用上有使用 bootstrap3 css framework,所以已經有normalize.css包含在裡面,若是使用reset.css的,情況可能略有不同)

清掉button的background and border style,再來就是給與icon-bar元件display: block的性質,讓他是區塊可以被填色,background-color就看你想用什麼顏色來畫那三條線啦。

而高度以及寬度就交給你自己決定了,看設計的寬高分別是多少,填上你適用的數字即可,margin的使用則是簡單的隔開三條線使它們互相不會靠得太近。

 

 

Finished! 看範例

http://codepen.io/ph-mike/pen/keavE