Tất cả bài viết | Lập trình Jquery
Hướng dẫn tạo menu dọc cho website
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 dọc chowebsite
Bước 1: Tạo cấu trúc HTML
CÁCH THIẾT KẾ MENU DỌC CHO WEBSITE
Bước 2: Định dạng cho menu bằng CSS
.mainNav {
width: auto;
margin:0px auto;
color: #FFF;
background-color: #F60;
}
.mainNav ul {
margin: 0;
padding: 0;
list-style: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}
.mainNav ul li {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999999;
}
.mainNav ul li a {
color: #FFF;
display: block;
font-size: 14px;
line-height: normal;
padding: 12px 20px;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
}
.mainNav ul li a:hover {
font-family:Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: #F00;
color: #FFF;
}
.mainNav ul ul {
border-bottom: none
}
.mainNav ul ul li {
background-color: #F5F5F5;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #E2E2E2;
}
.mainNav ul ul li a {
color: #000000;
display: block;
font-size: 1em;
line-height: normal;
padding: 0.5em 1em 0.5em 2.5em;
}
.mainNav ul ul li a:hover {
background-color: #E9E9E9;
color: #FF0000;
}
.mainNav ul ul ul {
border-top: 1px solid #46CFB0;
}
.mainNav ul ul ul li {
border: none;
}
.mainNav ul ul ul li a {
padding-left: 3.5em;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
ul li.has-subnav .accordion-btn {
color: #fff;
font-size: 16px;
background-color: #C0C0C0;
background-position: 0;
}
@media screen and (max-width: 1024px) {
.mainNav {width: 100%;
}
}
@media screen and (max-width: 700px) {
.mainNav {
width: 100%;
}
}
Bước 3: Gọi thư viện Bootstrap
Bước 4: Gọi thư viện JQUERY
Bước 5: Cấu hình cho menu
jQuery(document).ready(function(){
jQuery('.mainNav').navAccordion({
expandButtonText: '',
collapseButtonText: '',
buttonPosition: "left",
buttonWidth: "20%";
},
function(){ console.log('Callback')
});
});
Lập trình Jquery Xem (15024) Học thiết kế web giá rẻ
