Tạo menu Accordian đơn giản cho blogspot bằng CSS
Khôi Ròm - tháng 7 05, 2018 -
Blogspot, CSS, Menu, Thủ thuật blogspot
Bạn không thích menu top bình thường, hay menu top của bạn không chứa hết được nội dung. Hãy sử dụng Menu Accordian mình giới thiệu hôm nay, đặt nó ở sidebar sẽ làm blog bạn trở nên hấp dẫn hơn đấy. Nếu bạn không thích, cũng có thể áp dụng vào việc khác, việc sử dụng là tùy ở bạn.
Demo trực tiếp
Cách thực hiện
Chèn Css
.container-menu{max-width:400px;margin:10px auto;box-shadow:0 2px 5px rgba(0,0,0,0.5);border:1px solid #1682ba}
.accordian input{position:absolute;left:-10000px;top:-100000px}
.accordian label{padding:10px;display:block;background:#36aae7;color:#fff;position:relative;box-shadow:0 2px 4px rgba(0,0,0,0.5)}
.accordian label:after{content:"+";right:10px;top:5px;position:absolute;font-size:20px;transition:all 0.5s}
.accordian input:checked + label:after{transform:rotateZ(225deg)}
.accordian .drop{max-height:0;overflow:hidden;padding:0 10px;transition:all 0.5s;background:#465;color:#fff}
.accordian input:checked + label + .drop{max-height:10em;padding:10px}
Chèn HTML
<div class="container-menu">
<div class="accordian">
<input type="checkbox" id="drop1"/>
<label for="drop1">Title</label>
<div class="drop">some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</div>
</div>
<div class="accordian">
<input type="checkbox" id="drop2"/>
<label for="drop2">Title</label>
<div class="drop">some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</div>
</div>
<div class="accordian">
<input type="checkbox" id="drop3"/>
<label for="drop3">Title</label>
<div class="drop">some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</div>
</div>
</div>