Thứ Ba, ngày 29 tháng 11 năm 2016

Share CODE CSS3 tạo Flat MENU Đẹp cho mọi Wap/Web/Blog

CODE Thanh MENU Điều Hướng là một phần vô cùng quan trọng như một "Hướng dẫn viên du lịch" cho khách đến với website của bạn . Xây dựng CODE CSS3 MENU có rất nhiều cách và bên dưới đây codeseo.net xin giới thiệu MENU dạng Flat (Phẳng) rất Đơn Giản mà lại Đẹp Mắt

Bài viết hôm nay minh xin hướng dẫn các bạn "Tạo Flat Tabbled Menu Cho Website", Hy vọng nó hữu ích cho website của bạn.



Sau đây là cách thực hiện

1. CODE HTML

<div id='menu-wrapper'>
<ul>
   <li class='active'><a href='#'>Home</a></li>
   <li><a href='#'>Products</a></li>
   <li><a href='#'>Company</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

2. CODE CSS

<style type="text/css">

@import url(http://fonts.googleapis.com/css?family=Raleway);

#menu-wrapper{
  width:960px;
  margin:25px auto;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  border-bottom: 3px solid #47c9af;
  font-family: Raleway, sans-serif;
}

#menu-wrapper ul,
#menu-wrapper ul li,
#menu-wrapper ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#menu-wrapper:after,
#menu-wrapper > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#menu-wrapper ul {
  background: #ffffff;
}
#menu-wrapper > ul > li {
  float: left;
}
#menu-wrapper.align-center > ul {
  font-size: 0;
  text-align: center;
}
#menu-wrapper.align-center > ul > li {
  display: inline-block;
  float: none;
}
#menu-wrapper.align-right > ul > li {
  float: right;
}
#menu-wrapper.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#menu-wrapper > ul > li > a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}
#menu-wrapper > ul > li.active > a,
#menu-wrapper > ul > li:hover > a,
#menu-wrapper > ul > li > a:hover {
  color: #ffffff;
}
#menu-wrapper > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#menu-wrapper > ul > li.active > a:after,
#menu-wrapper > ul > li:hover > a:after,
#menu-wrapper > ul > li > a:hover:after {
  background: #47c9af;
}

</style>

Các bạn nhớ chỉnh sửa CODE HTML lại cho phù hợp với web của mình
Vậy là xong. Chúc các bạn thành công!