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

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.


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​