Các bạn có thể xem hình minh họa hoặc demo:
VIEW DEMO
» Cách tạo menu ngang với các icon ẩn hiện khi dê chuột cho blogspot:
1. Đăng nhập vào blog
2. Chọn Bố cục (layout)
3. Chọn Thêm Tiện ích (Add widget) => Tạo một tiện ích HTML/Javarscipts và dán đoạn code bên dưới và dán vào phần nội dung của tiện ích bạn vừa tạo (Tất nhiên nếu muốn bạn có thể thêm nó trực tiếp vào trong Template của bạn).
<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/AVvXsEgd9rZjT78OhA70D0ET9OTOJzUDm6408bPFcycA5TB3a5p-sG9V7gzqx3IdlkJSj50msuxePSmzaDeqPAb84-_42RbSsHNcCMbf813pkKy2x2JU8vsExctz3cfmG89K7DxLLanLJK4sW50/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzvFh7WV4tTPBratKkx5SduVkgZlBPoxQa2RDt7U7hSGjba4b7Xrtil_1ITX-5T5tnnIex_zjMO70c2HMObYBra9I3bR9NCPKYKcpCr-Qri_L4NvKC2hPaajygwx5n0ef9AUkER0WzCdM/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvYl49vR_qQt-jqL8_2f8h3z166lVIsEkFAk-oa2Fx0_-P_FvrVyBbkx51OjK6qZIOMUc5jlfBsj17nv_QqGyEhdVyEEnzPO2_wo8zCzK9k85SYgQZKnZbSxgXW5WRZ4yWco-Tjl_A66g/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsD97tVGtnGCRLqsO2HpS9kba5-srv2iaVgpSTA0A2SElrvkOmqhcDgSrsMvc53LYPhaNo5SY_XsGIM_KYCG80yTK6vjDsuk8MaaPAdtBnxHCtVSp0zL_Aqj_15q3ZCYV6eYZ8uxbdam0/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLaR-Tvvtj6rM-mE1zd-4ayIiu6BIXoVC7iw5kV6e-ZDUXK66GfCQzPogk7xVYgU-sYunXB01q6C_PZggp9hAAfdEhdL0qdLodxqHWx-960IZmq_dI847suTVzFBX8JDU7mkbLbJ6BGUo/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.
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.
0 nhận xét:
Đăng nhận xét