下拉菜单项封装，使用图标字体实现

2021-02-08 作者：匿名阅读：1725次

前言

本文重点解决下拉菜单项封装，使用图标字体实现问题,希望能够帮助到你

通过之前的站点导航案例，分离下拉菜单的共性和特性

dropdown.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dropdown</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
        /*分离出dropdown公共样式*/
        .dropdown{
            position: relative;
        }
        .dropdown-toggle{
            position: relative;
            z-index:2;
        }
        .dropdown-arrow{
            display: inline-block;
            vertical-align: middle;
            background-repeat: no-repeat;
        }
        .dropdown-list{
            display: none;
            position: absolute;
            z-index:1;
        }
        .dropdown-left{
            left:0;
            right:auto;
        }
        .dropdown-right{
            right:0;
            left:auto;
        }
        /*分离出nav的dropdown独有样式*/
        .menu .dropdown-toggle{
            display: block;
            padding:0 16px 0 12px;
            border-right:1px solid #f3f5f7;
            border-left:1px solid #f3f5f7;
        }
        .menu .dropdown-arrow{
            width:8px;
            height:6px;
            background-image:url(../img/dropdown-arrow.png);
            margin-left:8px;
            vertical-align: middle;
        }
        .menu .dropdown-list{
            border:1px solid #cdd0d4;
            background-color: #fff;
            top:100%;
        }
        .menu-item{
            height:30px;
            line-height:30px;
            padding:0 12px;
        }
        /*鼠标移入*/
        .menu-item:hover{
            background-color: #f3f5f7;
        }
        .menu-active .dropdown-toggle{
            color:#f01414;
            background-color:#fff;
            border-color:#cdd0d4;
        }
        .menu-active .dropdown-arrow{
            background-image:url(../img/dropdown-arrow-active.png);
        }
        .menu-active .dropdown-list{
            display: block;
        }
    </style>
</head>
<body>
    <div class="menu dropdown" data-active="menu">
        <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a>
        <ul class="dropdown-list dropdown-left">
            <li class="menu-item"><a href="#">已买到的宝贝</a></li>
            <li class="menu-item"><a href="#">我的足迹</a></li>
        </ul>
    </div>
    <script src="../js/jquery.js"></script>
    <script>
        // 这种方法不通用，需要使用函数，将需要下拉显示的元素通过参数传入
        $(".dropdown").hover(function(){
            var ui=$(this);//缓存
            //.data(属性名)和attr("data-属性名") 效果相同
            //可以获取data-开头的属性值
            ui.addClass(ui.data("active")+"-active");
        },function(){
            ui.removeClass(ui.attr("data-active")+"-active");
        });</script>
</body>
</html>