Friday, September 6, 2019

Hướng dẫn code menu ngang đẹp bằng html css có hiệu ứng hover

Một trang web có chứa các thành phần quan trọng. Trong đó, menu ngang chiếm một vị trí không thể thiếu để hình thành nên bố cục, cũng như tạo cho website trở nên chuyên nghiệp và đa dụng.


Vậy làm thế nào để có một menu chính đẹp, hãy đọc bài chia sẻ hướng dẫn code menu ngang đẹp bằng html css dưới đây.


Mình chỉ lấy ví dụ để các bạn hiểu, từ đó có thể phát triển ý tưởng từ đoạn code này.

Hướng dẫn code menu ngang đẹp bằng html css có hiệu ứng hover

Bây giờ các bạn vào phần mềm gõ code và tạo project với tên file là index.html.


Tiện thể mình chia sẻ luôn cách để code nhanh một dự án, ở đây mình hay sử dụng phần mềm sublime text có cài plugin hỗ trợ, hôm sau mình sẽ hướng dẫn cài plugin cho sublime text cũng như cách dùng một số packet control.

Khai báo html

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 </head>
<body>
    <nav>   
      <div class="menu">
        <ul class="clear">
          <li>
            <a href="#" title="Home">
              <i class="fa fa-home" aria-hidden="true"></i>
              <span class="link-text">Home page</span>
            </a>
          </li>
       
           <li>
            <a href="#" title="About">
              <i class="fa fa-camera" aria-hidden="true"></i>
               <span class="link-text">About us</span>
            </a>
          </li>
          <li>
            <a href="#" title="Product">
              <i class="fa fa-pencil" aria-hidden="true"></i>
              <span class="link-text">Product</span>
            </a>
          </li>
          <li>
            <a href="#" title="Blog">
              <i class="fa fa-comment" aria-hidden="true"></i>
              <span class="link-text">Blog</span>
            </a>
          </li>
          <li>
            <a href="#" title="Contact">
              <i class="fa fa-envelope" aria-hidden="true"></i>
              <span class="link-text">Contact</span>
            </a>
          </li>
        </ul>
      </div>
</nav>
</body>
</html>

Tao file style.css rồi copy mà sau vào file đó và chèn bên trong cặp thẻ head với cú pháp như sau:

Do code html trên có các class icon do đó mình sử dụng link đến bootstrap

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">

Mã css:

  body {
  background:url(hero-bg.jpg) #222 ;
        background-size: cover;
        background-position: center;
        height: 85vh;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}
a {
  text-decoration: none;
}
.clear:after {
  content: " ";
  display: block;
  clear: both;
}
nav .menu {
  margin-top: 159px;
  text-align: center;
    margin-left: -37px;
}
nav .menu ul {
  list-style-type: none;
  display: inline-block;
}
nav .menu ul li {
  float: left;
  width: 124px;
  height: 140px;
  border-left: 1px solid;
  border-color: #e3e3e3;
  background-color: #fff;
  -moz-transition: background-color 0.2s linear 0s;
  -ms-transition: background-color 0.2s linear 0s;
  -o-transition: background-color 0.2s linear 0s;
  -webkit-transition: background-color 0.2s linear 0s;
  transition: background-color 0.2s linear 0s;
}
nav .menu ul li:last-child {
  border-right: 1px solid #e3e3e3;
}
nav .menu ul li a {
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}
nav .menu a i {
    display: block;
    vertical-align: middle;
    color: #333;
    font-size: 23px;
    -moz-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
    padding: 44px 0px 10px;
}
nav .menu a i:before {
  border: 2px solid;
  border-color: #333;
  border-radius: 500px;
  width: 41px;
  display: inline-block;
  height: 41px;
  line-height: 37px;
  transition: color 0.2s linear 0s, font-size 0.2s linear 0s, border-color 0.2s linear 0.2s, height 0.2s linear 0s, width 0.2s linear 0s, line-height 0.2s linear 0s;
}
nav .menu a .link-text {
    right: 45px;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    -moz-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
nav .menu ul li:hover {
  background-color: #ffea00;
  border-color: #ffea00;
}
nav .menu ul li:hover + li {
  border-color: #ffea00;
}
nav .menu ul li:hover + li:last-child {
  border-right-color: #e3e3e3;
}
nav .menu ul li:hover .link-text {
  opacity: 0;
}
nav .menu ul li:hover i {
  color: #333;
  font-size: 43px;
}
nav .menu ul li:hover i:before {
  border-color: transparent;
  border-radius: 500px;
  width: 66px;
  height: 66px;
  line-height: 40px;
  transition: color 0.2s linear 0s, font-size 0.2s linear 0s, border-color 0.2s linear 0s, height 0.2s linear 0s, width 0.2s linear 0s, line-height 0.2s linear 0s;
}
Code menu ngang không phải là khó chỉ cần chúng ta có ít kiến thức cơ bản cũng như ý tưởng thôi, chúc các bạn thực hành tốt

Like và chia sẻ nếu thấy bổ ích nhé :D 
     

Điểm 4.6/5 dựa vào 87 đánh giá
  • Lazada : Mở chương trình "giá khuynh đảo", giới hạn mỗi người mua tối đa 2 sản phẩm Click xem
  • Adayroi : iPhone 7 lần đầu về giá dưới 15 triệu đồng Click xem
  • Tiki : Giảm 10% cho thẻ tín dụng HSBC Click xem

Bài liên quan

Đây là bài mới nhất