1. Kết quả Event Ghost 2016


    Dưới đây là danh sách những thành viên đoạt giải thưởng trong Event Ghost 2016

Hiệu ứng Menu xoay cho Web ( CSS3 - JQuery )

Thảo luận trong 'Thiết Kế Website' bắt đầu bởi minh_ng2000, 19 Tháng tư 2013.


  1. minh_ng2000

    minh_ng2000 Death Moderator Ban Quản Trị

    1,172
    921
    113
    Cái này thì mình tim thấy được trên mạng nhé thấy cũng hay nên chia sẽ với mọi ngươi


    nếu có ai post rồi thì đừng gạch đá tôi em ạ.

    Nó là như vậy nhé, các bạn xem Demo trước rồi xem típ nhé

    và đây là CODE

    Mã HTML

    PHP Code

    PHP:
    <div class="menu">
        <
    div class="item">
            <
    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">
            <
    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">
            <
    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">
            <
    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">
            <
    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

    Stye cho Font

    PHP Code

    PHP:
    .menu{
        
    width:800px;
        
    height:52px;
        
    position:relative;
        
    top:200px;
        
    left:100px;
        
    font-family"Trebuchet MS"sans-serif;
        
    font-size16px;
        
    font-stylenormal;
        
    font-weightbold;
        
    text-transformuppercase;
    }  
    Các menu cin bên trong sẽ được cho là float:right và khi bấn vào nó sẽ được mở rộng qua bên trái

    PHP Code

    PHP:
    .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;
    }  
    Thêm các icon cho Menu

    PHP Code

    PHP:
    link{
        
    left:2px;
        
    top:2px;
        
    position:absolute;
        
    width:48px;
        
    height:48px;
    }
    .
    icon_home{
        
    background:transparent url(../images/home.pngno-repeat top left;
    }
    .
    icon_mail{
        
    background:transparent url(../images/mail.pngno-repeat top left;
    }
    .
    icon_help{
        
    background:transparent url(../images/help.pngno-repeat top left;
    }
    .
    icon_find{
        
    background:transparent url(../images/find.pngno-repeat top left;
    }
    .
    icon_photos{
        
    background:transparent url(../images/photos.pngno-repeat top left;
    }  
    1 vài thành phần khác

    PHP Code

    PHP:
    item_content{
        
    position:absolute;
        
    height:52px;
        
    width:220px;
        
    overflow:hidden;
        
    left:56px;
        
    top:7px;
        
    background:transparent;
        
    display:none;
    }
    .
    item_content h2{
        
    color:#aaa;
        
    text-shadow1px 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-shadow1px 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;
    }  
    Java script

    PHP Code

    PHP:
    $('.item').hover(
        function(){
            var 
    $this = $(this);
            
    expand($this);
        },
        function(){
            var 
    $this = $(this);
            
    collapse($this);
        }
    );
    function 
    expand($elem){
        var 
    angle 0;
        var 
    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 
    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();
    }  
    Cài này thì e cũng không hiểu sao nữa. lên trang demo thì thấy nó quay chóng mặt vậy đó
    đến khi làm thì nó chỉ chạy ra chư không co quay được :cry:

    Code gốc nằm ở đây nhé: http://www.fshare.vn/file/TWFX31PVRT

    Trong đó có bản Demo nhưng nó không có quay chỉ bung ra thôi tức tập 2 :beat_shot:
     
    khoatoannangcao and anonymous like this.
  2. khoatoannangcao

    khoatoannangcao SUPER NỔ

    1,867
    668
    113
    Tên thật:
    Lê Minh Khoa
    Màu hơn xấu
     
  3. minh_ng2000

    minh_ng2000 Death Moderator Ban Quản Trị

    1,172
    921
    113
    là sao thế bác
     
  4. khoatoannangcao

    khoatoannangcao SUPER NỔ

    1,867
    668
    113
    Tên thật:
    Lê Minh Khoa
    Màu của nó hơi xấu.
     
  5. minh_ng2000

    minh_ng2000 Death Moderator Ban Quản Trị

    1,172
    921
    113
    bác phải viết cho rõ chứ lần sau mà thế nữa là chít zới e nhé bác

    lần cảnh cáo 1 viên thui nhe :brick: , lần sau là cho bác hẳn 1 xe lun đó :big_smile:
     
  6. kimchinh

    kimchinh Super Moderator

    5,158
    1,020
    113
    Bạn hướng dẫn kỹ hơn chút đi VD: như chèn đoạn code kia vào đâu, trước lệnh nào ... vân vân và vân vân
     
  7. minh_ng2000

    minh_ng2000 Death Moderator Ban Quản Trị

    1,172
    921
    113
    Trước tiên muốn làm thế thì bạn phải tạo 1 bộ source của trang web, rồi chỉnh phần source đó lại, thay thế những đoạn code ở phần nút của trang web của bạn = bằng những đoạn code ở trên nhé
     
  8. skyblue12

    skyblue12 Member Mới

    3
    1
    3
    bạn thiếu jquery cho nên nó không chạy là đúng rồi :(
     
    minh_ng2000 thích bài này.
  9. minh_ng2000

    minh_ng2000 Death Moderator Ban Quản Trị

    1,172
    921
    113
    thiếu ở đâu vậy bạn fix lại giúp mình với
    thanks nhé
     

Chia sẻ trang này