为二级菜单的父级添加三角箭头 —— 这个效果老早就想折腾了,之前没有学jQuery,现在会一点,实现起来也很简单。
比如WP的某些菜单是有二级下拉菜单的,这时最好给这些菜单加一个指示箭头,让访客知道这个菜单下还有下拉二级菜单,体验较好。
这个箭头主要附加在父级菜单的a标签上,用在li上也可以,但不好调整,也就是用到简单的节点定位和伪类after,下面是代码
JS代码
$(function() { // 子菜单父级三角箭头 $('.nav').find('.dropdown-menu').siblings('a').addClass('arrow'); //.dropdown-menu是二级菜单的类 });
CSS代码
.arrow:after{font-family:'FontAwesome';content:"\f0dd";display:inline-block;color:#fff;float:none;position:relative;top:-3px;left:4px;}
这里用到FontAwesome字体图标,可以从网上下载。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4314.html