วิธีสร้าง scroll bar เมนู

             

 

สวัสดีอีกครั้งนะครับ หลังจากที่ได้แนะนำ การสร้าง drop down เมนู ไปแล้ว วันนี้ผมยังมีวิธีทำเมนูอีกแบบหนึ่งซึ่งทำได้ไม่ยาก ก็คือ scrool bar เมนู

 

 

2009-10-01_193539

 

scrool bar เมนู เป็นเมนูที่เหมาะสำหรับ list รายการที่มีความยาวมากๆ เพื่อเป็นการประหยัดเนื้อที่หน้าบล็อกของเรา

 

วิธีการสร้าง

 

ขั้นที่ 1 ไปที่ แผงควบคุม  >> องค์ประกอบของหน้า >> เพิ่ม Gadget ชนิด HTML/javacript

 

ขั้นที่ 2 วางโค้ดนี้ลงไปแก้ไขตรงอักษรสีแดงแล้ว บันทึก

 

<div class="widget-content">
<ul style="height:400px;width:180px; overflow:auto; ">
<li><a href=" Ur Address ">LINK </a></li>
<li><a href=" Ur Address ">LINK 2</a></li>
<li><a href=" Ur Address ">LINK 3</a></li>
<li><a href=" Ur Address ">LINK 4</a></li>
<li><a href=" Ur Address ">LINK 5</a></li>
<li><a href=" Ur Address ">LINK 6</a></li>
</ul></div>

อธิบาย:
  • ตัวเลข 400 และ 180 คือความกว้างยาวสามารถปรับเปลี่ยนได้
  • เราสามารถเพิ่ม/ลบ บรรทัด <li><a href=" ใส่ลิงค์ ">ใส่ชื่อ<a></li> เท่ากับจำนวนลิงค์ที่เราต้องการได้เลยครับ

และถ้าต้องการคลิกลิงค์แล้วเปิดในหน้าต่างใหม่ก็ให้ใช้โค้ดชุดด้านล่างนี้ครับ

 

 

<div class="widget-content">
<ul style="height:400px;width:180px; overflow:auto; ">
<li><a href=" Ur Address "  target="_blank">LINK 1</a></li>
<li><a href=" Ur Address "  target="_blank">LINK 2</a></li>
<li><a href=" Ur Address "  target="_blank">LINK 3</a></li>
<li><a href=" Ur Address "  target="_blank">LINK 4</a></li>
<li><a href=" Ur Address "  target="_blank">LINK 5</a></li>
<li><a href=" Ur Address "  target="_blank">LINK 6</a></li>
</ul></div>

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

  1. ถ้าผมต้องการเส้นใต้ด้วยล่ะครับต้องเพิ่มโค๊ดตัวไหนบ้างครับ

  1. ทำแล้วแต่ไม่เห็นมีที่เลื่อนเลยคะ มีแต่ลิ้ง

    ขอบคุนมากๆๆเรยคะ

  1. @Kwanruan : มันจะปรากฎ bar สำหรับเลื่อนกรณีที่ลิงคืหลายบรรทัดและสูงเกินกว่าที่เรากำหนดไว้ครับ

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

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

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