การสร้างเมนูที่แตกต่างอย่างสร้างสรรค์ในบางครั้งอาจเป็นเรื่องยากเมื่อคุณไม่มีความคิดหรือแรงบันดาลใจดีๆ แต่เรื่องแบบนี้สามารถแก้ไขได้ด้วยการค้นหาการออกแบบเมนูสร้างแรงบันดาลใจอื่นๆ หรือด้วยเครื่องมือช่วย ในเรื่องนี้ jQuery.Mmenu มาเป็นเครื่องมือที่ค่อนข้างสะดวก

jQuery.Mmenu เป็นปลั๊กอิน jQuery ที่ใช้งานง่ายสำหรับการสร้างเมนูการนำทางแบบเลื่อนแอปมือถือในเว็บไซต์ของคุณ เมนูสร้างสรรค์ที่ลื่นไหลนี้จะทำให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้นและสวยงามยิ่งขึ้น

เริ่มต้น

เพื่อเริ่มต้นกับ jQuery.Mmenuตรงไปที่หน้าดาวน์โหลดและปลั๊กอินจะถูกดาวน์โหลดโดยอัตโนมัติ ในโพสต์นี้เราจะพยายามสร้างเมนูพื้นฐาน

เช่นเดียวกับปลั๊กอิน jQuery อื่น ๆ หากต้องการใช้สิ่งนี้ คุณต้องรวมการพึ่งพาที่จำเป็นในไซต์ของคุณ นั่นคือ jQuery, jquery.mmenu.js และ jquery.mmenu.css. ข้อมูลโค้ดมีดังนี้:

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

และนั่นก็เพียงพอแล้วสำหรับการสร้างเมนูพื้นฐานพร้อมฟังก์ชันและสไตล์ทั้งหมด สำหรับคุณสมบัติขั้นสูงและพิเศษเพิ่มเติม คุณต้องรวมไฟล์ JS และ CSS เพิ่มเติม

การสร้าง A Menu

มาสร้างเมนูพื้นฐานกันตามที่คุณมักจะสร้างด้วย nav, ul, li และ a องค์ประกอบ ในการสาธิตนี้ เราจะสร้างเมนูแนวนอนที่มีสามเมนูย่อยและสามเมนูย่อยเช่นกัน

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

ในเมนูด้านบน เราได้รวม nav ด้วย ID เมนู ซึ่งจะใช้เป็นการอ้างอิงฟังก์ชัน jQuery.mmenu แล้วเรียก plugin กับ javascript ฟังก์ชั่นและรวม id เช่นนั้น

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

ในแท็ก LI คุณจะเห็นคลาสชื่อ Selectedคลาสนี้มีประโยชน์ในการสร้างเมนูที่เลือกเริ่มต้นเมื่อเริ่มต้น คุณสามารถเพิ่มชั้นเรียนของคุณเองได้ (เช่น active) แต่อย่าลืมรวมไว้ในส่วนการกำหนดค่าด้วย

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

ปลั๊กอินนี้ได้เพิ่มลิงก์ปิดและเปิดเมนูย่อยโดยอัตโนมัติ ดังนั้นเราจึงไม่จำเป็นต้องสร้างมันขึ้นมา เมนูของเราจะหน้าตาประมาณนี้

บทสรุป

jQuery.mmenu นำเสนอโซลูชันที่ยอดเยี่ยมในการสร้างเมนูต่างๆ ให้ง่ายที่สุด คุณยังสามารถสร้างองค์ประกอบเชิงโต้ตอบอื่นๆ ที่ปลั๊กอินนี้ ตัวอย่างเช่น คุณสามารถสร้างคำแนะนำเครื่องมือแบบเลื่อนและแถบการแจ้งเตือนสำหรับไซต์บนมือถือ

jQuery.Mmenu ปรับแต่งการใช้งานล่วงหน้าได้เช่นกัน ตัวอย่างเช่น คุณสามารถสร้างรายชื่อผู้ติดต่อแบบมือถือในไซต์ของคุณโดยการรวมธีมส่วนขยาย, ส่วนเสริม (ป้ายกำกับ, ตัวนับ, ส่วนหัว, dragOpen และช่องค้นหา) และการจัดตำแหน่ง

หากคุณพบบทความ การสร้างเมนูแบบเลื่อนอย่างง่ายดายโดยใช้ jQuery.mmenu มีประโยชน์โปรดแบ่งปันกับเพื่อนของคุณ เจอกันใหม่กระทู้หน้าครับ ติดตาม driveria.net เพื่อรับข่าวสารล่าสุด!