使用Superfish插件做弹出菜单效果

在做企业站时,如果产品分类比较多,且有一级分类、二级分类和三级分类等。通常我们是将这些分类作为侧边栏,直接堆砌是不行的,所以我们要做折叠效果,或者弹出效果。我们可以看图1和图2动画。

折叠效果
图1:折叠效果
弹出效果
图2:弹出效果

经过在MODERNIZE和GOOD SPACE里测试完全OK,注意以上两种效果是针对侧边栏的自定义菜单来的,不是针对主菜单。在页面边栏设置好菜单后,安装superfish插件并启用,就可以看到图1的效果。

如果想达到图2的效果,还需要添加一些CSS,将以下CSS添加在子主题的style.css里即可。注意下载此小图片,并把以下的代码图片路径替换掉。

/*边栏产品菜单*/
div.custom-sidebar ul li ul.sub-menu { background: #FFF; border: 1px solid #ECECEC; left: 220px; border-left: none; display: none; position: absolute; top: -5px; z-index: 99999; width: 90%;}
div.custom-sidebar ul li { position: relative;}
div.custom-sidebar ul li.menu-item-has-children { background: url(图片路径/arrow4-on.png) no-repeat left;}
/*边栏产品菜单*/

发表评论

电子邮件地址不会被公开。 必填项已用*标注