Sau khi tham gia khóa làm giao diện Nukeviet online của Lê Thúc Vinh. Cũng cố gắng mày mò tí để gọi là cho biết. Và đây là kết quả của em nó
File download bên dưới
Copy đoạn css dưới vào style.css
.sj-accordion { padding:0; overflow: hidden; } .sj-accordion .acd-items {margin:0;} .sj-accordion .acd-items .acd-item{ margin:0; padding:0; } .sj-accordion .acd-items .acd-item .acd-header{ cursor: pointer ; border: 1px solid #ddd; margin:2px 0; padding: 5px 8px 5px 8px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } .sj-accordion .acd-items .acd-item.selected .acd-header { font-weight: bold; color: #fff; background-color: #1192f6; background-image: -moz-linear-gradient(top,#1c9cff,#0083e8); background-image: -webkit-gradient(linear,0 0,0 100%,from(#1c9cff),to(#0083e8)); background-image: -webkit-linear-gradient(top,#1c9cff,#0083e8); background-image: -o-linear-gradient(top,#1c9cff,#0083e8); background-image: linear-gradient(to bottom,#1c9cff,#0083e8); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1c9cff', endColorstr='#ff0083e8', GradientType=0); border-color: transparent; } .sj-accordion .acd-items .acd-item.selected .acd-header:hover { background-color: #0b8df1; background-image: -moz-linear-gradient(top,#0083e8,#1c9cff); background-image: -webkit-gradient(linear,0 0,0 100%,from(#0083e8),to(#1c9cff)); background-image: -webkit-linear-gradient(top,#0083e8,#1c9cff); background-image: -o-linear-gradient(top,#0083e8,#1c9cff); background-image: linear-gradient(to bottom,#0083e8,#1c9cff); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0083e8', endColorstr='#ff1c9cff', GradientType=0); color: #fff; } .sj-accordion .acd-items .acd-item.selected .acd-header i { display: none; } .sj-accordion .acd-items .acd-item.selected .acd-header a{ color: #fff; } .sj-accordion .acd-items .acd-item .acd-header:hover { color: #0083e8; background: #f1f1f1; } .acd-header a:hover { color: #0083e8; } .acd-content-wrap .acd-image .image-overlay { width: 100%; height: 100%; background-color: rgba(102,102,102,0.5); position: absolute; top: 0; left: 0; z-index: 5; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } .acd-content-wrap .acd-image:hover .image-overlay { opacity: 1; filter: alpha(opacity=100); } .acd-content-wrap .acd-image .image-overlay .hover-links { position: absolute; top: 50%; right: 50%; margin: -18px -10px 0 0; } .acd-content-wrap .acd-image .image-overlay .hover-links a { width: 35px; height: 35px; background: #0083e8; line-height: 32px; text-align: center; margin: 0 2px; display: inline-block; -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 1px rgba(0,0,0,0.2); box-shadow: 0 0 1px rgba(0,0,0,0.2); border: 1px solid #1298ff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .acd-content-wrap .acd-image:hover .image-overlay .hover-links a.hover-zoom:hover, .acd-content-wrap .acd-image:hover .image-overlay .hover-links a.hover-link:hover { background: #1c9cff; } .acd-content-wrap .acd-image .image-overlay .hover-links a i { margin: 0; font-size: 14px; color: white; } .sj-accordion .acd-items .acd-item .acd-content-wrap .acd-content .acd-description{display: inline;} /* .sj-accordion .acd-items .acd-item.selected .acd-content-wrap{ height: auto; } */ .sj-accordion .acd-items .acd-item .acd-content-wrap{ overflow: hidden; height: 0; width:100%; } .sj-accordion .acd-content-wrap .acd-content-wrap-inner{ margin:0; padding:0; overflow: hidden; display: block; } .sj-accordion .acd-content-wrap .acd-content-wrap-inner .acd-image{ overflow: hidden; margin: 10px 0; position: relative; padding: 4px; border: 1px solid #ddd; } .sj-accordion .acd-content-wrap .acd-content-wrap-inner .acd-image img{ float:left; max-width: 100%; width:100%; border:0; margin:0; padding:0; } .icon-add { width: 14px; height: 14px; text-align: center; background: #0083e8; padding:1px; color:#fff; }
Vậy là xong.
P/s : gửi lời cám ơn Trần Phương nữa nhé.