CSS3 Card Deck Drop Down | CSS3 and Javascript

Trong bài viết này mình muốn chia sẽ cho các bạn một giao diện Card Deck Drop Down đơn giản nhưng đầy thú vị bằng CSS3 và Javascript cơ bản.
<div id="card-container">
    <a class="toggle" href="javascript:"><i class="demo-icon ecs-facebook"></i><span class="label-active">Facebook</span></a>
    <ul>
        <li class="active">
            <a data-label="Facebook" href=""><i class="demo-icon ecs-facebook"></i> Facebook</a>
        </li>
        <li>
            <a data-label="Google plus" href=""><i class="demo-icon ecs-gplus"></i> Google plus</a>
        </li>
        <li>
            <a data-label="Youtube" href=""><i class="demo-icon ecs-youtube-play"></i> Youtube</a>
        </li>
        <li>
            <a data-label="Twitter" href=""><i class="demo-icon ecs-twitter"></i> Twitter</a>
        </li>
        <li>
            <a data-label="Tumblr" href=""><i class="demo-icon ecs-tumblr"></i> Tumblr</a>
        </li>
        <li>
            <a data-label="Instagram" href=""><i class="demo-icon ecs-instagram"></i> Instagram</a>
        </li>
    </ul>
</div>

#card-container {
    position: relative;
    margin: 0 auto;
    -webkit-perspective: 800px;
    perspective: 800px;
    background: rgba(0, 0, 0, .1);
    z-index: 9;
    width: 100%;
    // style all links 
    a {
        display: block;
        width: 100%;
        padding: 20px 0 20px 20px;
        height: 60px;
        text-decoration: none;
        color: #212529;
        background-color: #fafafa;
        border: 1px solid #ddd;
        -webkit-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
        font-weight: bold;
        i {
            display: inline-block;
            width: 20px;
        }
    }

    // specific stlye for the toggle link
    >a.toggle {
        position: relative;
        z-index: 100;
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -moz-transition: linear 0.1s;
        -o-transition: linear 0.1s;
        -webkit-transition: linear 0.1s;
        transition: linear 0.1s;

        &:active {
            -moz-transform: rotateX(60deg);
            -webkit-transform: rotateX(60deg);
            transform: rotateX(60deg);

            &:after {
                -moz-transform: rotateX(180deg);
                -webkit-transform: rotateX(180deg);
                transform: rotateX(180deg);
            }
        }

        &:before,
        &:after {
            content: "";
            position: absolute;
        }

        &:before {
            right: 25px;
            top: 50%;
            margin-top: -2.5px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid rgba(0, 0, 0, .8);
        }

        &.active {
            &:before {
                -webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);
            }
        }
    }

    ul {
        position: absolute;
        height: 100%;
        top: 0;
        display: block;
        width: 100%;
        list-style: none;
        padding:0;
        margin:0;
        li {
            margin: 0 auto;
            -webkit-transition: all .3s ease-out;
            -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;

            a {
                border-top: none;
                font-weight: bold;
            }

            a:hover {
                background-color: #e24d26;
                color: #fff;
            }

            &.active {
                a {
                    color: #fff;
                    background-color: #e24d26;
                    cursor: default;
                }
            }

            &.closed {
                a:hover {
                    cursor: default;
                    background-color: #e24d26;
                }
            }
        }
    }
}

(function($){
    /* -------------------------------------------------------- */ 
    /*  //set Global variables
    /* -------------------------------------------------------- */ 
    var cards = $("#card-container"),
        toggler = cards.find(".toggle"),
        links = cards.find("ul>li>a"),
        li = links.parent('li'),
        count = links.length,
        width = 100;

        //set z-Index of drop Items
        li.each(function(i){
            $(this).css("z-index" , count - i); //invert the index values
        });

        //set top margins & widths of li elements
        function setClosed(){
            li.each(function(index){
                 $(this).css("top" , index * 4)
                        .css("width" , (width - index * .5) + "%" )
                        .css("margin-left" , (index * .25) + "%" )
            });
            li.addClass('closed');
            toggler.removeClass("active");
        }
        setClosed();
    /* -------------------------------------------------------- */ 
    /*  Toggler Click handler
    /* -------------------------------------------------------- */ 
    toggler.on("mousedown" , function(){
        var $this = $(this); //cache $(this)
        //if the menu is active:
        if($this.is(".active")){
            setClosed();
        }else{
            //if the menu is un-active:
            $this.addClass("active");
            li.removeClass('closed');
            //set top margins
            li.each(function(index){
                 $(this).css("top" , 60 * (index + 1))
                        .css("width" , "100%")
                        .css("margin-left" , "0px");
            });
        }
    });
    /* -------------------------------------------------------- */ 
    /*  Links Click handler
    /* -------------------------------------------------------- */ 
    links.on("click" , function(e){
        var $this = $(this),
            label = $this.data("label");
            icon = $this.children("i").attr("class");
            
            li.removeClass('active');
        if($this.parent("li").is("active")){
            $this.parent('li').removeClass("active");
        }else{
            $this.parent("li").addClass("active");
        }
        toggler.children("span").text(label);
        toggler.children("i").removeClass().addClass(icon);
        setClosed();
        e.preventDefault;
    });
})(jQuery);

0 thảo luận về CSS3 Card Deck Drop Down | CSS3 and Javascript

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục