JS+CSS实现竖直多级菜单

过完春节一直在瞎忙，没有顾得上更新博客。这段时间接触几个外贸网站的制作，其中涉及到一个产品边栏菜单的问题，由于都是采用WORDPRESS架构，所以在使用即有的菜单代码时，需要找到结构比较稳定，不易被破坏，而且便于迁移和重复使用的代码。这里分享一个比较好的JS+CSS竖直多级菜单，演示地址可以看：http://www.wksolar.com，完整的源码请猛击下载。

主要文件有3个，index.html（演示HTML文件）、menuV2.css和menuV2.js。在使用这个代码前先要明确一个事情，你得了解标签的ID是怎么回事。类似如下代码：

<div id="menuV2">BLA BLA..</div>
--------------------------------------
<ul id="menuV2">
<li>AAAA</li>
<li>BBBB</li>
</ul>

ID是HTML标签的唯一标识，在本示例中，菜单的ul标签的id是menuV2。明白以上基本知识后，下面我们要做一件大事，且听我慢慢道来。

通常我们可以在侧边栏自定义菜单，这个菜单当然是可以多级的，但是通常主题并未对侧边栏的菜单作滑动或其它定义处理，所以都是直接显示，如下图所示：

首先我们要获取这个自定义菜单的ul的id，通过右键-查看元素（chrome浏览器）可以看到（譬如说是menu-solar-products）。接下下来按以下步骤进行：

1，进入JS文件，修改2处menuV2，改为menu-solar-products；
2，进入CSS文件，查找所有menuV2，全部改为menu-solar-products；
3，将CSS，JS，图标图片共计5个文件，放在主题的menu-kala目录内；
4，将以下代码加入主题的header.php文件内，

<link href="http://www.xxx.com/wp-content/themes/xxxtheme/menuV2.css" rel="stylesheet" type="text/css" />
<script src="http://www.xxx.com/wp-content/themes/xxxtheme/menuV2.js" type="text/javascript"></script>

5，注意JS文件的第一行，true表示二级菜单与主菜单的位置平行，false表示二菜单以主菜单为原点；
6，JS文件内有一个left单词，如果将其改为right，二级菜单将从主菜单的左边展出；

这样就完成了对侧边栏多级菜单的改造了，如果有疑问欢迎评论提问。