B2主题的菜单样式

有一说一,B2主题的菜单样式确实有点欠缺了,估计好多B2主题用户也不太喜欢,今天给改了改,自我感觉良好哈。

下面是效果图:

说明

加了个边框修饰,和三种颜色圆点,另外加了个上滑的动画效果,感觉丝滑多了。

不过这个菜单美化仅适用于第一种菜单形式,其他的以后再改吧。

美化代码:

/** B2主题B2主题菜单样式美化代码* 整理 www.nuandao.cn*/#nuandao .top-menu ul li.depth-0 > a {color: #fff;padding: 18px 30px;} #nuandao .has_children .sub-menu {border-radius: 4px;}#nuandao .top-menu .b2-jt-down {display: none!important;}#nuandao .top-menu-ul .sub-menu-0 {border-top: 0;padding: 15px;transform: translateY(10px);transition: all .3s;}#nuandao .top-menu ul li {}#nuandao .top-menu ul li:hover .sub-menu-0 {transform: translateY(0);}#nuandao .top-menu-ul .sub-menu-0>li {border-left: 1px solid #ebeef5;position: relative;}#nuandao .b2-menu-3 .sub-menu-0>li>a {color: #4c4c4c;padding: 8px 15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}#nuandao .b2-menu-3 .sub-menu-0>li:after {content: '';position: absolute;top: 12px;left: -5px;width: 3px;height: 3px;border-radius: 50%;background: #fff;border: 3px solid #3d7eff;}#nuandao .b2-menu-3 .sub-menu-0>li:nth-child(2n+1):after{border: 3px solid #f1787f;}#nuandao .b2-menu-3 .sub-menu-0>li:nth-child(3n+1):after{border: 3px solid #61e1b9}#nuandao .b2-menu-3 .sub-menu-0>li>a:hover {background: #ebeef5;}#nuandao .b2-menu-3 .sub-menu-0 > li:hover > a, .b2-menu-3 .sub-menu-0 a:hover {color: #333;}

人已赞赏

相关文章

建站相关

BBR Plus一键安装脚本 BBR/BBR Plus/魔改BBR/锐速(LotServer)四合一

2020-5-9 22:56:00

Css

CSS 实现新拟态(Neumorphism) UI 风格

2020-11-14 18:31:46

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索