Thầy cô thay đổi địa chỉ liên kết, tên hiển thị và các dòng lệnh được tô đậm theo ý thích của mình Mô tả: /* CSS for sample sticky content */ .mattblacktabs{ overflow: hidden; width:770[r]
(1)Ở kiểu này có khác so với kiểu và kiểu , thầy cô cho trỏ chuột vào tiêu đề tab thì nó hiển thị mầu khác so với ban đầu Thầy cô thay đổi địa liên kết, tên hiển thị và các dòng lệnh tô đậm theo ý thích mình Mô tả: <style type="text/css"> /* CSS for sample sticky content */ mattblacktabs{ overflow: hidden; width:770px; /*Chiều rộng menu*/ background:#FFFFFF; /*Màu menu*/ } mattblacktabs ul{ margin: 0; list-style-type: none; } mattblacktabs ul li a{ display:block; float:left; color: FFFFFF; /*Màu chữ hiển thị trên tab */ } mattblacktabs li{ display: inline; margin: 0; } mattblacktabs li a{ float: left; display: block; text-decoration: none; margin: 0; padding: 7px 8px; /*padding bên tab*/ border-right: 1px solid white; /* Khoảng cách tab*/ color: white; background: #0099FF ; /*Màu tab chưa rê chuột vào*/ (2) } mattblacktabs li a:visited{ color: white; } mattblacktabs li a:hover, mattblacktabs li.selected a{ background: #FF00FF ; /*Màu tab rê chuột vào*/ } /* Sample CSS class applied to sticky element */ docked{ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow version*/ } </style> <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> <script src="http://dl.dropbox.com/u/66348944/menungangtheoblog.js" type="text/javascript"> </script> <script type="text/javascript"> //initialize sticky content: jQuery(document).ready(function($){ $('#samplemenu').stickyit({ gap: 5, stickyclass: "docked" }) }) </script><div style= "position: fixed; width: 100%; height: 25px; z-index: 0; left: 0pt; bottom: 0pt; border-top: 1px ; padding: 3px 70px; /* Di chuyển các tab lên xuống, qua lại*/ ont: bold 12px Verdana; /* Size và kiểu chữ*/ (3) id="itlagi-Toolbar"> <div id="samplemenu" class="mattblacktabs"> <ul> <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://www.baomoi.com/Home/TheGioi.epi "target="_blank">Báo mới</a></li> (4) <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 trên có tất 10 tab, vì thầy cô muốn thay đổi hay thêm nhiều tab thì thầy cô copy đoạn code sau dán trên dòng </ul> cuối cùng <li><a href="Địa liên kết" target="_blank">Tên tiêu đề</a></li> - Nếu muốn liên kết nội dung trang web mình thì thầy cô thầy đổi thuộc tính liên kết cách bỏ dòng lệnh ( target="_blank") thành: <li><a href="Địa liên kết">Tên tiêu đề</a></li> Rồi dán trên dòng </ul> cuối cùng - Nếu muốn thêm nhiều tab ( VD: 20 tab) thì thầy cô thay đổi các thông số đã tô đậm đó có: Di chuyển, khoảng cách các tab … (5)