Multi Drop Down Menu รูปแบบใหม่

Muti Dropdown menu

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

เมื่อสนใจอยากติดตั้งในบล็อกของคุณบ้างก็ ดำเนินการต่อกันเลยครับ

วิธีติดตั้ง
การติดตั้งผมก็จะแบ่งออกเป็น 3 ส่วนคล้ายกับ trick อื่น ๆ ที่ได้นำเสนอ คือ

CSS code + Java Script + HTML code

Log in เข้าไปที่บล็อกของคุณ >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องคลิกขยายแม่แบบเครื่องมือ

สอนทำ blogger

ขั้นที่ 1 CSS

ค้นหาโค้ด ]]></b:skin> แล้ววาง CSS โค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

ul.menunew {font-family:Verdana, Arial, Helvetica, sans-serif;list-style:none; margin:0; padding:0}
ul.menunew * {margin:0; padding:0}
ul.menunew a {display:block; color:#000; text-decoration:none}
ul.menunew li {position:relative; float:left; margin-right:2px}
ul.menunew ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menunew ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menunew ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menunew ul li a:hover {background-color:#c5c5c5}
ul.menunew ul ul {left:148px; top:-1px}
ul.menunew .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(>http://3.bp.blogspot.com/_4fVBL4fjrFI/SbezNy2ao1I/AAAAAAAACuU/JqDnhT2GDe4/s1600/header.gif); width:134px /*width:auto*/}
ul.menunew .menulink:hover, ul.menunew .menuhover {background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SbezPOVoJ2I/AAAAAAAACuc/mplUEobDZlw/s1600/header_over.gif)}
ul.menunew .sub {background:#d1d1d1 url(http://1.bp.blogspot.com/_4fVBL4fjrFI/SbezNihl_uI/AAAAAAAACuM/cFp8PsqbyhQ/s1600/arrow.gif) 136px 8px no-repeat}
ul.menunew .topline {border-top:1px solid #aaa}


โค้ดสีแดงก็คือความกว้างของเมนูข้างบน

ถ้าใช้ width:134px ความกว้างก็จะคงตัวที่ 134 px
แต่ถ้าจะใช้ แบบ width:auto ก็ให้ลบ width:134 px และ เครื่องหมาย /*   */ ที่ปิดหน้า ปิดหลังอยู่ออกไปด้วยครับ


ขั้นที่ 2  ติดตั้ง JAVA script โดย

ค้นหาโค้ด </head> แล้ว วางโค้ดต่อไปนี้ไว้ก่อนหน้า

<script type="text/javascript" src="http://hackublog.bravehost.com/DDM_script.js" />

ท่านใดต้องการ upload สคริปต์นี้ขึ้น Server ของตนเองก็ดาวน์โหลดได้  >> ที่นี่ครับ
ส่วนวิธี upload จาวาสคริปต์ สามารถศึกษาได้ ที่นี่  และ ที่นี่


ขั้นที่ 3  HTML

เมนูชนิดนี้สามารถที่จะติดตั้งได้หลายตำแหน่งซึ่งขึ้นอยู่กับเราจะพลิกแพลงครับ เช่น ติดตั้งที่ใต้ส่วนหัว หรือติดตั้งที่ sidebar หรือติดตั้งที่ footer เป็นต้น

ในที่นี้ขอแนะนำการติดตั้งที่ส่วนหัว(ส่วนกรณีอื่น ๆ ให้ถามผมมาอีกทีนะครับ เพราะไม่อยากให้สับสน)

ให้ค้นหาโค้ด
<div id='container'>
หรือ 
<div id='content-wrapper'>
หรือ
<div id='main-wrapper'>
ซึ่งขึ้นอยู่กับแต่ละ Template เมื่อพบแล้วให้ทำการวาง HTML โค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

<!--Multi Dropdown Edit by Hackublog start-->
<ul class="menunew" id="menu">
<li><a href="#" class="menulink">Dropdown 1</a>
      <ul>
       <li><a href="#">Dropdown 1.1</a></li>
       <li>
       <a href="#" class="sub">Dropdown 1.2</a>

             <ul>
             <li class="topline"><a href="#">Dropdown 1.2.1</a></li>
             <li><a href="#">Dropdown 1.2.2</a></li>
             <li><a href="#">Dropdown 1.2.3</a></li>
             <li><a href="#">Dropdown 1.2.4</a></li>
             <li><a href="#">Dropdown 1.2.5</a></li>
             </ul>
              </li>

         <li>
         <a href="#" class="sub">Dropdown 1.3</a>

             <ul>
             <li class="topline"><a href="#">Dropdown 1.3.1</a></li>
             <li><a href="#">Dropdown 1.3.2</a></li>
             <li>
             <a href="#" class="sub">Dropdown 1.3.3</a>

                   <ul>
                   <li class="topline"><a href="#">Dropdown 1.3.3.1</a></li>
                   <li><a href="#">Dropdown 1.3.3.2</a></li>
                    <li><a href="#">Dropdown 1.3.3.3</a></li>
                    <li><a href="#">Dropdown 1.3.3.4</a></li>
                    <li><a href="#">Dropdown 1.3.3.5</a></li>
                    <li><a href="#">Dropdown 1.3.3.6</a></li>
                    </ul>

             </li>
              <li><a href="#">Dropdown 1.3.4</a></li>
             </ul>

         </li>
          <li><a href="#">Dropdown 1.4</a></li>
          <li><a href="#">Dropdown 1.5</a></li>
         </ul>

</li>



<li><a href="http://hackublog.blogspot.com/" class="menulink">Hackublog</a></li>



<li>
<a href="#" class="menulink">Dropdown 2</a>
     <ul>
      <li><a href="#">Dropdown 2.1</a></li>
      <li>
      <a href="#" class="sub">Dropdown 2.2</a>

            <ul>
            <li class="topline"><a href="#">Dropdown 2.2.1</a></li>
            <li><a href="#">Dropdown 2.2.2</a></li>
            <li><a href="#">Dropdown 2.2.3</a></li>
            </ul>

      </li>
      </ul>

</li>



<li>
<a href="#" class="menulink">Dropdown 3</a>

      <ul>
      <li><a href="#">Dropdown 3.1</a></li>
      <li><a href="#">Dropdown 3.2</a></li>
      <li><a href="#">Dropdown 3.3</a></li>
      <li><a href="#">Dropdown 3.4</a></li>
      <li><a href="#">Dropdown 3.5</a></li>
      <li>
      <a href="#" class="sub">Dropdown 3.6</a>

           <ul>
           <li class="topline"><a href="#">Dropdown 3.6.1</a></li>
           <li><a href="#">Dropdown 3.6.2</a></li>
           </ul>

      </li>
      <li><a href="#">Dropdown 3.7</a></li>
      <li><a href="#">Dropdown 3.8</a></li>
      <li><a href="#">Dropdown 3.9</a></li>
      <li><a href="#">Dropdown 3.10</a></li>
      </ul>

</li>


</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
<!--Multi Dropdown stop-->


แนวการแก้ไขเมนู
การใส่ Link ให้แทนที่เครื่องหมาย # ในโค้ด href="#"
การใส่ชื่อหรือเปลี่ยนชื่อเมนู ให้แก้ไขคำว่า Dropdown xx เป็นคำที่คุณต้องการ เช่น

โค้ด
<a href="#" class="menulink">Dropdown 2</a>
<ul>
<li><a href="#">Dropdown 2.1</a></li>

อาจจะแก้เป็น
<a href="#" class="menulink">My Friends</a>
<ul>
<li><a href="http://www.hackublog.com">Hackublog</a></li>
เป็นต้น

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

หากมีข้อสงสัยอย่างไรสบถามเพิ่มเติมได้ที่กล่อง ความคิดเห็นด้านล่างนะครับผม

Cradit : leigeber.com
Transfrom to blogger by : Hackublog

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

  1. หวัดดีค่ะ ไม่ทราบจริงว่าจะทำไงกับ ดร้อบ ดาว ค่ะ เริ่มตรงไหนคะ ขอบพระคุณที่ให้ความรู้ ขอให้โชคดีค่ะ

  1. @myredhero
    1. คำว่า Dropdown มันเป็นชื่อเรียกเมนูบองเว็บ ที่มีลักษณะห้อยลงเหมือนบล็อกของผม (ด้านบนครับ)

    2. ตอนนี้ในบล็อกของคุณติดตั้งไปแล้ว ที่เหลือคือการแก้ไข โดยการใส่ Link เชื่อมโยงลงไป

    3. Link ที่จะใส่คือ URL ของปลายทางที่ต้อการไปเช่น ถ้าลิงค์มายังบทความนี้ Link ก็คือ
    http://www.hackublog.com/2010/01/multi-drop-down-menu.html
    ซึ่งวิธีใส่ผมได้ยกตัวอย่างไว้ในขั้นที่ 3 ของบทความนี้ครับ

    เอาแค่นี้ก่อนนะครับ สงสัยก็ค่อย ๆ ถามมาอีกครับ
    และผมอยากให้อ่านวิธีติดตั้งในขั้นที่ 3 อีกครั้งครับ

  1. จะลบ drop down กับ sub menu ที่เกินจำเป็นยังไงครับ

    ขอบคุณครับ

  1. @koknam: ลบโค้ดในขั้นที่ 3 ครับ
    ลบโค้ดสีดำ สีน้ำเงิน หรือสีเขียว (ที่ต้องการโดยดูจากตัวเลข) และลบตั้งแต่โค้ด <li>................จนถึง..................</li> ที่มีสีเดียวกัน

  1. ผมโค้ต ในขั้นที่ 3 ไม่เจอ ไม่แน่ใจว่า เทมเพลต ที่ผมใช้ ไม่มีหัวข้อนี้หรือป่าว
    แก้ไขยังไงครับ อยากมีดรอปดาวน์ใช้อ่ะ

    honey.kan@hotmail.com ตอบทางเมลล์ด้วยก็ดีนะครับ ขอบคุณล่วงหน้าครับ

  1. ผมหา Code ในขั้นที่ 3 ไม่เจอ ไม่แน่ใจว่า เทมเพลต ที่ผมใช้ ไม่มีหัวข้อนี้หรือป่าว
    แก้ไขยังไงครับ อยากมีดรอปดาวน์ใช้อ่ะครับ เพิ่มเติม

  1. หาโคด ในข้อ 3 ไม่เจอ ครับ
    div id='container'

    div id='content-wrapper'


    div id='main-wrapper'

  1. ผมหา Code ในขั้นที่ 3 ไม่เจอ เทมเพลตที่ใช้เป็น เทมเพลตแบบง่ายที่มีให้เลือกใน blogspot ยังไงขอคำแนะนำด้วยนะครับ

    ขอบคุณครับ

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

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

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