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

ไม่ได้เขียนอะไรเกี่ยวกับการลงมือทำบ้างเลย เขียนแต่เรื่อง 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 id="mainNavigation">
  <li id="home" title="Home : Sweet Home"><a href="#"><span>Home : Sweet Home</span></a></li>
  <li id="service" title="Service : Our Team Service"><a href="#"><span>Service : Our Team Service</span></a></li>
  <li id="about-us" title="About Us : Who Are We"><a href="#"><span>About Us : Who Are We</span></a></li>
  <li id="work-gallery" title="Work Gallery : Our Works"><a href="#"><span>Work Gallery : Our Works</span></a></li>
  <li id="order" title="Order : Request To the Team"><a href="#"><span>Order : Request To the Team</span></a></li>
</ul>

เมื่อตระเตรียม XHTML Structure (โครงสร้าง XHTML) เสร็จเรียบร้อยแล้ว ต่อไปเราก็จะเขียน CSS เพื่อเอามาประกอบตกแต่งให้สวยงาม ขออนุญาติไม่อธิบายว่าทำไมถึงต้องเขียน XHTML Structure ออกมาเช่นนั้น นะครับเพราะเคยได้อธิบายไว้ในส่วนของ Accessibility แล้วให้ลองอ่านบทความที่เกี่ยวข้องดูนะครับ ทีนี้เรามาเริ่มกันเลยดีกว่า กับ CSS ว่าเราจะเขียนออกมาอย่างไร มาดูวิธีคิดกันก่อน อันดับแรกเลยเราต้องมองหาอะไรที่มันใช้ร่วมกันบ้าง จะได้เขียนรวบไว้ทีเดียวลดความสิ้นเปลือง

จากตัวอย่างนี้ Navigation Bar ถูกออกแบบมาให้มีความสูงเท่ากันที่ 35px เราก็จะได้ height: 35px; เท่ากันแล้วนะครับอันแรก ส่วนกว้างนั้นแปรผันตาม content ของมัน และ เมื่อเขียนแล้วเราไม่ต้องการให้ Bullet ที่เป็นค่า default นั้นแสดงออกมา เพราะฉะนั้นเราก็จะได้ list-style: none; อีกหนึ่งอย่างละ ต่อไปอะไรอีก มันต้องเรียงต่อกันเป็นแนวนอนเพราะฉะนั้นผมจะสั่งให้มัน float: left; มันจะได้ต่อกัน (หรือเปล่า) มาลองดูกันดีกว่าว่าจะเขียนยังไงดี

code css ของผมก็จะออกมาดังนี้:

#mainNavigation {width: 546px; height: 35px; background: #000;}
  #mainNavigation li {list-style: none; float: left;}
  #mainNavigation li a {display: block; text-decoration: none; height: 35px; background-position: 0 0; background-repeat: no-repeat;}
  #mainNavigation li a:hover {background-position: 0 -35px;}
  #mainNavigation li span {visibility: hidden;}
  #mainNavigation li#home a {background-image: url(home.jpg); width: 90px;}
  #mainNavigation li#service a {background-image: url(service.jpg); width: 112px;}
  #mainNavigation li#about-us a {background-image: url(about-us.jpg); width: 107px;}
  #mainNavigation li#work-gallery a {background-image: url(work-gallery.jpg); width: 141px;}
  #mainNavigation li#order a {background-image: url(order.jpg); width: 96px;}

ผมจะรวบทุกอย่างที่ใช้ไว้ด้วยกันก่อนใน 3 บรรทัดแรก ก็คือ ความกว้างทั้งหมด ของ Navigation Bar นี้คือ 546px และสูง 35px ผมก็จะกำหนดคุณสมบัตินี้ไว้ที่ ul เลยเพื่อเป็นกรอบให้ลูก ๆ ของมัน แม้ความจริงภาพที่เราตัดมานั้นมีขนาดความสูงที่ 70px แต่เวลาเราใช้งานจริง เราใช้แค่ 35px เท่านั้น ให้ลองคิดตามดังนี้ คือ 35px ที่อยู่ด้านบนคือตอนที่ยังไม่ถูกเมาส์ Rollover ส่วน 35px ล่างนั้นคือตอนที่ถูกเมาส์ Rollover แล้ว เราก็จะเขียนบอกมันด้วย คำสั่ง background-position ของ CSS สังเกตุดูที่สองบรรทัดนี้ครับ

#mainNavigation li a {display: block; text-decoration: none; height: 35px; background-position: 0 0; background-repeat: no-repeat;}
  #mainNavigation li a:hover {background-position: 0 -35px;}

จะเห็นว่าเมื่อมีเมาส์มา Rollover แล้วผมสั่งให้มันเปลี่ยน position (ตำแหน่ง) ลงไป 35px (ติดลบ 35) นั่นเอง ส่วนคุณสมบัติที่แต่ละตัวมีไม่เหมือนกันผมก็จะแยกออก เช่น รูปภาพที่ต้องดึงมาใช้เป็น background-image ใช้ต่างกัน ความกว้างของปุ่มก็ต่างกัน อีกทั้งยังแต่ละปุ่มนั้นทำหน้าที่เฉพาะตัวของมันอยู่แล้ว เพราะฉะนั้นผมจะเขียนแยกไว้โดยใช้ selector “id” อย่างที่เห็นนี้

#mainNavigation li#home a {background-image: url(home.jpg); width: 90px;}
  #mainNavigation li#service a {background-image: url(service.jpg); width: 112px;}
  #mainNavigation li#about-us a {background-image: url(about-us.jpg); width: 107px;}
  #mainNavigation li#work-gallery a {background-image: url(work-gallery.jpg); width: 141px;}
  #mainNavigation li#order a {background-image: url(order.jpg); width: 96px;}

ทีนี้มาดูเรื่องของ span (สะพาน) ว่าทำไมผมถึงสั่งให้มันไม่แสดงผล แล้วการไม่แสดงผลแบบนี้ผิดหรือไม่ต่อ SEO (ข้อหาจงใจซ่อน content) ตอบว่าไม่ผิดนะครับ content ที่อยู่ใน code และ content ที่ตาของ user เห็นนั้นเป็น content ชนิดเดียวกันถือว่าเราไม่ได้โกหกหลอกลวง หรือ จงใจซ่อนแต่อย่างใด เพียงเพื่อ Accessibility ให้ screen reader เท่านั้นครับ

ส่วนต่อไปอาจจะมีคนสงสัยว่าทำไมต้องกำหนดคุณสมบัติที่สถานะที่มี link อยู่ (li a และ li a:hover) เพราะว่า Navigation นั้นส่วนใหญ่จะเป็น link ไปหาหน้าต่าง ๆ อยู่แล้วเราจึงกำหนด ณ สถานะนั้นเลยครับ แล้วทำไมถึงสั่งให้ a ซึ่งเป็น inline element แสดงผลอออกมาแบบ block element ด้วย เพราะถ้าเราใช้การแสดงผลแบบ inline ปกตินั้น ความกว้าง ความสูงจะไม่เป็นผลกับมันเลย ความกว้างของมันก็จะยึดตามตัวหนังสือของ content ที่ตัวมันนั้นครอบอยู่ เพราะฉะนั้นจึงสั่งให้มันแสดงผลออกมาเป็น block เพื่อที่จะกำหนดการทำงานให้มันแสดงผลได้สวยงามเป็นไปตามที่ต้องการครับ

คุณสามารถชมตัวอย่างที่เสร็จแล้วได้ที่ link นี้ครับ ตัวอย่างที่สำเร็จแล้ว

พบกันใหม่ครั้งหน้าครับ สวัสดี