1. Hãy ủng hộ PhienBanMoi.Com bằng cách LIKE trang FANPAGE , GOOGLE+ dưới mỗi bài viết hoặc chia sẻ website nếu thấy hữu ích. Trân trọng cảm ơn!
  2. [Thông Báo] Thông Báo Tuyển mod cho toàn diễn đàn


    Forum mới lập rất cần sự giúp đỡ của các bạn vậy nên bạn nào có khả năng thì đăng kí tham gia làm mod để quản lí, phát triển diễn đàn nhé!

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,168
    924
    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 Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết 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é: Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết

    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
    669
    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,168
    924
    113
    là sao thế bác
     
  4. khoatoannangcao

    khoatoannangcao SUPER NỔ

    1,867
    669
    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,168
    924
    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 Member Tâm Huyết

    5,164
    1,024
    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,168
    924
    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,168
    924
    113
    thiếu ở đâu vậy bạn fix lại giúp mình với
    thanks nhé
     

Chia sẻ trang này