CSS Horizontal Menu for Google Sites

ใช้ความพยายามมาเกือบ 1 วัน กว่าจะรู้ว่า เอ เราจะสร้างเมนูสวยๆ แบบแนวนอน (Herizone) บนส่วนหัวของ Google Sites ได้อย่างไร พยายามศึกษาหา Java Script ก็รู้สึกยากเกินไป กลับไปใช้ Firework หรือ Dreamweaver ก็ดูจะลืมไปแล้ว ก็นึกได้ว่ามีคนถามเรือง CSS

ผลก็เลยได้เมนูเล็กๆ อย่างข้างบนนี้ เพียงแต่ใช้เว็บไซต์ที่เข้าให้บริการสร้างเมนูเข้ามาช่วย วิธีการค่อนข้างเยอะ แม้ความจริงจะทำไม่ยากเท่าไหร่

ท่านที่สนใจโปรดติดตาม และอดใจรอสักเล็กน้อย(รอ..อีกแล้ว)

หลักการ :

1. สร้างเมนูขึ้นมาก่อนโดยใช้โปรแกรมสร้างเว็บ เช่น Dreamweaver หรือเขียนด้วย Note Pad ก็ได้ หากต้องการใช้ CSS ก็เขียนขั้นโดยใช้หลักการเขียน CSS ซึ่งศึกษาได้จากเว็บไซต์สอนทำ CSS ทั่วไป หรือแนะนำให้ใช้เว็บไซต์ http://www.cssmenubuilder.com/ ช่วยสร้างก็ได้

2. นำโค๊ดที่สร้างจากข้อ 1. มาสร้างเป็น Google Gadget โดยใช้ Gadget Editor ของกูลเกิล (ดูการสร้าง Gadget)

3. หากใช้ภาพประกอบในการสร้างเมนู ให้ Upload ภาพประกอบนั้นไปเก็บไว้บน Server หรือใน Google Sites แล้วนำ URL เต็ม ของภาพใส่ในโค๊ตในข้อ 1.

4. แทรก Gadget ลงใน Google Sites ณ ตำแหน่งที่ต้องการ

ตัวอย่าง 1.

สร้างเมนูด้วยเว็บไซต์ อธิบายคร่าวๆ ดังนี้

1.1 http://www.cssmenubuilder.com/ คลิกที่ Build Herizontal Menu

1.2 เลือกภาพรูปแบบที่ต้องการ

1.3 เลือกสีพื้น สีตัวอักษร สีตอนลากเม้าส์ผ่าน ฯลฯ

1.4 สร้างลิงก์

1.5 ดาวน์โหลดไฟล์ไปใช้ต่อไป (หรือคุณจะ Copy โค๊ดไปใช้ได้เลย)