Tất cả bài viết | Bootstrap
Hướng dẫn cách tạo menu Responsive với Bootsnav
Trong bài Học lập trình web này các Bạn sẽ được Hướng dẫn cách tạo menu Responsive với Bootsnav cho website.
Bước 1: Tạo cấu trúc HTML
Tạo menu Responsive với Bootsnav
Bước 2: Tạo cấu trúc CSS
.navbar-brand{
padding: 29px 15px;
height: auto;
}
nav.navbar.bootsnav{
border: none;
margin-bottom: 150px;
}
.navbar-nav{
float: left;
}
nav.navbar.bootsnav ul.nav > li > a{
color: #474747;
text-transform: uppercase;
padding: 30px;
}
nav.navbar.bootsnav ul.nav > li:hover{
background: #f4f4f4;
}
.nav > li:after{
content: "";
width: 0;
height: 5px;
background: #34c9dd;
position: absolute;
bottom: 0;
left: 0;
transition: all 0.5s ease 0s;
}
.nav > li:hover:after{
width: 100%;
}
nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
content: "+";
font-family: 'FontAwesome';
font-size: 16px;
font-weight: 500;
position: absolute;
top: 35%;
right: 10%;
transition: all 0.4s ease 0s;
}
nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
content: "f105";
transform: rotate(90deg);
}
.dropdown-menu.multi-dropdown{
position: absolute;
left: -100% !important;
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border: none;
}
@media only screen and (max-width:990px){
nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after, nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
content: " ";
}
.dropdown-menu.multi-dropdown{
left: 0 !important;
}
nav.navbar.bootsnav ul.nav > li:hover{
background: transparent;
}
Bước 3: Gọi thư viện Bootstrap, BootNav và Font awesome
Bước 4: Gọi thư viện JQUERY
Bootstrap Xem (9244) Học thiết kế web giá rẻ
