Home › Blogger › CSS

Tạo thanh Menu Dropdown chỉ dùng CSS cho blogger

Label: Blogger, CSS Admin March 11, 2016
Để tạo một thanh Menu navigation chúng ta thường sử dụng Javascript. Bài viết này sẽ hướng dẫn bạn tạo thanh Menu navigation chỉ sử dụng CSS, điều này sẽ giúp tải trang nhanh hơn so với dùng Javascript. Thậm chí nó vẫn có thể hoạt động cho dù bạn có chặn Javascript trên trình duyệt,đơn giản bởi vì nó đâu có dùng Javascript
Để chèn menu này vào blogger bạn cần đăng nhập vào Blogger > edit Template. Sau đó chèn đoạn CSS sau vào trước thẻ ]]></b:skin> hoặc </style>
ul#menu,
ul#menu ul.sub-menu {
  padding: 0;
  margin: 0;
  text-align: center;
  opacity: .9
}
ul#menu li,
ul#menu ul.sub-menu li {
  list-style-type: none;
  display: inline-block;
  width: 120px
}
ul#menu li a,
ul#menu li ul.sub-menu li a {
  text-decoration: none;
  color: #fff;
  background: #666;
  padding: 5px;
  display: block
}
ul#menu li a:hover,
ul#menu li ul.sub-menu li a:hover {
  background: #333
}
ul#menu li {
  position: relative
}
ul#menu li ul.sub-menu {
  position: absolute;
  top: 30px;
  display: none
}
ul#menu li:hover ul.sub-menu {
  display: block
}
Sau đó chèn đoạn code bên dưới vào dưới thẻ <body>
<ul id="menu">
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu 1</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 5</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </li>
</ul>
Đổi tên các Menu theo ý của bạn. Sau đó lưu lại Template và xem kết quả

No comments:

Post a Comment