Tất cả bài viết | Bootstrap
Cách tạo menu đăng nhập dạng Dropdown bằng Bootstrap
Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn Cách tạo menu đăng nhập dạng Dropdown bằng Bootstrap
Bước 1: Tạo cấu trúc HTML cho menu
Bước 2: Định nghĩa CSS
ul.dropdown-cart {
min-width:250px;
}
ul.dropdown-cart li .item {
display:block;
padding:3px 10px;
margin: 3px 0;
}
ul.dropdown-cart li .item:hover {
background-color:#f3f3f3;
}
ul.dropdown-cart li .item:after {
visibility: hidden;
display: block;
font-size: 0;
content: "";
clear: both;
height: 0;
}
ul.dropdown-cart li .item-left {
float:left;
}
ul.dropdown-cart li .item-left img, ul.dropdown-cart li .item-left span.item-info {
float:left;
}
ul.dropdown-cart li .item-left span.item-info {
margin-left:10px;
}
ul.dropdown-cart li .item-left span.item-info span {
display:block;
}
ul.dropdown-cart li .item-right {
float:right;
}
ul.dropdown-cart li .item-right button {
margin-top:14px;
}
Bước 3: Gọi thư viện Bootstrap
Bước 4: Gọi thư viện JQUERY
Bước 5: Tạo hiệu ứng Dropdown cho menu bằng JQUERY
$(document).ready(function() {
$('.nav .dropdown').hover(function() {
$(this).addClass('open');
}, function() {
$(this).removeClass('open');
});
}); Bootstrap Xem (4648) Học thiết kế web giá rẻ
