最新消息:为了本站的未来,希望大家能广为分享,另期待您投稿外贸人建站QQ交流群:201706683,验证请输入:卡拉科技

JS+CSS实现竖直多级菜单

外贸&其它 Tony 2528浏览 0评论

过完春节一直在瞎忙,没有顾得上更新博客。这段时间接触几个外贸网站的制作,其中涉及到一个产品边栏菜单的问题,由于都是采用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。明白以上基本知识后,下面我们要做一件大事,且听我慢慢道来。

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

2014-04-04 22-31-24

首先我们要获取这个自定义菜单的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,二级菜单将从主菜单的左边展出;

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

转载请注明:卡拉科技 » JS+CSS实现竖直多级菜单

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. 请问版主,如何改变此菜单的背景色和文字颜色,需要添加什么样的代码
    卡拉不卡3年前 (2014-05-01)回复
    • 这个就很简单了,在本示例中,菜单用了图片背景。至于文字的样式,写一个CSS代码就搞定了。如果不懂CSS,先学习一下吧。http://pic.kalated.com/wp-content/uploads/2013/12/css3.zip
      Tony3年前 (2014-05-02)回复