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

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

WordPress插件 Tony 730浏览 0评论

在做企业站时,如果产品分类比较多,且有一级分类、二级分类和三级分类等。通常我们是将这些分类作为侧边栏,直接堆砌是不行的,所以我们要做折叠效果,或者弹出效果。我们可以看图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;}
/*边栏产品菜单*/

转载请注明:卡拉科技 » 使用Superfish插件做弹出菜单效果

发表我的评论
取消评论

表情

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

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