[Web Design][CSS3] การทำ Hamburger Menu แบบอนิเมชั่น pure CSS3

สวัสดีครับ บทความตอนนี้ผมจะมาอธิบายการทำ Hamburger เมนู แบบอนิเมชั่นกันด้วย pure CSS3 + HTML ปกติแล้วคงเคยเห็นพวก Web Dev หรือ Web Designer ที่เขียน CSS3 เก่งๆ จะมีตัวอย่างสวย ๆ ตาม codepen มาให้ได้ดูกัน บ้างคนเขียนอ่านง่าย บ้างคนอ่านไม่ออกเลยก็มี ปกติผมก็ไม่ได้ค่อยเล่น css3 บ่อยนักเพราะต้องใช้เวลาว่างจริงๆ ในการเขียน ก็จะมีทำเล่นๆ ไว้ใน codepen บ้าง ยิ่งถ้าทำ canvas แล้วยิ่งต้องมีเวลาเยอะเลย  เอาละเดียวผมจะให้ดูตัวอย่างที่ผมจะสอนกันวันนี้ก่อน

 

See the Pen QyrrME by Pratchaya (@avatar) on CodePen.


ข้างบนนี้ก็คือตัวอย่างที่ผมจะมาสอนในวันนี้ครับ เดียวเรามาเริ่มกันเลย

ก่อนอื่นก็สร้างแท็ก html มาก่อนโดยมีแล้วให้ชื่อ class ว่า burger และก็สร้าง sapn ตัวนี้จะเป็นส่วนของเมนูสีขาวๆ ตามตัวอย่าง

ต่อไปเราจะมาสร้างสไตล์ให้กับเมนูกันโดยเริ่มที่ตัว div ก่อน

ผมกำหนดให้ตัว div เพื่อเป็นที่วางขีดๆ เมนูเรา และผมมีมีค่าความสูงและกว้างมีหน่วยเป็น em ก็ 1 em ก็จะประมาณ 16px และ 5em ก็ประมาณ 80px และใส่พื้นหลังกับวางตำแหน่งแบบ relative ถัดไปเราจะใส่ให้กับ span

1

ตรงนี้เราผมก็ใส่ความสูงไม่ต้องมากเพราะเดียวมันไม่เป็นขีด ใส่พื้นหลังสีขาว และกำหนดการวางตำแหน่งแบบ absolute เพื่อให้ span ไปผูกกับ div ที่เป็น relative อยู่ จากนั่นก็ขยับ top ให้มันไปกลางๆ หน่อยและบีดซ้ายขวาเข้ามา ไม่งั่นมันจะชิดขอบเลย  สุดท้ายก็ใส่ transition เพื่อให้เล่น animation แบบสมูธ

ต่อมาเราก็ใส่ :hover แล้วให้ height เป็น 0 พอเราเอาเมาส์ชี้มันก็จะค่อยๆ หายไปเพราะเราทำ transition ไว้

Tip: แทนที่เราจะใช้ padding ใน div กับใส่ width ไปที่ตัว span เราก็ใช้ left, right ที่ span แทนก็ได้ มันก็จะจัดกลางให้ แถมกำหนด width ไปในตัว

ตอนนี้เราได้ 1 ขีดแล้วต่อมาเราะจมาสร้างขีดที่สองกัน ด้วย :before เราก็เขียนคล้ายๆ กับอันบนแค่เพิ่ม before มาแล้ก็ขยับตำแหน่งขึ้นบนหน่อยนึง

2

สุดท้ายก็มาใส่ขีดที่สามกันก็ทำแบบเดิมแต่เปลี่ยนเป็น :after

3

ตอนนี้เราก็ได้ครบสามขีดแล้วเป็นเมนูสักที ต่อไปเราจะมาใส่อนิเมชันตอนที่เราเอาเมาส์ชี้เมนูแล้วให้มันขยับ

ส่วนี้เราก็มาใส่อนิเมชั่นด้วย css animation กันเมื่อเราเอาเมาส์ชี้มันจะได้มาไขว่กัน แบบนี้

4

เราก็มาสร้าง keyframe ให้อนเมชันเรากันก่อนเดียวมันจะไม่ทำงาน

หลักการง่ายๆ ครับผมจะไม่อธิบายหมดปกติอนิเมชั่นทำงานเนี่ยมันก็จะเริ่มจาก 0%  ถึง 100% ในแต่ละช่วงเวลาเราก็จะกำหนดให้มันทำอะไรนั่นเอง เช่น ตอนที่เล่นไป 25% – 50% เราก็จะทำให้มันหยุบมาอยู่ตรงกลางด้วยการใส่ top:0 จากนั่นก็ให้มันหมุนไปก็จะได้เป็นแบบไขว่กัน ตัวบนก็หมุนองศาปกติตามเข็มนาฬิกา ส่วนตัวล่างก็หมุนทวนเข็มนาฬิกาองศาติดลบนั่นเอง

ต่อเราก็จะมาใส่อนิเมชั่นให้มันคืนค่ากลับไปตำแหน่งเดิมแบบสมูธๆ กัน

เราก็ใส่อนิเมชั่นเข้าไปที่ :after , :before ครับ พอตอนเราเอาเมาส์ออกมันก็จะค่อยๆ หมุนกลับไปตำแหน่งเดิม เดียวเรามาดูว่า keyframe เขียนยังไง

ก็หลักการง่ายๆ ครับมันยังไงก็กลับไปแบบนั่นตัวไหนทวนเข็มมาก็สั่งให้มันทวนเข็มกลับและตามเข็มมาก็สั่งใหตามเข็มกลับไปใส่ rotate กลับด้านนั่นเอง แล้วก็คือค่าตำแหน่ง top ให้เหมือนกันตอนเริ่มต้นที่เราทำกัน ก็เป็นอันจบครับ

 

สำหรับบทความนี้ก็ขอจบไว้เท่านี้นะครับ ยังไงก็ลองไปทำกันดูนะครับ ไว้ครั่งหน้าจะมาสอนทำแบบอื่นๆ กันครับรับรองว่าสวยกว่านี้แน่นอน

 

Facebook Comments