过完春节一直在瞎忙,没有顾得上更新博客。这段时间接触几个外贸网站的制作,其中涉及到一个产品边栏菜单的问题,由于都是采用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,二级菜单将从主菜单的左边展出;
这样就完成了对侧边栏多级菜单的改造了,如果有疑问欢迎评论提问。
请问版主,如何改变此菜单的背景色和文字颜色,需要添加什么样的代码
这个就很简单了,在本示例中,菜单用了图片背景。至于文字的样式,写一个CSS代码就搞定了。如果不懂CSS,先学习一下吧。http://pic.kalated.com/wp-content/uploads/2013/12/css3.zip