Tag: navigation

บทความเปิดศักราชใหม่ จาก thaicss.com เรามาว่ากันในเรื่องง่ายๆ แต่ใช้ได้ใช้ดี โดยไม่ต้องพึ่งพา ไดเกียว แต่ประการใด นั่นก็คือการทำเงา ให้กับ Element ใดๆ ที่เราต้องการ

CSS3 Box Shadow เป็น Property ที่บรรจุเอาไว้ใน CSS Backgrounds and Border Module Level 3 ถือเป็น Miscellaneous Effects ของ Module นี้ โดยใน Miscellaneous Effects มี 2 ตัว ตัวแรกคือ box-shadow ที่กำลังจะพูดถึง และตัวที่สองคือ box-decoration-break เอาไว้พูดถึงในโอกาสหน้า (ถ้ายังมีอยู่)

box-shadow สามารถใส่ค่าการทำ drop-shadow ได้มากกว่า 1 สี โดยการใช้ คอมม่า ในการแบ่งการสั่งงาน

หลักการสั่งงานของคำสั่งมีดังนี้
ตัวอย่าง Code:

div {
box-shadow: 5px 5px 10px 10px rgba(50,50,50,.4);
}

หรือ

* {box-shadow: 5px 5px 15px 5px rgba(50, 50, 50, .5) inset;}

1. เลขค่าแรก คือการสั่งงาน เงา แนวนอน เลขบวกคือ ด้านขวา เลขลบ คือด้านซ้าย
2. เลขตัวที่สอง คือการสั่งงาน แนวตั้ง เลขบวกคือ ด้านล่าง เลขลบ คือด้านบน
3. เลขตัวที่สาม คือการสั่ง ค่าการเบลอ ว่าจะเบลอประมาณไหน เริ่มจากค่า โรงงานคือ ศูนย์ และเป็นค่าบวก
4. เลขตัวที่สี่ คือการสั่งขอบเขตการขยายตัวของการเบลอ (a spread distance) ใช้เป็นค่า บวกเท่านั้น
5. สีของเงา สามารถใส่ได้ตามหลักการของ W3C ซึ่ง อ้างอิงจาก CSS Colors Module Level 3
6. inset คือคำสั่งให้ เงาเด้งกลับเข้าไปในกล่อง ซึ่งคล้ายๆ การสั่ง inner shadow ของ Adobe Photoshop

จะมีสักกี่เว็บไซท์ในเมืองไทย ที่เราสามารถใช้ Keyboard กับ Attribute accessky ของ HTML ในหน้าเว็บนั้นได้ หรือว่าเราต้องการใช้ปุ่ม [TAB] ของ คีย์บอร์ด กดเดินหน้า ถอยหลังเพื่อที่จะไปยังเนื้อหาส่วนต่างๆ ในหน้าเว็บอย่างสบายอารมณ์

เพราส่วนใหญ่เวลาเรากด [TAB] ไปแล้วก็ยังไม่รู้ว่า จุดที่เรากำลัง :FOCUS นั้นมันอยู่หน้าไหน เพราะว่า ค่า outline มันไม่แสดงผลออกมา

วันนี้ผมขอพูดถึงเรื่อง Access Key ของ HTML และ Outline ของ CSS

เรื่องมันมีอยู่ว่า ทำไม มันใช้ได้ กับการเขียน CSS Dropdown Navigation แบบนี้ เพราะก่อนหน้านี้ ผมก็เคยลองเขียนตาม ทฤษฎีและ Module ของ CSS ที่ W3C มีมาให้ทุกอย่าง มันก็แสดงผลไม่ถูกต้อง กับบราวเซอร์ อย่าง IE7 หรือ IE8

แต่ เมื่อสองสามวันที่ผ่านมา ผมลองเขียนดูอีกที "มันดันใช้ได้ ไม่มีปัญหา"

สำหรับคนที่เคยลองเขียน CSS Dropdown Menu มาแล้วคงจะเจอปัญหาที่มันเกิดขึ้นกับ IE7 หรือ IE8 เพราะ เมื่อเวลาที่เรา เอาเมาส์ ไป :hover ที่ <li> ซึ่งเป็น Nest Element ของ <ul> แล้ว มันโผล่ออกมา แต่พอเอาเมาส์เลื่อนไปจะไปคลิ๊กที่ลิงค์ มันดันหายไปก่อนที่เราจะได้คลิ๊กที่ ลิงค์ ตามที่เราต้องการ

ซึ่ง บราวเซอร์ อื่นๆ ที่ไม่ใช่ตระกูล IE ไม่เป็น เป็นอยู่เจ้าเดียวนี่แหละ ก็เลย เป็นอันว่า มันคือ บั๊กของ IE แต่ตอนนี้ มันใช้ได้แล้ว

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

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

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

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

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

ul, li ถ้าถูกควบคุมด้วย css ตามแนวนอนแล้ว จะเป็นยังไง ไปดูกันเลยครับ

ผมปรับปรุงรูปแบบการแสดงผลของ โค้ดใหม่ครับ เพื่อง่ายแก่การนำไปศึกษาต่อของ ท่านเอง

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

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

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