สร้าง Fixed Component บนหน้า Page ด้วย CSS

2 Aug

Screen Shot 2558-08-02 at 12.26.05 PM

ต้องการสร้างเมนูสำหรับการสลับภาษาไทยไปมาระหว่าง อังกฤษ-ไทย-ลาว-เขมร โดยใช้ความสามารถในการแปลงภาษาบนหน้าเว็บเพจของ Google Translate API

แต่ส่ิงที่ยากที่สุดสำหรับการทำงานนี้คือการออกแบบ ว่าจะออกแบบอย่างไรให้ผู้ใช้งานรู้สึกง่ายในการเปลี่ยนภาษาสลับไปมา โจทย์ที่สำคัญที่สุดคือเมนูสำหรับการสลับเปลี่ยนภาษานั้นจะต้องเป็นจุดเด่นพอสมควร และง่ายค่อการคลิ๊กอีกด้วย เพราะผู้ใช้งานแต่ละคนจะมีประสบการณ์ใช้งานที่แตกต่างกัน

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

ดังนั้นการเลือกเมนูส่วนนี้ให้เป็น Fixed Componet บนหน้าเว็บเพจ น่าจะดูดีที่สุด

สำหรับการสร้าง Fixed Component นี้ ปัจจุบันเราสามารถใช้เทคนิคของ CSS เข้ามาช่วยได้ง่ายขึ้น โดย CSS ที่ใช้มีดังนี้

#glt-translate-trigger .gtranslate-label {
    font-family: thaisans_neueregular,sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

#glt-translate-trigger {
    background: rgba(0, 0, 0, 0) url("../images/slide-bg.png") repeat scroll 0 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    bottom: 0;
    box-sizing: content-box!important;
    padding: 10px 20px 3px;
    position: fixed;
    right: 20px;
    text-align: center;
    text-decoration: none;
    top: auto;
    z-index: 200002;
}

สำหรับ Code CSS ด้านบนนี้น่าจะเป็นโครงหลักๆ สำหรับเอาไปประยุกต์กับงานอื่นๆ ได้อย่างหลากหลายต่อๆ ไปครับ

Social Comments

Loading Disqus Comments ...
Loading Facebook Comments ...