Code Tạo Menu Ngang Xổ Dọc Có Hình Ảnh đẹp và chuyên nghiệp

Thông thường những template blogspot trên mạng menu rất thô và không đẹp. Để người thiết kế blogger được tùy chỉnh menu của mình. Người chia sẻ giới thiệu với các bạn code Menu xổ dọc có hình ảnh thu nhỏ rất đẹp. Thanh menu ngang này có thể áp dụng cho cả blogspot và website mã nguồn khác.

Công đoạn thực hiện chỉ bao gồm 2 bước 

Bước 1: Tìm thẻ đóng </head> và thêm đoạn code bên dưới vào trước </head>

<style type='text/css'>
.menu { 
 height: 40px;
 width: 505px;

 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}

/* Links */

.menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;

 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;

 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;

 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);

 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

/* Sub Menu */

.menu ul {
 position: absolute;
 top: 40px;
 left: 0;

 opacity: 0;

 background: #1f2024;

 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;

 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;

 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}

.menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}

.menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;

 border: none;
 border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }
/* Icons */
.menu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNldjcbsTCXB4OTulZhekgPxwVjxgEO3X9waSizIuWYOP5I67H8dPkoe7ADeKMgRwFYCsJ6kbFu6l02O4hShZyYKDBQi1S8zHbBx7n57NgBlRR90hgtmDfsFFe5S-5VXiRiIWRkRxX6h6/s1600/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjixfv5tfxDJYV16igddmSgrkgCVTkmE2jjgc64ktmJ1dPsGNMRIXKwEf_Vh23LDwpnqNvsZ9aDUGVwXhDWKs4CF3pc5hd6xnlVm7065ihazaVYSRHftXJsGfCFdOcIcBhXEAnSlo1OTpL/s1600/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJGvzxHp1b4r3S4Ce2CyKdTRImLshMu8GWcLebx1yo0ZXBgBjS1NAKnQcWCiGvVNDxoUw3aiZbVakNqSjewvDlN2YNyhvSYWNgQQCckjPJSYnWgi91-Vvihp61Q4cKXw0qr3M_AQcScCar/s1600/arrow.png) no-repeat 6px center; }
</style>

Bước 2: Thêm code cung cấp dưới dây vào vị trí bạn muốn hiển thị

<ul class="menu">

 <li><a href="Your Link">My dashboard</a></li>
 <li><a href="Your Link">Likes</a></li>
 <li><a href="Your Link">Views</a>

  <ul>
   <li><a href="Your Link" class="documents">Documents</a></li>
   <li><a href="Your Link" class="messages">Messages</a></li>
   <li><a href="Your Link" class="signout">Sign Out</a></li>
  </ul>

 </li>
 <li><a href="Your Link">Uploads</a></li>
 <li><a href="Your Link">Videos</a></li>
 <li><a href="Your Link">Documents</a></li>

</ul> <!-- end .menu -->

* Các bạn chỉnh sửa your link, nội dung các menu sao cho phù hợp với nhu bố cục trang web của bạn.

 Chúc các bạn thành công và luôn đồng hành cùng người chia sẻ !