为二级菜单的父级添加下拉css三角箭号

自己折腾主题,难免会遇到很多细节问题,找到方法,根据自己的主题需求修改,边学边用,主题这东西,折腾无止境,就像穿衣服一样,总要换换,这次是在PC端菜单和手机端菜单增加下拉三角css箭号。

虽然可以直接使用CSS实现,但是并不完美,会造成鼠标放在菜单下方就自动触发下拉菜单。

第一种方法,比较简单,直接插入,不受菜单css影响:

菜单html代码:

<nav>
<ul id="#menu-caidan">
<li><a href="#">导航菜单1</a></li>
<li><a href="#">导航菜单2</a>
<ul class=“sub-menu”>
<li><a href="#">二级菜单1/a></li>
<li><a href="#">二级菜单1</a></li>
</ul>
</li>
</ul>
</nav>

jQuery代码

<script>
$(function() {
$("#menu-caidan").find(".sub-menu").siblings("a").addClass("triangle");
});
</script>

CSS代码:

.triangle:after {
position: relative;
top: 13px;
right: -5px;
width: 0;
height: 0;
content: '';
border-top: 5px solid #999;
border-right: 5px dashed transparent;
border-left: 5px dashed transparent;
}

第二种方法,纯css实现,只限wordpress,并且这种方法需要你的菜单css适应:

#nav .menu li.menu-item-has-children:after{
position: absolute;
position: relative;
top: 13px;
right: -5px;
width: 0;
height: 0;
content: '';
border-top: 5px solid #999;
border-right: 5px dashed transparent;
border-left: 5px dashed transparent;
}

不知道为什么,我也非这类专业,即使不会,即使很繁琐,但就是喜欢折腾这些,乐此不彼,这东西为何有如此魔力,能让我折腾十多年,就是拥有个人网站以后,就喜欢搭理自己的老窝。

目前还没找到其他有如此强烈的兴趣。。。甚至好几次做梦都会在折腾,都会笑。

这东西难道和毒品一样吗?会上瘾。。。我甚至在想,终止的那天会是什么时候?什么情况。。

仔细思考一下为什么,我发现是因为和它保持远距离产生美,就是如果你把CSS,PHP,JavaScript,JQuery弄得非常熟悉,或许那天就是你厌倦它的时候。

当然,也有一种是你越了解,越喜欢上它。

或许,喜欢这东西是因为我内心有一种喜欢整理修改美化的爱好,比如:整理家务,设计房屋,修理东西等等,弄好后会给我带来另一种喜悦。

分类:网络博客 标签:,,,

上一篇:更新css js同时更新客户端浏览器的缓存

下一篇:纯CSS绘制灯泡

已经有19条评论!

Loading...
  1. 相比三角形我还是你换你那个灯泡 [耍酷]

    沙发!
  2. 貌似不需要 js 吧,css 直接 li.menu-item-has-children:after 就行了吧?

    板凳!
  3. 好像我很早就用了,当时要兼容的浏览器还很多,现在简单了

    地板!
  4. 一看到这个三角形我就有阴影,十二年前在假洋鬼子手里搞网站,js都要自己写,做个下拉菜单花了一天。时过境迁,如今css一句就能搞定了……

    4F
  5. 兼容移动端的话,那都变成点击弹出好了~~ [坏笑]

    5F

怎么样?你也说一句吧!

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑