Tạo Menu Ngang Xổ Dọc Có Hình Ảnh

Hãy cùng khám phá 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.

Menu xổ dọc có hình ảnh

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/AVvXsEiV_5q2iEwEkLlcpMnfrdWrwXHyuHfpGFeY50YG3IkESMfms4oE90sK-8K3MCRLc6w0jeMQFXOSZYmzmkF_6vD5_P3zNOmsBzFugnXOjlssFWVrqYStO7aswz3oyyBa3XlzBsy1bp6wFVpT/s1600/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZ_15wT646VXV98BA8G-UszVTu1l8K2aXPXPCWTaLZBELuz7qW41gp46OBH1X9VlJs9GGlE10vV7NrVvJCCcredf6LonatXnCQi8DZ_xrxrcbkejkoQ6LqHeWoAcPfMfp7HbkGAxKUhcW/s1600/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZuKA1_bKAkA-_8z10OH7XNzNQeWwc7MTF1jf4Q2QW9kQyyTPAy9i0MOUH_7cvxHdHdprx4C2_nP2ctFSs-C8SY4IVZye98zHb3-4hvVgTJRqY8MB4HWC1IziqBzlI30CqWqim-BVM6a4/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!

Nguồn: www.ikhampha.com