Hướng dẫn chỉnh sửa 
Các bạn sau khi dán đoạn code như bên dưới vào tiện ích HTML của mình thì hãy chỉnh sửa code cho phù hợp với mình như sau:
- Thay đoạn link màu xanh bằng link ảnh bìa của riêng mình
- Thay đoạn link màu đỏ bằng link liên kết mà bạn muốn đưa tới của menu.
- Thay dòng màu hồng bằng tên của chuyên mục mà bạn muốn đưa tời (phù hợp với link màu đỏ)
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /> Hướng dẫn chỉnh sửa <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /></a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /> Hướng dẫn chỉnh sửa <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /></a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /> Hướng dẫn chỉnh sửa <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /></a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /> Hướng dẫn chỉnh sửa <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /></a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /> Hướng dẫn chỉnh sửa <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /></a></li>
</ul><br style="clear: left" />
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-viDPKkgd0whEvzXKXGLDlkWoEpJXnI71JLH_eZ2VG7fdHXIE9b_7-8Z42iWeWOXW0bJ2P8nA3W1HEoxsPQmW4oeGO0rSNuzjbd5ZolYrjhykmffw6AiTM9ZybKO3zJYpl7AvJ8Mib7U/s1600/tieude1.gif" height="350" width="990" />
</div>
<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#153E7E; /* màu nền của menu*/
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;z-index:30;
}
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{
display: inline-block;
}
/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu cchữ các menu
}*/
.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li ul{
top: 0;
}
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul> </li> </ul></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a></li>
</ul><br style="clear: left" />
</div>
- Thay đoạn link màu xanh bằng link ảnh bìa của riêng mình
- Thay đoạn link màu đỏ bằng link liên kết mà bạn muốn đưa tới của menu.
- Thay dòng màu hồng bằng tên của chuyên mục mà bạn muốn đưa tời (phù hợp với link màu đỏ)
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /> Hướng dẫn chỉnh sửa <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /></a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /> Hướng dẫn chỉnh sửa <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /></a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /> Hướng dẫn chỉnh sửa <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /></a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /> Hướng dẫn chỉnh sửa <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /></a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /> Hướng dẫn chỉnh sửa <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCjcHuNEPgr1OCzDgwGAbMowBuUUQ4x4g5jyskvKPs-DAnR2BKOjR6BKuMcNtKHmExnPKYV4VFugXiKbiyQWxPKKYAXyLHslp5C-MAjH7mXDymFYmlasV_U0ZmBuXZ2k-hPIDc4jbcmk/s1600/hoa_xoay.gif" /></a></li>
</ul><br style="clear: left" />
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-viDPKkgd0whEvzXKXGLDlkWoEpJXnI71JLH_eZ2VG7fdHXIE9b_7-8Z42iWeWOXW0bJ2P8nA3W1HEoxsPQmW4oeGO0rSNuzjbd5ZolYrjhykmffw6AiTM9ZybKO3zJYpl7AvJ8Mib7U/s1600/tieude1.gif" height="350" width="990" />
</div>
<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#153E7E; /* màu nền của menu*/
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;z-index:30;
}
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{
display: inline-block;
}
/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu cchữ các menu
}*/
.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li ul{
top: 0;
}
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul> </li> </ul></li>
<li><a href="http://googleyenbai.blogspot.com/2014/07/huong-dan-sua-menu-ngang.html">Hướng dẫn chỉnh sửa</a></li>
</ul><br style="clear: left" />
</div>
Không có nhận xét nào:
Đăng nhận xét