layui导航栏鼠标经过青色条块怎么移到顶部?
taotaoit Layui 2019-07-10 1927 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

3247347 2173 30
文章标签更多
ThinkPHP (233)
Mysql (44)
DedeCms (33)
jQuery (56)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)

layui导航栏鼠标经过青色条块怎么移到顶部?

layui-nav-bar怎么移到导航栏的顶部?

青色条块其实就是<span class="layui-nav-bar"></span>在鼠标经过时会变成<span class="layui-nav-bar" style="left: 305.875px; top: 111px; width: 0px; opacity: 0;"></span>,所以,如果我们把top:111px变成top:0,青色条块就可以移到顶部了。

图示:

1,菜单栏加载最初状态(浏览器按f12打开调试框),可以看到<span class="layui-nav-bar"></span>在菜单栏最后面

from clipboard

2,鼠标经过菜单,发现变成<span class="layui-nav-bar" style="left: 305.875px; top: 111px; width: 0px; opacity: 0;"></span>,所以我们只需要把top:111px改成top:0,就可以了。由于<span class="layui-nav-bar" style="left: 305.875px; top: 111px; width: 0px; opacity: 0;"></span>是通过js控制实现的,所以我们只需要修改layui\lay\modules\element.js就可以实现了。

from clipboard

3,修改layui\lay\modules\element.js,

搜索top:c.position().top+c.height()-l.height()改为top:0

再次打开浏览器预览,发现条块跑到了顶部。

company下面的条块在底部,怎么回事?这是菜单的选中状态,需要修改css,

打开layui.css,找到.layui-nav .layui-this:after{content:'';top:auto;bottom:0;width:100%}

把top:auto改为top:0就可以了,不要直接修改layui.css,可以自己写css覆盖layui.css的设置,然后就ok了

from clipboard

版权声明:本站原创文章,允许自由转载。

相关推荐
layui垂直导航,鼠标经过去掉左侧的青色条块
Layui | 2019-07-05 6664
打开layui.css找到 .layui-nav-tree .layui-nav-bar{width:5px;height:0;background-color:#009688} 将width:5px改为width:0就可以了
layui栅格如何实现5等分,一行5列
Layui | 2019-07-05 4779
layui栅格如何实现5等分,一行5列? layui 栅格系统是12格的 不能实现5等分,可以自己仿照layui定义css样式 打开laui css查看源码 发现一等分是8.3%   layui是12格的; 所以 实现五等分 12/5*8.3% 就是19.9999992% 5等分,12格,大概每列占比是1...
评论:0条
评论加载中...
发表评论