Bài đăng nổi bật

Ford Biên Hòa Đồng Nai - Đại lý mua bán xe giá tốt nhất

Xuất hiện tại Biên Hòa Đồng Nai từ năm 2007 tới nay, hãng xe Ôtô nổi tiếng tới từ Mỹ –  Ford Motor  đã khẳng định được một chỗ đứng trong l...

Chủ Nhật, 25 tháng 9, 2016

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

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

Để 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ả

0 nhận xét

Đăng nhận xét