jQuery.mmenu.js 是一個基于 jQuery 的高度靈活的響應式菜單插件,可以輕松地快速創建基于原生 HTML 的、可訪問的和美觀的移動端和桌面端菜單。
下面是一個簡單的使用 jquery.mmenu.js 插件的示例代碼:
<!DOCTYPE html> <html> <head> <title>jQuery.mmenu.js Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="jquery.mmenu.all.css"> <script src="jquery-3.6.0.min.js"></script> <script src="jquery.mmenu.all.min.js"></script> </head> <body> <nav id="my-menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <script> $(document).ready(function() { $("#my-menu").mmenu({ extensions: ["fullscreen", "theme-white", "position-right"], navbar: { title: "Menu" } }); }); </script> </body> </html>
上面的代碼中,首先引入必須的 CSS 文件和 jQuery.js 和 jquery.mmenu.min.js 文件。然后,在 body 標簽中創建一個 nav 標簽,并在其中添加一個 ul 標簽,定義菜單的內容。接下來,使用 jQuery 代碼初始化菜單,通過傳遞一些選項參數來設置菜單的樣式和功能,最后讓菜單被創建。