การสร้าง drop down เมนูง่าย ๆ ไว้ใช้เอง

drop down เมนูเป็นเมนูที่ใช่ในกรณีที่ต้องการประหยัดเนื้อที่ของหน้าบล็อก ซึ่งถ้านึกภาพไม่ออกหน้าตาจะเป็นแบบนี้ครับ

สอนสร้าง blogger

วิธีการสร้างก็ไม่ยากครับ ใช้โค้ดด้านล่างนี้ได้เลยครับ

<select onchange="document.location.href=this.options[this.selectedIndex].value;">
<option selected value="0"/>ใส่ข้อความที่แสดงเมื่อยังไม่คลิกที่นี่
<option value="ใส่ลิงค์ที่ต้องการ"/>ใส่ข้อความที่1
<option value="ใส่ลิงค์ที่ต้องการ"/>ใส่ข้อความ 2
</select>



เรายังสามารถเพิ่มเมนูได้โดยการเพิ่มโค้ดด้านล่างนี้ตามความต้องการได้เลยครับ

<option value="ใส่ลิงค์ที่ต้องการ"/>ใส่ข้อความที่…


และเมื่อสร้างโค้ดเสร็จแล้วต้องการวางไว้ในองค์ประกอบของหน้า

ให้ไปที่ แผงควบคุม  >> องค์ประกอบของหน้า >> เพิ่ม Gadget  ชนิด HTML/จาวาสคริปต์ แล้ววางโค้ดที่เราสร้างไว้ข้างต้นลงไป และบันทึกครับ

สอนทำบล็อก

ตัวอย่าง drop down เมนู








ในกรณีที่ต้องการกำหนดความกว้างแบบตายตัว (หมายถึง ความกว้างจะไม่ยืดหยุ่นตามความยาวของข้อความ) ก็สามารถทำได้โดยการกำหนด CSS เข้ามาช่วยดังนี้

1. ให้สร้าง class กำหนดความกว้างขึ้นมาโดย

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว

.hackublogdropdown{width:250 px;} /* ตัวเลข 250 เพิ่มหรือลดได้ตามต้องการ*/

จากนั้นทำการบันทึกแม่แบบ

2. การติดตั้ง code เมนู Dropdown ให้ทำเช่นเดียวกับที่กล่าวมาแล้ว แต่ให้แก้ไขโค้ด โดยเพิ่ม class='hackublogdropdown' ลงไปในแท็ก select ซึ่งจะได้โค้ดเป็น

<select class='hackublogdropdown' onchange="document.location.href=this.options[this.selectedIndex].value;">
<option selected value="0"/>ใส่ข้อความที่แสดงเมื่อยังไม่คลิกที่นี่
<option value="ใส่ลิงค์ที่ต้องการ"/>ใส่ข้อความที่1
<option value="ใส่ลิงค์ที่ต้องการ"/>ใส่ข้อความ 2
</select>


และนี่คือตัวอย่างเมื่อมีการกำหนดความกว้างเป็น 400 px


ตอนนี้มีความคิดเห็น : 3 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. จะทำยังไงให้มันเปิดแท็บใหม่เวลาคลิกจาก dropdown อ่ะคับ เพราะลองทำดูแล้วมันใช้หน้าเดิมเลยอ่ะคับ แบบอยากให้หน้าหลักยังอยู่อ่ะคับ

  1. ขอบคุณครับ

  1. Unknown(Google)

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel