Tất cả bài viết  |  Bootstrap

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

Hướng dẫn cách tạo Accordion Menu 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 Accordion Menu bằng Bootstrap

Bước 1: Tạo cấu trúc HTML
 
 

Hướng dẫn cách tạo Accordion Menu bằng Bootstrap

Trả lời

1. Nội dung các khóa học online được biên soạn theo các công nghệ thiết kế web mới nhất hiện nay như: HTML5, CSS3, RWD, BOOTSTRAP, JQUERY, AJAX, PHP, MySQL, SEO vvv..do đó đảm bảo với bạn là bạn đang học các công nghệ thiết kế web mới nhất, chất lượng với chi phí rẻ nhất.

2. Học thông qua các file bài giảng và các video clip bài giảng. Giao tiếp với giảng viên qua: Chat, Email, Điện thoại, Skype, Teamviewer, hay hệ thống hỏi đáp trong bài học

3. Xem và nghe lại bài giảng nhiều lần cho đến khi hiểu rõ bài học.

4. Được hướng dẫn làm đồ án cuối khóa học.

5. Được hỗ trợ kỹ thuật chuyên môn lâu dài.

6. Được hỗ các công cụ thiết kế web có giá trị.

Các bạn có thể tham khảo đánh giá của các học viên đã trải nghiệm qua các khóa học Online của hocwebgiare.com tại đây

Trả lời

Được. Bạn có thể đăng ký học thử 01 tuần đến 03 tuần để làm quen với cách học và trải nghiệm thử cách học trước khi bạn thấy thích để đăng ký học chính thức. Bạn cần đăng ký học thử theo các bước ở mục hướng dẫn.

Trả lời

Nếu bạn không thể tham gia khóa học tiếp được, bạn cần thông báo với giáo viên tới email nguyenphattai@gmail.com, khi đó Giáo Viên sẽ bảo lưu khóa học cho bạn. Khi bạn muốn học trở lại, bạn cứ liên hệ đến email của giáo viên, giáo viên sẽ sắp xếp cho bạn học lại ngay.

Bước 2: Định dạng cho Accordion Menu bằng CSS
a:hover, a:focus {	
text-decoration: none;	
outline: none;
}

#accordion .panel {	
border: none;	
background: none;	
border-radius: 0;	
box-shadow: none;
}

#accordion .panel-heading {	
padding: 0;
}

#accordion .panel-title a {	
display: block;	
font-size: 16px;	
color: #F00;	
padding: 17px 40px 17px 65px;	
background: #fff;	
border: 1px solid #f3f3f3;	
border-bottom: none;	
position: relative;	
transition: all 0.5s ease 0s;
}

#accordion .panel-title a.collapsed {	
background: #fafafa;	color: #959595;
}

#accordion .panel-title a.collapsed:hover {	
color: #9c88b9;
}

#accordion .panel-title a:after, #accordion .panel-title a.collapsed:after {	
content: "\f068";	
font-family: FontAwesome;	
font-size: 15px;	
color: #fff;	
width: 45px;	
height: 100%;	
line-height: 54px;	
text-align: center;	
position: absolute;	
top: 0px;	
left: -1px; 
transition: all .2s;	
background-color: #F00;
}

#accordion .panel-title a.collapsed:after {	
content: "f067";	
color: #959595;	
background: #f4f4f4;	
transition: all 0.5s ease 0s;
}

#accordion .panel-title a.collapsed:hover:after {	
color:#fff;	
background-color: #F60;
}

#accordion .panel-title a:before {	
content: "";	
position: absolute;	
bottom: -11px;	left: -1px;	
border-bottom: 12px solid transparent;	
border-right: 12px solid #9c88b9;
}

#accordion .panel-title a.collapsed:before {	
display: none;
}

#accordion .panel-body {	
font-size: 14px;	color: #b7b7b7;	
padding: 0 65px 15px;	
line-height: 20px;	
margin-left: 12px;	
background: #fff;	
border: 1px solid #f3f3f3;	
border-top: none;
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
 
 
 
Bước 4: Gọi thư viện JQUERY
 
Xem  demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất
Bạn có thể quan tâm

Tổng hợp các bài học hay về kỹ thuật thiết kế giao diện web với Fireworks Học lập trình web

Tổng hợp các bài học hay về lập trình hướng đối tượng PHP cơ bản Học lập trình web

Tổng hợp các bài học hay về lập trình bootstrap Học lập trình web

Hướng dẫn cách tạo Bootstrap ScrollSpy (Phần 2) Học lập trình web

Hướng dẫn cách tạo Bootstrap ScrollSpy (Phần 1) Học lập trình web

Hướng dẫn cách tạo Bootstrap Javascript Modal (Phần 2) Học lập trình web

Hướng dẫn cách tạo Bootstrap Javascript Modal (Phần 1) Học lập trình web

Hướng dẫn cách tạo Tooltip trong Bootstrap Học lập trình web

Hướng dẫn tạo Arcordion Panel trong Bootstrap (Phần 2) Học lập trình web

Hướng dẫn tạo Arcordion Panel trong Bootstrap (Phần 1) Học lập trình web