css3实现不一样的下拉菜单框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3实现不一样的下拉菜单</title>

    <!--Main css-->
    <style>
        /*
         * css3实现不一样的下拉菜单 css
        */
        body {
            background: #F3F3F3;
            font-family: "Microsoft Yahei";
        }
        body,
        p,
        ul {
            padding: 0;
            margin: 0;
        }
        .content {
            padding-top: 5%;
            color: #333;
        }
        .content > .select {
            width: 300px;
            height: 40px;
            position: relative;
            border: 1px solid #ccc;
            background: #fff;
            margin: 0 auto;
            border-radius: 3px;
        }
        .content > .select.open {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        .content > .select.open > ul {
            border-bottom: 1px solid #ccc;
            max-height: 250px;
            -webkit-transition: max-height 0.3s ease-in;
                -moz-animation: max-height 0.3s ease-in;
                  -o-animation: max-height 0.3s ease-in;
                    transition: max-height 0.3s ease-in;
        }
        .content > .select.open > p:after {
            top: 18px;
            -webkit-transform: rotate(-225deg);
               -moz-transform: rotate(-225deg);
                -ms-transform: rotate(-225deg);
                 -o-transform: rotate(-225deg);
                    transform: rotate(-225deg);
            -webkit-transition: all 0.3s ease-in;
                -moz-animation: all 0.3s ease-in;
                  -o-animation: all 0.3s ease-in;
                    transition: all 0.3s ease-in;
        }
        .content > .select > p {
            padding: 0 15px;
            line-height: 40px;
            cursor: pointer;
        }
        .content > .select > p:after {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-left: 1px solid #333;
            border-bottom: 1px solid #333;
            position: absolute;
            top: 13px;
            right: 18px;
            -webkit-transform: rotate(-45deg);
               -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                 -o-transform: rotate(-45deg);
                    transform: rotate(-45deg);
            -webkit-transition: all 0.3s ease-in;
                -moz-animation: all 0.3s ease-in;
                  -o-animation: all 0.3s ease-in;
                    transition: all 0.3s ease-in;
        }
        .content > .select > ul {
            list-style: none;
            width: 100%;
            position: absolute;
            top: 41px;
            left: -1px;
            background: #fff;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            max-height: 0;
            overflow-y: hidden;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            -webkit-transition: max-height 0.3s ease-in;
                -moz-animation: max-height 0.3s ease-in;
                  -o-animation: max-height 0.3s ease-in;
                    transition: max-height 0.3s ease-in;
        }
        .content > .select > ul > li {
            padding: 0 15px;
            line-height: 40px;
            cursor: pointer;
            -webkit-transition: all .2s ease-in;
                -moz-animation: all .2s ease-in;
                  -o-animation: all .2s ease-in;
                    transition: all .2s ease-in;
        }
        .content > .select > ul > li:hover {
            background: rgba(72, 201, 176, 0.5);
            color: #fff;
        }
        .content > .select > ul > li.selected {
            background: #1ABC9C;
            color: #fff;
        }

    </style>
    <!--Main js-->
    <script src="js/jquery-2.1.1.min.js"></script>

    <script>
        $(function() {

            //点击选择框中的文字，添加open类，使用toggleClass()
            $('.select > p').on('click',function (e) {
                $('.select').toggleClass('open');
                e.stopPropagation();
            });

            //选择下拉菜单中的选项，将其值传给p标签显示在选择框中，并收起下拉菜单
            $('.select ul li').on('click',function(e){
                var $this = $(this);
                $('.select > p').text($this.attr('data-value'));
                $this.addClass('selected').siblings().removeClass('selected');//被选中的添加selected类，相应的移除其兄弟节点的selected类
                $('.select').removeClass('open');
                e.stopPropagation();
            });

            //点击文档其他位置，相应的也收起下拉菜单。此方法会影响子集元素，所以要在上面两个方法中阻止冒泡
            $(document).on('click', function () {
                $('.select').removeClass('open');
            });
        })
    </script>
</head>
<body>
<div class="content">
    <div class="select">
        <p>所有课程</p>
        <ul>
            <li data-value="所有课程" class="selected">所有课程</li>
            <li data-value="Java">Java</li>
            <li data-value="jQuery">jQuery</li>
            <li data-value="Javascript">Javascript</li>
            <li data-value="Php">Php</li>
            <li data-value="Oracle">Oracle</li>
        </ul>
    </div>
</div>
</body>
</html>
css3实现不一样的下拉菜单框

猜你喜欢
