Tạo mẫu menu cực đẹp với jQuery Plugin

Hôm nay mình sẽ mang đến cho các bạn một mẫu menu với hiệu ứng xoay vòng cực kỳ ấn tượng, với sự trợ giúp của jQuery. Với kiểu menu này, các bạn có thể áp dụng vào bất kì trang web hay blog mà các bạn đang dùng.

 Download

HTML

Trước tiên, chúng ta xây dựng menu với đoạn html như sau :

<div class="menu">

            <div class="item">

                <a class="link icon_mail"></a>

                <div class="item_content">

                    <h2>Contact us</h2>

                    <p>

                        <a href="#">eMail</a>

                        <a href="#">Twitter</a>

                        <a href="#">Facebook</a>

                    </p>

                </div>

            </div>

            <div class="item">

                <a class="link icon_help"></a>

                <div class="item_content">

                    <h2>Help</h2>

                    <p>

                        <a href="#">FAQ</a>

                        <a href="#">Live Support</a>

                        <a href="#">Tickets</a>

                    </p>

                </div>

            </div>

            <div class="item">

                <a class="link icon_find"></a>

                <div class="item_content">

                    <h2>Search</h2>

                    <p>

                        <input type="text"></input>

                        <a href="">Go</a>

                    </p>

                </div>

            </div>

            <div class="item">

                <a class="link icon_photos"></a>

                <div class="item_content">

                    <h2>Image Gallery</h2>

                    <p>

                        <a href="#">Categories</a>

                        <a href="#">Archives</a>

                        <a href="#">Featured</a>

                    </p>

                </div>

            </div>

            <div class="item">

                <a class="link icon_home"></a>

                <div class="item_content">

                    <h2>Start from here</h2>

                    <p>

                        <a href="#">Services</a>

                        <a href="#">Portfolio</a>

                        <a href="#">Pricing</a>

                    </p>

                </div>

            </div>

        </div>

CSS

Sau đó, định dạng menu với đoạn css sau :

.menu{

    width:800px;

    height:52px;

    position:relative;

    top:200px;

    left:100px;

    font-family: "Trebuchet MS", sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: bold;

    text-transform: uppercase;

}

.item{

    position:relative;

    background-color:#f0f0f0;

    float:right;

    width:52px;

    margin:0px 5px;

    height:52px;

    border:2px solid #ddd;

    -moz-border-radius:30px;

    -webkit-border-radius:30px;

    border-radius:30px;

    -moz-box-shadow:1px 1px 3px #555;

    -webkit-box-shadow:1px 1px 3px #555;

    box-shadow:1px 1px 3px #555;

    cursor:pointer;

    overflow:hidden;

}



.link{

    left:2px;

    top:2px;

    position:absolute;

    width:48px;

    height:48px;

}

.icon_home{

    background:transparent url(../images/home.png) no-repeat top left;

}

.icon_mail{

    background:transparent url(../images/mail.png) no-repeat top left;

}

.icon_help{

    background:transparent url(../images/help.png) no-repeat top left;

}

.icon_find{

    background:transparent url(../images/find.png) no-repeat top left;

}

.icon_photos{

    background:transparent url(../images/photos.png) no-repeat top left;

}

.item_content{

    position:absolute;

    height:52px;

    width:220px;

    overflow:hidden;

    left:56px;

    top:7px;

    background:transparent;

    display:none;

}

.item_content h2{

    color:#aaa;

    text-shadow: 1px 1px 1px #fff;

    background-color:transparent;

    font-size:14px;

}

.item_content a{

    background-color:transparent;

    float:left;

    margin-right:7px;

    margin-top:3px;

    color:#bbb;

    text-shadow: 1px 1px 1px #fff;

    text-decoration:none;

    font-size:12px;

}

.item_content a:hover{

    color:#0b965b;

}

.item_content p {

    background-color:transparent;

    display:none;

}

.item_content p input{

    border:1px solid #ccc;

    padding:1px;

    width:155px;

    float:left;

    margin-right:5px;

}

jQuery

Để có thể tạo hiệu ứng động cho menu, trước hết các bạn chèn thư viện jQuery cũng như Plugin liên quan như sau :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="jquery-css-transform.js" type="text/javascript"></script>

<script src="jquery-animate-css-rotate-scale.js" type="text/javascript"></script>

Sau đó các bạn copy đoạn script sau cho việc tạo hiệu ứng :

$('.item').hover(

                function(){

                    var $this = $(this);

                    expand($this);

                },

                function(){

                    var $this = $(this);

                    collapse($this);

                }

            );

            function expand($elem){

                var angle = 0;

                var t = setInterval(function () {

                    if(angle == 1440){

                        clearInterval(t);

                        return;

                    }

                    angle += 40;

                    $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);

                },10);

                $elem.stop().animate({width:'268px'}, 1000)

                .find('.item_content').fadeIn(400,function(){

                    $(this).find('p').stop(true,true).fadeIn(600);

                });

            }

            function collapse($elem){

                var angle = 1440;

                var t = setInterval(function () {

                    if(angle == 0){

                        clearInterval(t);

                        return;

                    }

                    angle -= 40;

                    $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);

                },10);

                $elem.stop().animate({width:'52px'}, 1000)

                .find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();

            }

Thế là từ giờ các bạn đã có một menu đẹp dành cho trang web hay blog của mình rồi, nhớ chia sẻ cho bạn bè và mọi người những mẫu menu khác mà các bạn làm được nhé.