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

Hướng dẫn tạo toogle drop down menu đa cấp jquery css

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi vnfit.com, 15/9/15.

Lượt xem: 3,088

  1. vnfit.com Banned

    Lâu rồi bận rộn với công việc hôm nay mới có thời gian để viết bài giúp anh em làm website thêm một cái hay hay gì đó để anh em làm việc thuận lợi.
    Bài hôm nay mình xin chia sẻ về cách tạo toogle drop down menu đa cấp jquery css.

    gJ7selH.jpg
    Dưới đây là nôi dung bài viết nhé:

    Trong bài viết này mặc định là các bạn đã biết về Jquery, Css, HTML rồi nhé. Mình sẽ không giải thích vì sao mình viết như thế mà chỉ đưa code các bạn có thể copy về dùng hoặc chỉnh sửa lại cho phù hợp với dự án của bạn. Mình cũng không phải là thánh ở các hạng mục Jquery, Css, Html đâu nhưng mà thấy nó có thể hữu ích thì chia sẻ với anh em thôi. Nhất là các bạn mới có cơ bản có thể đọc cái này dễ hiểu hơn hì hì.

    Các bước để tạo toogle drop down menu đa cấp với jquery css
    Bước 1: Tạo mã HTML

    Bước 2: Thêm phần Css

    Bước 3: Add vào jquery

    Dưới đây sẽ là code của từng phần mình đã tạo sẵn. Các bạn nhớ chỉnh sửa lại phần css nhé.
    HTML:
    <nav>
    <ul class="ul1">
    <li><a href="vnfit.com">Home</a></li>
    <li><a href="#">About</a>
    <ul class="ul2">
    <li><a href="#">About 1</a></li>
    <li><a href="#">About 2</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </li>
    <li><a href="#">PHP</a>
    <ul class="ul2">
    <li><a href="#">Framework</a>
    <ul class="ul3">
    <li><a href="#">CI</a></li>
    <li><a href="#">Laravel</a></li>
    <li><a href="#">Zend</a></li>
    </ul>
    </li>
    <li><a href="#">PHP version</a>
    <ul class="ul3">
    <li><a href="#">PHP 3</a></li>
    <li><a href="#">PHP 4</a></li>
    <li><a href="#">PHP 5</a></li>
    </ul>
    </li>
    <li><a href="#">MYSQL</a></li>
    </ul>
    </li>
    <li><a href="#">PHOTOSHOP</a>
    <ul class="ul2">
    <li><a href="#">CS5</a></li>
    <li><a href="#">CS6</a></li>
    </ul>
    </li>
    <li><a href="#">Android</a></li>
    </ul>
    </nav>
    CSS:
    Code:
    ul,li{
    list-style:none;
    }
    nav{
    height:42px;
    background:#a3bc2b;
    margin-top:5px;
    }
    nav li{
    float:left;
    height:42px;
    border-right:1px solid #fff;
    }
    body nav a{
    color:#fff;
    font-size:14px;
    text-align:center;
    line-height:42px;
    width:100%;
    display:block;
    }
    nav > ul > li:nth-child(1),nav > ul> li:nth-child(5),nav > ul > li:nth-child(6){width:12%;}
    nav > ul > li:nth-child(2){width:24.3%;}
    nav > ul > li:nth-child(3){width:19.3%;}
    nav > ul > li:nth-child(4){width:19.7%;}
    nav > ul > li:nth-child(6){border-right:none !important;}
    nav > ul > li:nth-child(1){border-left:1px solid #a3bc2b; }
    nav > ul > li:hover,.active{
    background:#fff;
    height:40px;
    border-top:1px solid #a3bc2b;
    border-bottom:1px solid #a3bc2b;
    /*  transition:all ease 0.3s;  */
    }
    nav > ul > li.active2{
    background-color:#dce8a2 !important;
    }
    nav > ul > li:hover a,.active a{color:#a3bc2b;}
    
    .ul1 ul{display:none;}
    .ul2{
    width:100%;
    background-color:#595757;
    }
    .ul2 li{
    width:100%;
    border-bottom:1px solid #fff;
    display:block;
    height:auto;
    }
    .ul2 > li:hover{background-color:#383838; transition:all ease 0.3s;}
    .ul2 li a{
    color:#fff !important;
    padding:10px auto;
    line-height:35px;
    text-align:center;
    width:100%;
    display:block;
    }
    .ul1 li{position:relative;}
    .ul1 li .ul2{
    position:absolute;
    top:40px;
    left:0;
    }
    /*.ul1 > li:hover .ul2{display:block;}*/
    .ul3{ background-color:#eeefef !important; display:block;}
    .ul3 li{
    width:100%;
    border-bottom:1px solid #fff;
    display:block;
    height:35px;
    }
    .ul3 li{background-color:#eeefef !important;}
    .ul3 li a{color:#000 !important;}
    Jquery
    
    $(document).ready(function() {
    $(".ul1 > li").click(function() {
    $(".ul1 > li").find(".ul2").slideUp();
    $(".ul1 > li").find(".ul2 li .ul3").slideUp();
    if(!$(this).find(".ul2").is(":visible"))
    {
    $(this).find(".ul2").slideDown();
    }
    //$(this).find(".ul2").slideDown();
    });
    $(".ul2 li").click(function(e) {
    e.stopPropagation();
    $(".ul2 li").find(".ul3").slideUp();
    $(this).find(".ul3").slideDown();
    });
    });
    Chúc các bạn thành công!
    Nếu thấy bài viết hay thì nhớ chia sẻ cho những người khác nhé

    Nguồn: Vnfit.com

    ...
  2. quang86

    quang86 Thành viên cấp 2

    sao mình làm nó không ra giống bạn nhỉ :(
    [​IMG]

Ủng hộ diễn đàn