Menu ngang với hiệu ứng CSS3

ảnh minh họa

Ở bài trước mình đã hướng dẫn Tạo Menu với hiệu ứng hình ảnh đẹp mắt Blogger/Website  Và để tiếp tục hôm nay mình xẽ hướng dẫn các bạn tạo Menu ngang với hiệu ứng CSS3 . Demo các bạn xem ngay bên dưới nhé
Và đây là cách để thêm menu này :
Bước 1 : Thêm đoạn css sau và trước </head>

<style>
html { height: 100%; background: black; }
ul {
  overflow: hidden;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  min-width: 800px; max-width: 1600px;
  background: rgba(white, .2);
  font-size: 0;
  text-align: center;
}
li {
  display: inline-block;
  position: relative;
  width: 12.5%; height: 100%;
  font: 1rem/3 trebuchet ms, verdana, century gothic, arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;

  @for $i from 0 to 8 {
    &:nth-child(#{$i + 1}) {
      $c: hsl($i*360/8, 100%, 70%);
      color: $c;
   
      &:hover {
        color: black;
     
        & ~ li:last-child {
          transform: translate($i*100%);
          background: lighten($c, 5%);
          transition: .7s cubic-bezier(.175, .885, .32, 1.275);
        }
      }
    }
  }

  &:last-child {
    position: absolute;
    z-index: -1;
    left: 0%;
    transform: translate(350%);
    background: rgba(white, 0);
    transition: background .35s ease-out, transform 0s .35s;
  }
}
</style>

Bước 2 : Tiếp theo các bạn chèn code bên dưới vào nơi cần hiển thị Menu ngang với hiệu ứng CSS3

<ul>
  <li>news</li>
  <li>products</li>
  <li>services</li>
  <li>gallery</li>
  <li>about us</li>
  <li>contact</li>
  <li>jobs</li>
  <li>blog</li>
  <li></li>
</ul>

Nguồn : iChiaSe.Biz

Tag : HTML & CSS, Thủ Thuật Blogger