Code menu ngang cuối trang có tab gắn logo kiểu 4 Khác với kiểu 2 và kiểu 3, ở menu này, các tab sẽ đổi màu khi thầy cô rê chuột và sẽ dẫn thầy cô đến một trang Web/blog khác khi thầy cô[r]
(1)Code menu ngang cuối trang có tab gắn logo (kiểu 4) Khác với kiểu và kiểu 3, menu này, các tab đổi màu thầy cô rê chuột và dẫn thầy cô đến trang Web/blog khác thầy cô bấm vào "nó" Hơn nữa, tab thầy cô có thể gắn Logo (24px x 24px) để minh hoạ cho tiêu đề mà mình gắn trên đó Nếu logo có kích cở quá lớn thì nó hiển thị thành tab mà thầy cô gắn logo vào Thầy cô có thể thay đổi màu nền, màu chữ, thông số canh lề, khoảng cách, di chuyển tab lên xuống …khi menu hiển thị chưa phù hợp Thầy cô copy mô tả đây xem thử (chỉnh màn hình 1024by768px) *Mô tả: Thầy cô thay đổi phần tô đậm <style type="text/css"> .shadowblockmenu ul{ border: 1px solid #BBB; border-width: 3px 0; /* Dich chuyển menu lên hay xuống */ padding: 0; (2) margin: 0; overflow: hidden; } .shadowblockmenu ul li{ display: inline; margin:0; padding:0; } .shadowblockmenu ul li a{ display:block; float:left; text-transform: uppercase; color: #0066CC; /*Màu chữ thứ hiển thị trên menu */ padding: 8px 15px 8px 9px; /* Canh lề giưa logo, chữ, tab, menu*/ margin: 0; text-decoration: none; border-right: 1px solid #BBB; /* Khoảng cách các tab trên menu và màu hiển thị khoảng cách*/ -moz-box-shadow: inset -7px 10px rgba( 114,114,114, 0.4); /* Add inset shadow to each menu item First values in ( 114,114,114, 0.4) specifies rgb values, last specifies opacity */ -webkit-box-shadow: inset -7px 10px rgba( 114,114,114, 0.4); box-shadow: inset -7px 10px rgba(114,114,114, 0.4); (3) text-shadow: -1px 1px #BBB; /* Màu chữ thứ hiển thị trên menu */ -moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */ -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */ border-left: 1pxsolid #BBB; /* add border to left side of first menu link */ padding-left:22px; /* Khoảng cách logo và chữ */ background: url(http://d4.violet.vn/uploads/blogs/754645/clock-icon.png) 1px center no-repeat; /*Link ảnh logo */ } .shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */ padding-left:23px; /* Khoảng cách logo và chữ trên tab */ background: url(http://d4.violet.vn/uploads/blogs/754645/html-icon.png) 1px center no-repeat; /* Link ảnh logo */ } (4) shadowblockmenu li:nth-of-type(3) a{ /* Extra style for 2nd menu link */ padding-left:23px; /* Khoảng cách logo và chữ trên tab */ background: url(http://d4.violet.vn/uploads/blogs/754645/axialis-icon-workshopicon_01.png) 1px center no-repeat; /* Link ảnh logo */ } .shadowblockmenu li:nth-of-type(4) a{ /* Extra style for 2nd menu link */ padding-left:23px; /* Khoảng cách logo và chữ trên tab */ background: url(http://d4.violet.vn/uploads/blogs/754645/font-expert-icon.png) 1px center no-repeat; /* Link ảnh logo */ } .shadowblockmenu li:nth-of-type(5) a{ /* Extra style for 2nd menu link */ padding-left:22px; /* Khoảng cách logo và chữ trên tab */ background: url(http://d4.violet.vn/uploads/blogs/754645/google-icon.png) 1px center no-repeat; /* Link ảnh logo */ } .shadowblockmenu li:nth-of-type(6) a{ /* Extra style for 2nd menu link */ padding-left:23px; /* Khoảng cách logo và chữ trên tab */ (5) background: url(http://d4.violet.vn/uploads/blogs/754645/notebook-with-iconsicon.png ) 1px center no-repeat; /* Link ảnh logo */ } shadowblockmenu li:nth-of-type(7) a{ /* Extra style for 2nd menu link */ padding-left:22px; /* Khoảng cách logo và chữ trên tab */ background: url(http://d4.violet.vn/uploads/blogs/754645/devices-audio-inputmicrophone-icon.png) 1px center no-repeat; /* Link ảnh logo */ } shadowblockmenu li:nth-of-type(8) a{ /* Extra style for 2nd menu link */ padding-left:23px; /* Khoảng cách logo và chữ trên tab */ background: url(http://d4.violet.vn/uploads/blogs/754645/apps-preferences-desktopicons-icon.png ) 1px center no-repeat; /* Link ảnh logo */ } shadowblockmenu li:nth-of-type(9) a{ /* Extra style for 2nd menu link */ padding-left:24px; /* Khoảng cách logo và chữ trên tab */ background: url(http://d4.violet.vn/uploads/blogs/754645/vietnam-icon1.png) 1px center no-repeat; /* Link ảnh logo */ } shadowblockmenu li:nth-of-type(10) a{ /* Extra style for 2nd menu link */ padding-left:24px; /* Khoảng cách logo và chữ trên tab */ background: url(http://d4.violet.vn/uploads/blogs/754645/emails-folder-icon.png) 1px center no-repeat; /* Link ảnh logo */ (6) } .shadowblockmenu ul li a:hover{ color: black; -moz-box-shadow: inset -7px 10px rgba(30, 144, 255, 0.4), inset 0 12px rgba(60,162,221, 15);/*Hai màu trên tab menu*/ -webkit-box-shadow: inset -7px 10px rgba(60,162,221, 0.15), inset 0 12px rgba( 60,162,221, 15); box-shadow: inset -7px 10px rgba( 30, 144, 255, 0.4), inset 0 12px rgba(60,162,221, 15);/*Đậm nhạt hai màu*/ } </style> <div style= "position: fixed; width: 100%; height: 29px; /* Ngang, rộng và di chuyển lên xuống các tab mà thầy cô muốn thêm menu nữa*/ z-index: 0; left: 0pt; /* Canh lề các tab*/ bottom: 0pt; border-top: 0px ; padding: 0px 1px; /*Kích thước menu di chuyển các tab lên xuống, sang trái phải */ background-color: rgb(243, 243, 243); /*Thầy cô xóa dòng này lấy trang blog làm nền*/ font-family: Times New Roman; font-size: 10pt; font-weight: Bold;" (7) id="itlagi-Toolbar"> <div class="shadowblockmenu"> <ul> <li><a href="http://www.clocklink.com/" target="_blank">Code đồng hồ</a></li> <li><a href="http://ngainguyen.110mb.com/thumavanngai.html"target="_blank"> Thử HTML</a></li> <li><a href="http://www.iconarchive.com/"target="_blank">Icon</a></li> <li><a href="http://trangnhat.net/tienich/tiengviet.htm"target="_blank">Xử lí văn bản</a></li> <li><a href="http://translate.google.com.vn/?hl=vi&tab=wT"target="_blank"> Google dịch</a></li> <li><a href="http://www.fontchu.com/"target="_blank">Font</a></li> <li><a href=" http://ziczac.vn/karaoke.html"target="_blank">Karaoke</a></li> <li><a href=" http://violet.vn/songkimsnhn2007/entry/list/cat_id/6173365 "target="_blank">Tổng hợp</a></li> (8) <li><a href="http://www.lichsuvietnam.vn/home.php? option=com_weblinks&catid=2&Itemid=36 "target="_blank">Lịch sử</a></li> <li><a href="http://www.vietnamwebsite.net/google/ "target="_blank">Web</a></li> </ul> </div> </div> * Mở rộng thêm: - Ở đoạn code phía trên có tất là 10 tab, vì thấy cô muốn thay đổi theo ý mình thì copy (hoặc xóa bớt cho phù hợp) dòng lệnh đây dán vào phía và thay đổi số thứ tự nằm ngoặc đơn theo số lớn dần shadowblockmenu li:nth-of-type(10) a{ /* Extra style for 2nd menu link */ padding-left:25px; background: url(Link ảnh Logo) 1px center no-repeat; /* Link ảnh logo */ } Sau đó, copy thêm dòng lệnh này dán trên dòng </ul> cuối cùng <li><a href="địa liên kết">Tên hiển thị số </a></li> - Ví dụ: Ở đoạn code trên có 10 tab, tôi muốn thêm 10 tab là 20 tab, thì code giống này: (9) <style type="text/css"> .shadowblockmenu ul{ border: 1px solid #BBB; border-width: 3px 0; /* Dich chuyển menu lên hay xuống */ padding: 0; margin: 0; overflow: hidden; } …………………………… shadowblockmenu li:nth-of-type(11) a{ /* Extra style for 2nd menu link */ padding-left:25px; background: url(Link ảnh Logo) 1px center no-repeat; /* Link ảnh logo */ } shadowblockmenu li:nth-of-type(12) a{ /* Extra style for 2nd menu link */ padding-left:25px; background: url(Link ảnh Logo) 1px center no-repeat; /* Link ảnh logo */ } shadowblockmenu li:nth-of-type(13) a{ /* Extra style for 2nd menu link */ padding-left:25px; background: url(Link ảnh Logo) 1px center no-repeat; /* Link ảnh logo */ } shadowblockmenu li:nth-of-type(14) a{ /* Extra style for 2nd menu link */ padding-left:25px; background: url(Link ảnh Logo) 1px center no-repeat; /* Link ảnh logo */ } shadowblockmenu li:nth-of-type(15) a{ /* Extra style for 2nd menu link */ padding-left:25px; background: url(Link ảnh Logo) 1px center no-repeat; /* Link ảnh logo */ } shadowblockmenu li:nth-of-type(16) a{ /* Extra style for 2nd menu link */ (10) padding-left:25px; background: url(Link ảnh Logo) 1px center no-repeat; /* Link ảnh logo */ } Sau đó, thầy cô thay đổi thông số … : height: 29px; /* Ngang, rộng và di chuyển lên xuống các tab mà thầy cô muốn thêm menu nữa*/ </style> <div class="shadowblockmenu"> <li><a href="địa liên kết">Tên hiển thị số 11</a></li> <li><a href="địa liên kết">Tên hiển thị số 12</a></li> <li><a href="địa liên kết">Tên hiển thị số 13</a></li> <li><a href="địa liên kết">Tên hiển thị số 14</a></li> <li><a href="địa liên kết">Tên hiển thị số 15</a></li> <li><a href="địa liên kết">Tên hiển thị số 16</a></li> <li><a href="địa liên kết">Tên hiển thị số 17</a></li> ………………… </ul> </div> Chúc các thầy cô và các bạn thành công (11)