Menu 2 cấp responsive cho blogger

Như tiêu đề, loại menu này có 2 cấp và tự động thay đổi giao diện khi độ rộng màn hình thay đổi. Ngày nay, dạng menu responsive rất phổ biến và rất thân thiện với thiết bị di động.

Giao diện menu ở chế độ bình thường

Giao diên menu ở chế độ thu gọn

Giao diện menu ở chế độ thu gọn, duyệt chuyên mục

• Khi tải source code về bạn giải nén ra ta được 3 file: style.css, script.js, index.html
• Cách cài đặt menu cho blogspot như sau:

          + Copy đoạn code sau pase phía trên </head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
          Đối với file "script.js" bạn nên upload lên host lưu trữ miễn phí như dropbox.com, sau đó lấy link thay vào.

          + Đối với file "Style.css", bạn dùng một chương trình notepad để mở nó ra và copy toàn bộ code trong đó, sau đó pase phía trên </b:sink>
          + Bước cuối cùng là copy đoạn code sau vào nơi bạn muốn menu xuất hiện
<div id='cssmenu'>
<ul>
   <li><a href='#'>Home</a></li>
   <li class='active'><a href='#'>Products</a>
      <ul>
         <li><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
         <li><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

Bạn có thể thay đổi và thêm nhiều nội dung cho menu.

|| Tải source code 2 sub responsive menu