Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[html5 + css3] Responsive Multi-Level Menu

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi banbaonylong, 21/4/13.

Lượt xem: 4,435

  1. banbaonylong Ko phải assmin

    [​IMG]

    • Cấu trúc code
    PHP:
    <div id="dl-menu" class="dl-menuwrapper">
        <
    button>Open Menu</button>
        <
    ul class="dl-menu">
            <
    li>
                <
    a href="#">Item 1</a>
                <
    ul class="dl-submenu">
                    <
    li class="dl-back"><a href="#">back</a></li>
                    <
    li><a href="#">Sub-Item 1</a></li>
                    <
    li><a href="#">Sub-Item 2</a></li>
                    <
    li><a href="#">Sub-Item 3</a></li>
                    <
    li>
                        <
    a href="#">Sub-Item 4</a>
                        <
    ul class="dl-submenu">
                            <
    li class="dl-back"><a href="#">back</a></li>
                            <
    li><a href="#">Sub-Sub-Item 1</a></li>
                            <
    li><a href="#">Sub-Sub-Item 2</a></li>
                            <
    li><a href="#">Sub-Sub-Item 3</a></li>
                        </
    ul>
                    </
    li>
                    <
    li><!-- ... --></li>
                    <!-- ... -->
                </
    ul>
            </
    li>
            <
    li><!-- ... --></li>
            <
    li><!-- ... --></li>
            <!-- ... -->
        </
    ul>
    </
    div><!-- /dl-menuwrapper -->
    • Cách chỉnh sửa jquery
    PHP:
    .dl-menu.dl-animate-out-{
        
    animationMenuAnimOut1 0.4s linear forwards;
    }
     
    @
    keyframes MenuAnimOut1 {
        
    50% {
            
    transformtranslateZ(-250pxrotateY(30deg);
        }
        
    75% {
            
    transformtranslateZ(-372.5pxrotateY(15deg);
            
    opacity.5;
        }
        
    100% {
            
    transformtranslateZ(-500pxrotateY(0deg);
            
    opacity0;
        }
    }
     
    .
    dl-menu.dl-animate-in-{
        
    animationMenuAnimIn1 0.3s linear forwards;
    }
     
    @
    keyframes MenuAnimIn1 {
        
    0% {
            
    transformtranslateZ(-500pxrotateY(0deg);
            
    opacity0;
        }
        
    20% {
            
    transformtranslateZ(-250pxrotateY(30deg);
            
    opacity0.5;
        }
        
    100% {
            
    transformtranslateZ(0pxrotateY(0deg);
            
    opacity1;
        }
    }
    • Cách gọi jquery để sử dụng
    PHP:
    $('#dl-menu').dlmenu({
        
    animationClasses : { in 'animation-class-name'out 'animation-class-name' }
    });
    • View demo: Link
    • Download:
      Code:
      http://www.mediafire.com/?8lhf9w694mnw46f
      (Pass: vietdesigner.net)
    Nguồn: Mary Lou

    ...
    Quang Tiến thích bài viết này

Ủng hộ diễn đàn