MENU NGANG ĐỔI MÀU TAB KHI RÊ CHUỘT (Kiểu 1)

Trước đây, tôi có post một bài về các mẫu menu ngang (Xem TẠI ĐÂY). Hôm nay, tôi "post" thêm một mẫu menu ngang đơn giản nhưng khá đẹp, menu ngang này sẽ có hiệu ứng đổi màu các Tab khi bạn rê chuột vào.

Menu này không có menu con nên rất thích hợp với các blog có ít nhãn. Mới bạn bấm vào "Xem thử" phía dưới để thấy rõ menu ngang này.

Xem thử

Bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán code này vào.

<style>
#bt4unavmenu{height:46px;display:block;overflow:hidden;padding:5px 0;margin-bottom:6px;border:1px solid #333;-moz-border-radius:07px; -khtml-border-radius:07px;-moz-border-radius:15px; -khtml-border-radius:15px;box-shadow:0px 0px 15px #252525;
-webkit-box-shadow:0px 0px 10px #252525;
-moz-box-shadow: 0px 0px 10px #252525;background:#222 url() left top repeat-x}
#bt4unavmenu .current-cat a{background:#dc0000 url() top left repeat-x;color:#FFF;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #111}
#bt4unav a,#subMenusContainer a{text-decoration:none;display:block}
#bt4unav a{margin:0;float:left;background:none;padding:15px 15px 15px 15px;color:#fff;text-transform:uppercase;font-weight:bold;font-size:12px;border:1px solid #222}
#bt4unav li a:hover,#bt4unav li a:focus,#bt4unav a.mainMenuParentBtnFocused{background:#8eda22 url() top left repeat-x;color:#fff;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #333}
#bt4unav,#bt4unav ul,#bt4unav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#bt4unav ol,#bt4unav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#bt4unav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 4px;height:44px;display:inline;background:url() left center no-repeat}
#bt4unav li:first-child{background:none;padding:0 2px 0 0}
#bt4unav{width:940px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
</style>
<div id='bt4unavmenu'>
<ul id='bt4unav'>
<li class='current-cat'><a href='http://anhdepblog.blogspot.com/'>Trang chủ</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
</ul>
</div>

Bây giờ, bạn có thể thay đổi các dòng lệnh màu đỏ để phù hợp với blog của mình. Trong đó:

Color: #fff là màu chữ của menu

Font size: 12px là kích cỡ của chữ

Background: #8eda22: màu tab khi rê chuột vào. 

Width: 940px là chiều dài của thanh menu.

Thay các dấu thăng "#" thành các link mà bạn muốn liên kết đến.

Thay đổi tên menu thành tên khác mà bạn muốn.

Sau cùng bấm Lưu lại và trở vào blog xem thành quả nha.

Chúc các bạn thành công.

Nguồn: Thủ thuật code