TẠO DROPDOWN MENU BẰNG JQUERY
http://itlovedesign.blogspot.com/2017/09/tao-dropdown-menu-bang-jquery.html
Có 2 kiểu menu :
- menu thứ 1 và thứ 2 khi ta click vào menu cha thì nội dung con bên trong sẽ được hiển thị.
- menu thứ 3 : khi ta hover (rê chuột) vào thì nội dung con bên trong sẽ hiển thị
CODE HTML
Slide menu
Slider menu
CODE CSS
#menu{
width :300px;
}
.category{
background-color: red;
color:white;
font-weight: bold;
padding:6px;
}
.content>a{
background-color: green;
color:white;
display:block;
padding:6px;
text-decoration: none;
}
.content>a:hover{
background-color:white;
color:green;
}
.content1>a{
background-color: green;
color:white;
display:block;
padding:6px;
text-decoration: none;
}
.content1 a:hover{
background-color:white;
color:green;
}
.category1{
background-color: red;
color:white;
font-weight: bold;
padding:6px;
}
.content1{
display: none;
width:300px;
margin-left:-6px;
position: absolute;
line-height: 10px;
}
.content1 a{
border:solid 2px white;
}
.category1:hover .content1{
display: block;
}
CODE JQUERY
$(document).ready(function(){
$(".content ").hide();
$('.category').click(function(){
$(this).next().slideToggle();
});
});
