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]
Trang 1Ở 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*/
Trang 2.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=
"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ữ*/
Trang 3<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>
Trang 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 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 …