欢迎访问晨星博客!

  • 当前位置: 首页 Web前端 正文

    用jQuery为二级菜单的父级添加下拉三角

    文章目录
    1. jQuery脚本代码
    2. 原理分析

    给二级导航菜单添加下拉三角这个功能非常实用,可以让用户快速知道那个菜单下面有小分类,站在用户体验的方面考虑这也算一个小小的优化项目呀(夸张的说法),其实实现这个功能并不难实现的方法也很多,今天给大家分享的中方法是用jQuery实现的非常简单。

    jQuery脚本代码

    1. <script>
    2. // 子菜单父级三角箭头
    3. $(function() {
    4.     $(‘.header-menu-nav’).find(‘.sub-menu’).siblings(‘a’).addClass(‘triangle’);
    5. });
    6. <script>

    只看jQuery脚本代码可能大家还不知道怎么用,我把我的html代码也贴出来给大家参考一下:

    1. <nav>
    2.     <ul class=“header-menu-nav”>
    3.         <li><a href=“#”>导航菜单1</a></li>
    4.         <li><a href=“#”>导航菜单2</a>
    5.             <ul class=“sub-menu”>
    6.                 <li><a href=“#”>二级菜单1/a></li>
    7.                 <li><a href=“#”>二级菜单1</a></li>
    8.             </ul>
    9.         </li>
    10.     </ul>
    11. </nav>

    使用方法:

    只需对着上面的代码修改.header-menu-nav导航外置包裹的css选择器和.sub-menu二级菜单的外置包裹css选择器即可。

    原理分析

    PS.分享代码要督促自己养成一个好习惯,一定要把代码的运行原理写清楚,方便大家学习使用,当然也是希望大家活学活用。

    上面这段jQuery脚本在执行时会先定位导航菜单所在的盒子模型也就是.header-menu-nav,然后再这个盒子模型中定位出二级菜单.sub-menu如果.header-menu-nav下面有.sub-menu这个节点那么就向上返回以及找到a标签并给a标签添加一个class="triangle"的css选择器,有了这个再配合css的after伪类元素进行显示下拉三角。

    下面分享一下我用的css

    1. .triangle:after {font-family:’FontAwesome’;content:“\f0dd”;display:inlineblock;color:#fff;float:none;position:relative;top:-3px;left:4px;}

    代码非常精简,只要你的网站加载了jQuery库就可以正常使用,非常方便!

    声明:原创文章请勿转载,如需转载请注明出处!

    • 共 3 条评论

    请登陆后再发表您的观点吧!

    最新评论

    1. 鱼昆鹏博客

      然而我现在正想把主题的这个东西去掉,感觉和导航栏的自定义图标在一起会影响美观的说。

    2. xyz

      默默的学习一下

    3. 出尘子

      博主的这种方法确实简单,逻辑也比较清晰,我看到Wordpress其实给二级菜单的父级分配的有一个css选择器的,其实不用js也可以使用after伪类来实现这个。

    账号登陆

    快捷登陆