Mình muốn làm một Thanh đường dẫn tương tự như Thanh đường dẫn của DEVs
Theo hướng dẫn tại địa chỉ: http://jsfiddle.net/nXrDn/ sẽ cho ra kết quả:
Mình đã:
1- Thêm vào CSS:
2- Thêm vào viewtopic_body:
trước:
Kết quả: Lỗi như hình bên dưới:
Rất mong nhận được sự giúp đỡ của các bạn. Xin cảm ơn.
Demo: http://doquangthiem.lifeme.net/
Nick test: Panda
Password: 0123456789min
Theo hướng dẫn tại địa chỉ: http://jsfiddle.net/nXrDn/ sẽ cho ra kết quả:
Mình đã:
1- Thêm vào CSS:
- Code:
.indicator {
width:19px;
height:45px;
background:url('http://i10.servimg.com/u/f10/18/00/07/60/s11.png');
background-size:cover;
position:absolute;
top:0px;
left:105px;
}
.pun-crumbs {
background:#dff1ff;
border:2px solid #316ac5;
width:97%;
height:45px;
border-radius:7px 7px 7px;
position:relative;
}
.crumbs {
position:absolute;
top:0px;
left:0px;
width:120px;
text-align:center;
padding:13px 0px;
}
.crumbs a {
text-decoration:none;
color:#316ac5;
font-family:Segoe UI;
font-size:14px;
z-index:4;
}
.crumbs a:hover {
text-decoration:none;
color:#FF0000;
font-family:Segoe UI;
font-size:14px;
z-index:4;
}
2- Thêm vào viewtopic_body:
- Code:
<script type="text/javascript">
//<![CDATA[
$(document).ready( function() {
$(".crumbs a").each( function() {
$(this).append('<div class="indicator"></div>');
});
var i = 0;
var linkpos= new Array("0,0", "0,110", "0,220", "0,330", "0,440", "0,550", "0,660");
$(".crumbs").each( function() {
var s = linkpos[i];
var x = s.split(",");
var t = x[0];
var l = x[1];
$(this).css({ "top":t+"px", "left":l+"px" });
i++;
});
});
</script>
trước:
- Code:
<div class="pun-crumbs">
Kết quả: Lỗi như hình bên dưới:
Rất mong nhận được sự giúp đỡ của các bạn. Xin cảm ơn.
Demo: http://doquangthiem.lifeme.net/
Nick test: Panda
Password: 0123456789min