[Blogger] Dropdown Menu sử dụng CSS và JavaScript

Với mỗi webmaster việc chỉ viết bài thôi là chưa đủ, để thu hút bạn đọc thường xuyên lui tới trang của mình bạn cần trau chuốt giao diện, thêm một vài tiện ích độc lạ để lôi cuốn họ. Bài viết này sẽ giúp bạn tạo 1 Dropdown Menu sử dụng CSS và JavaScript. Mặc dù "bắt" người dùng phải mất thêm 1 click chuột để mở menu tuy nhiên nhìn nó có vẻ chuyên nghiệp hơn so với hiệu ứng hover hiện nội dung ẩn truyền thống.

Menu này phù hợp cho nhu cầu gắn link chia sẻ lên các trang mạng xã hội, hoặc đơn giản là tạo list follow cá nhân. Hình hài nó như nào bạn xem live demo tại đây

 DEMO
Ok bắt đầu thủ thuật.

Như thường lệ đăng nhập vào trang quản trị của bạn và vào phần chỉnh sửa HTML. Tích hợp CSS. dán code sau vào trước thẻ ]]></b:skin>

.dropbtn{font-size:16px;cursor:pointer;color:#fff}
.dropbtn:hover{color:#ff0000;-webkit-transition:all .25s linear;-moz-transition:all .25s linear;-ms-transition:all .25s linear;-o-transition:all .25s linear;transition:all .25s linear}
.dropdown{position:relative;display:inline-block}
.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;margin-top:10px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:100;border:1px solid #e8e8e8}
#myDropdown ul{list-style:none;margin:0;padding:0}
.dropdown-content ul li a{color:#000;padding:12px 20px;text-decoration:none;display:block;text-align:left}
.dropdown-content ul li a:hover{color:#ff0000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
div#myDropdown ul:before,div#myDropdown ul:after{content:"";position:absolute;left:13px;z-index:100;border-left:12px solid transparent;border-right:12px solid transparent}
div#myDropdown ul:after{top:-10px;border-bottom:13px solid #fafafa}
div#myDropdown ul:before{top:-11px;border-bottom:13px solid #eeeeee}
.show{display:block}

Chèn đoạn js sau trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
//]]></script>

Cuối cùng đặt đoạn HTML này vào vị trí mà bạn muốn hiển thị

<div class="dropdown"> <a onclick="myFunction()" class="dropbtn">Click me</a>
  <div id="myDropdown" class="dropdown-content">
    <ul>
      <li> <a href="#home">Home</a> </li>
      <li><a href="#about">About</a> </li>
      <li><a href="#contact">Contact Me</a> </li>
      <li><a href="#contact">Fanpage</a> </li>
      <li><a href="#contact">Policy</a> </li>
      <li><a href="#contact">Sitemap</a> </li>
    </ul>
  </div>
</div>

Bạn tự thay các thí sinh cần thay nhé.

Tùy chỉnh: Chỉnh CSS theo ý thích của bạn

Lỗi phát sinh:

+ Nếu có bất cứ id hoặc class nào trùng với template của bạn, hãy thay đổi để tránh xung đột
+ Không thể tránh khỏi trường hợp thừa hưởng css từ template (thẻ a, ul, li...) cho nên kết quả có thể khác demo nhé, vấn đề này phụ thuộc hoàn toàn vào trình css của bạn thôi, hãy chỉnh sửa sao cho bạn thấy hợp là OK

Good Luck !