Menu ngang với icon ẩn hiện từ CSS3 cho blogger

Rất nhiều nhà thiết kế sử dụng hình ảnh kết hợp với CSS3 trong tiến trình hoạt động của menu. Với kỹ thuật này họ phải tập trung để trang của bạn tải nhanh hơn và tính tương tác cao hơn.

Trong hướng dẫn làm meuu này chúng ta sẽ thấy các icon ẩn hiện rất mượt mà khi di chuột trên thanh menu mà không cần sử dụng bất kỳ thư viện JavaScript, tất cả thuần túy chỉ là các biểu tượng và CSS3.

Các bạn có thể xem hình minh họa hoặc demo ở bên dưới nha:

VIEW DEMO

<style>
#namkna-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#namkna-nav li {float: left;}
#namkna-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#namkna-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#namkna-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#namkna-nav li a:hover {cursor: pointer;}
#namkna-nav li a:hover img {top: -85px;}
#namkna-nav li a:hover .aname {top: 85px;}
#namkna-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#namkna-nav li:nth-child(2) a {background: #9bc704;}
#namkna-nav li:nth-child(3) a {background: #0dc3ff;}
#namkna-nav li:nth-child(4) a {background: #51a2ec;}
#namkna-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;} 
</style>
<div id="namkna-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuWLgcWea9vWVeOQX8aR497H-wa0AUhLfeK7BP5D_ePaHE0dNxLE8KdtQFqypSj7jYGe-zYuUtDW2cAjASQFgbT5w6R92QJ52uj8UOmOQbjiKyR_FLB2EwdOjUCkfqeh4Wp-jTD5tVaRY/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDR8xz2eenTXeqLfB1JvyUHWGcws6W2N9f67ZVeRfyfQnmiP_pOLqNUiQ4bQsceF548WV7plFtb2L3haY_AHO7HiaiYOrt_JJiQtArbtMOtI2LG5icg_IkywW3IU_5fr-boRUTil_ae2U/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj853DxJVvl8iVq4ourCW7OWcs7UECi32vzh6bE31mNz_62AVwheiu54JZgtWj8h_T8DU053XUAXeZOow3wc3BopxxSKtedbe-xoq5-M4Vz-zHIulwDPhMDZumeS0dybEwiurG_ik9OkYQ/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUcFL2F2QBPP4aB1h7nWfpiPo_E9mZee4OZATFzK5uaBwhKwMqhaRenYeqcg1XDHFWppAYBFrG8Cx7dZrM6pBJjQp3YWbGQdrB53_wo_-tdGA8ySYPg9Y8g_cxriK0mw3pWgJSzpZbIgY/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqohfktwWueS0QroC80MBedvl0YCndmX_J8a5ta_ebBG69hwLiDEhHse2FfuaLd4ko-yoRdqxVSiQ_rZhXevcx2LTIMB3y6snaC3o3PV7KcL8xe7TdcsRm3YF3q-hWw842w6gV0hHtgjE/s1600/btrix-contact.png" /> </a> </li> </div>

» Tùy chỉnh: 
margin: 100px auto; Bạn có thể chỉnh lại đoạn này để định dạng lại vị trí của menu so với lề trên, lề dưới, lề phải và lề trái của tiện ích chứa menu.
Thay các dấu thăng (#) thành các liên kết tới các bài viết hoặc các nhãn mà bạn muốn.
Thay các chữ màu cam thành tiêu đề tương ứng với các liên kết (#) mà bạn đã thêm trước đó.
Cuối cùng quan trọng nhất là sửa những hình ảnh màu xanh đại diện cho tiêu đề và liên kết đó của bạn.

Bạn có thể thay đổi màu nền của  từng ô trên menu bằng cách thay đổi những đoạn được namkna tô màu cam.
width: 632px; Là chiều rộng của menu.
height: 87px; Là chiều cao của menu.
color: white;width: 120px;height: 61px; Lần lượt là Màu chữ trên menu, Chiều rộng của mỗi một ô tiêu đề nhỏ trên menu, chiều cao của một ô chứa tiêu đề nhỏ trên menu.
font: bold 17px/61px "Arial" Trong đó 17px là cỡ chữ của tiêu đề, Arial là kiểu chữ mà bạn muốn.
top: -85px; Là vị trí của hình ảnh xuất hiện khi dê chuột vào. Nếu bạn muốn hình ảnh hiện nhiều hay ít thì chỉnh ở đoạn này nha.

4- Lưu tiện ích lại và kiểm tra thành quả nha.

Theo: Namkna