css menu

Tag: css menu

ทำ Rollover Navigation Menu ด้วย CSS อย่างง่าย

ไม่ได้เขียนอะไรเกี่ยวกับการลงมือทำบ้างเลย เขียนแต่เรื่อง concept แนวคิดมานานพอสมควรแล้ววันนี้ท่านเจ้าสำนักของเรา แยบ ๆ ผมมาว่าปลาเอ้ย เขียนเกี่ยวกับวิธีการปฏิบัติสักหน่อยสิ นักเขียนท่านอื่น เขาไม่ส่งบทความมาเสียที เขียนไปก่อนละกัน โอเค ก็ไม่รู้จะเขียนอะไรน่ะนะ O_o นั่งคิดอยู่นาน เอา Rollover Navigation ละกันนะ แบบแรกเป็นรูปภาพ Rollover ง่าย ๆ เลยละกัน เผื่อท่านใดอยากได้แนวทางการนำไปใช้ ถ้าท่านใดรู้แล้วก็มาแลกเปลี่ยนกันเผื่อจะได้อะไรที่มันประหยัดกระทัดรัด เอามาอวดมาเฉิดฉายกันหน่อย ในส่วนของ xhtml

เริ่มต้นเลยเรื่องของการออกแบบ คุณจะต้องออกแบบให้ครบทั้ง 2 สถานะ หลาย ๆ สถานะเอาไว้ก่อนไว้พูดกันวันอื่นวันนี้เอาเริ่ม ๆ ประเดี๋ยวจะโดนโพสด่าเอา ปกติก็เขียนเดา ๆ เมา ๆ อ่านไม่เข้าใจอยู่แล้ว เข้าเรื่อง ๆ เมื่อออกแบบ Navigation Bar ของเราครบสองสถานะแล้ว ให้เอามาเรียงตัวกันแบบนี้ครับ (สถานะปกติวางไว้ด้านบน, สถานะไม่ปกติเอ้ยสถานะที่ Rollover เมื่อเอาเมาส์มาวางเหนือมัน เอาไว้ข้างล่าง) ดังภาพประกอบ

ตัวอย่าง Navigation Bar

(ภาพใช้ประกอบการสาธิต ห้ามนำเอาไป copy ดัดแปลง หรือ ทำซ้ำ ถ้าจับได้มีความผิดทางกฏหมาย และ ผิดที่ไว้ใจ)

เมื่อได้สมอารมณ์หมายแล้วเราก็ฟันมันซะ เอ้ยตัดมันซะ แยกกันเป็นก้อนเพื่อนำไปใช้งาน ดังตัวอย่างนี้ครับ

ตัวอย่าง การ slice เพื่อใช้งาน

แล้วก็ตั้งชื่อให้สัมพันธ์กับการใช้งานซะ เช่นปุ่มนี้เป็นปุ่ม "home" ก็ตั้งชื่อมันว่า "home.jpg" ไม่เอาแบบนี้นะ "Nav-001.jpg" ไม่เอานะครับ เพราะอะไร … ก็เพื่อ findability ไงครับ เพื่อการสืบค้นที่ดี แล้วทำไมต้อง JPG ไม่ใช่เพราะอยากโชว์ว่าโฮสฉันแรงต้องดูความละเอียดของงานที่ออกแบบมาด้วย ถ้าไม่หวือหวามากก็ไม่ต้องอาศัยความละเอียดมากก็ได้ครับ เช่น ถ้าการออกแบบเป็นแค่ font ที่ไม่มีอยู่ในเครื่องทั่วไป สถานะปกติ กับ สถานะ rollover แค่เพียงเปลี่ยนสรตัวหนังสือคุณก็ตัดมันออกมาเป็น GIF หรือ PNG ก็ได้ตามสะดวกเลยครับผม จากนั้นเราก็จะมาเตรียม XHTML Structure ให้หนู ๆ ของเราดังนี้

การทำ Vertical Menu CSS

css navigation

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

ลักษณะหลายๆ อย่างในโค้ดตัวอย่างข้างล่างนี้ ถ้าหากท่านใดสงสัย ไม่เข้าใจ ก็ โพสต์ ถามเอาไว้ที่ เว็บบอร์ดได้นะครับ เดี๋ยวจะมาอธิบายและตอบคำถามให้อีกที ที่เลือกเว็บบอร์ด ก็เพราะ จะได้มีโอกาสแลกเปลี่ยนกันได้หลายๆ คน

ในเมนู ตอนนี้ จะเป็นเพียงการทำเมนูแบบธรรมดาเท่านั้น ยังไม่ได้เพิ่มเติมสีสัน ด้วยแบ็คกราวน์ที่เป็นรูปภาพ ใดๆ ตอนต่อไปคงมีโอกาสได้นำเสนอ และถือเป็นโอกาสที่จะให้ ทุกท่านนำไปประยุกต์ แก้ไขกันเองตามสะดวกครับ

Back to Top

Social media & sharing icons powered by UltimatelySocial