简介
FlexMenu是一个基于jQuery和CSS3的下拉菜单插件。该插件提供了简洁、美观、易用的特性，适用于Web开发者在实现网站或应用程序中的导航菜单。
安装
首先确保您已经安装了Node.js和npm，然后在命令行中输入以下命令来安装flexMenu：
npm install flexmenu --save
如果您使用Yarn，请使用以下命令：
yarn add flexmenu
使用
引入
使用flexMenu之前，需要在HTML文件中引入相关的CSS和JavaScript文件：
<link rel="stylesheet" href="node_modules/flexmenu/dist/flexmenu.css"> <script src="node_modules/jquery/dist/jquery.js"></script> <script src="node_modules/flexmenu/dist/flexmenu.js"></script>
请根据您的项目结构自行修改上述路径。
基本用法
以下是最基本的调用方式：
$('.my-menu').flexMenu();这将会把 my-menu 元素转化为一个下拉式菜单。当该元素内部的宽度不够容纳所有选项时，会自动变成下拉式菜单。默认情况下，仅有一级菜单，点击菜单选项时将打开对应链接。
高级用法
二级菜单
可以通过嵌套 ul 和 li 元素来实现二级菜单：
-- -------------------- ---- -------
--- ----------------
------ ----------------------
----
-- ---------------------
----
------ ---------------- ----------
------ ---------------- ----------
-----
-----
------ -------------- -----------
------ ---------------- -----------
-----然后在JavaScript中调用flexMenu时，指定 showChildren 参数为true，即可显示二级菜单：
$('.my-menu').flexMenu({
showChildren: true
});自定义样式
可以通过传递自定义样式对象来修改菜单的外观：
-- -------------------- ---- -------
------------------------
--------- -----------
----------- ---------------
------------ ------
------------------- --
------------ -----
------------ ------
-------------- -----
--------------- ------------
------------- -
---------- ------
--------------- -------
---------- ----------------
-
---使用事件
可以使用 beforeShow 事件来在展示下拉菜单前执行一些操作，例如：
$('.my-menu').flexMenu({
beforeShow: function() {
console.log("showing menu");
}
});示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
----- ---------------- -----------------------------------------------
-------
------
--- ----------------
------ ----------------------
----
-- ---------------------
----
------ ---------------- ----------
------ ---------------- ----------
-----
-----
------ -------------- -----------
------ ---------------- -----------
-----
------- --------------------------------------------------
------- ------------------------------------------------------
--------
------------ -
------------------------
------------- -----
------------- -
---------- --------
--------------- --------
--
------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------