纯CSS实现树状结构导航，纯CSS折叠菜单，简单粗暴，就是这么强大

2021-04-06 11:28

阅读：589

YPE html>

标签：col round query 服务 out details last help XML

在对网站进行mip改造的时候，使用百度的导航组件，很难有较好的展现形式。

百度又不允许自定义JS，所以，考虑增加CSS（是在百度组件的基础上增加JS），用css补充实现点击功能，实现精美的导航。

最终结果是为了实现以下三个样式

1.未展开状态

技术图片

2.展开状态，有二级导航的，要出现+号

技术图片

3.点击+号能展开二级菜单

技术图片

参考以下树状CSS的设计思路,主要是使用 html5的 details summary标签，注意看注释

演示图如下

技术图片

代码如下

纯CSS样式控制折叠展开菜单效果特效演示洋魔坊保障

正品保障
                    海外直供
                
新手帮助

申请支付宝
                    支付宝充值
                
支付方式

支付宝快捷支付
                    支付宝余额支付
                    新手入门
                
商家支持

洋魔坊规则
                    国际招商
                    服务商招募
                    商家系统对接
                    联系我们

　　大家，赋值上面的代码，直接一个页面，不需要任何JS，就可以实现折叠二级菜单，甚至是多级菜单的效果了。

赶快自己动手吧。我的百度mip改造，遇到这个导航的问题就要搞定了。

纯CSS实现树状结构导航，纯CSS折叠菜单，简单粗暴，就是这么强大

标签：col round query 服务 out details last help XML

原文地址：https://www.cnblogs.com/cn-oldboy/p/12495825.html

上一篇：php性能测试

下一篇：tensorflow-eagerAPI

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：纯CSS实现树状结构导航，纯CSS折叠菜单，简单粗暴，就是这么强大
文章链接：http://soscw.com/index.php/essay/72050.html

亲，登录后才可以留言！

纯CSS实现树状结构导航，纯CSS折叠菜单，简单粗暴，就是这么强大

评论

热门文章

推荐文章

最新文章

置顶文章