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
Tạo menu Accordian đơn giản cho blogspot bằng CSS
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

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
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
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

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>

Tổng kết

Chỉ với một đoạn rất ngắn css và html, chúng ta đã tạo ra được menu accordian rồi đấy. Chúc các bạn thành công! Đừng quên để lại bình luận bên dưới nhé.