Code menu ngang cuoi trang kieu 3

<span class='text_page_counter'>(1)</span>Ở kiểu 3 này có khác so với kiểu 1 và kiểu 2 , khi thầy cô cho trỏ chuột vào tiêu đề của mỗi tab thì nó sẽ hiển thị mầu khác so với ban đầu. 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ả: <style type="text/css"> /* CSS for sample sticky content */ .mattblacktabs{ overflow: hidden; width:770px; /*Chiều rộng của thanh menu*/ background:#FFFFFF; /*Màu nền thanh 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 trong mỗi tab*/ border-right: 1px solid white; /* Khoảng cách của mỗi tab*/ color: white; background: #0099FF ; /*Màu nền của tab khi chưa rê chuột vào*/.

<span class='text_page_counter'>(2)</span> } .mattblacktabs li a:visited{ color: white; } .mattblacktabs li a:hover, .mattblacktabs li.selected a{ background: #FF00FF ; /*Màu nền của tab khi 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= " </script> <script src=" 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ữ*/.

<span class='text_page_counter'>(3)</span> id="itlagi-Toolbar"> <div id="samplemenu" class="mattblacktabs"> <ul> <ul> <li><a href=" target="_blank">Code đồng hồ</a></li>. <li><a href=" Thử HTML</a></li>. <li><a href=" <li><a href=" lí văn bản</a></li>. <li><a href=" Google dịch</a></li>. <li><a href=" <li><a href=" <li><a href=" "target="_blank">Báo mới</a></li>.

<span class='text_page_counter'>(4)</span> <li><a href=" option=com_weblinks&catid=2&Itemid=36 "target="_blank">Lịch sử</a></li> <li><a href=" target="_blank">Web</a></li> </ul> </div> </div> * Mở rộng thêm: - Ở đoạn code trên có tất cả 10 tab, vì vậy nếu thầy cô muốn thay đổi hay thêm nhiều tab thì thầy cô copy đoạn code sau rồi dán trên dòng </ul> cuối cùng <li><a href="Địa chỉ liên kết" target="_blank">Tên tiêu đề</a></li> - Nếu muốn liên kết nội dung của trang web mình thì thầy cô thầy đổi thuộc tính liên kết bằng cách bỏ dòng lệnh ( target="_blank") thành: <li><a href="Địa chỉ 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 nữa ( VD: 20 tab) thì thầy cô thay đổi các thông số đã được tô đậm trong đó có: Di chuyển, khoảng cách các tab …...

<span class='text_page_counter'>(5)</span>