[Hỏi đáp] Thanh đường dẫn đẹp

  Bài viết hay nhất1
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:

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
  Bài viết hay nhất2
Thanh breadcrumb giúp người dùng dễ dàng điều hướng, biết được vị trí trong diễn đàn. Trong phiên bản PunBB thì nó gặp lỗi nhỏ ở các trang phụ, và cũng khó tùy chỉnh giao diện. Hướng dẫn này sẽ dùng Javascript điều chỉnh lại cấu trúc của breadcrumb trong PunBB, và thêm CSS để có được giao diện thân thiện hơn.



Hướng dẫn


Trước tiên hãy xóa hết CSS và JS liên quan đến breadcrumb (thanh đường dẫn) mà bạn đã thêm vào, rồi làm theo hướng dẫn sau:

Bước 1

Trong template overall_footer_begin, tìm:
Code:
<div id="pun-foot">
Thêm vào trước đó, code sau:
Code:
<script type="text/javascript">
//<![CDATA[
/* breadcrumb for punbb - devs.forumvi.com */
$(".pun-crumbs").each(function() {
    var $crumbs = $(this);
    $crumbs.find("strong").has("a").replaceWith(function() {
        return this.innerHTML;
    });
    var $items = $crumbs.find(".crumbs").children(),
        $navstrip = $('<ul class="navstrip clearfix"></ul>');
    $crumbs.empty().html($navstrip);
    $items.not(":empty").appendTo($navstrip).wrap("<li></li>");
    $items.first().parent().addClass("begin");
}).html(function() {
    return this.innerHTML.replace(/(»\s|&nbsp\;»&nbsp\;)/g, "");
});
//]]>
</script>

Bước 2

Thêm vào CSS:
Code:
/* breadcrumb for punbb - devs.forumvi.com */
.pun-crumbs{padding:1em 0}
.navstrip{color:#e8e8e8;font-weight:700;list-style:none;background:#fff;margin:20px 0;border:1px solid #ddd}
.navstrip > li{float:left;color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#FFF;padding:0 5px 0 20px}
.navstrip > li.begin{background-color:#1f537b;background-image:none;background-position:center;background-repeat:no-repeat;width:47px;padding-left:4px}
.navstrip li a{font-weight:700;text-decoration:none}
.navstrip > li.begin > a{text-indent:-9999px;display:block;background:url(http://i39.servimg.com/u/f39/19/09/43/62/house411.png) no-repeat center center transparent}
.navstrip > li:before,.navstrip > li:after{content:" ";border:18px solid transparent;border-left-width:12px;border-right:0;border-left-color:#FFF;display:block;position:absolute;right:-12px;top:0;z-index:10;width:0;height:0}
.navstrip > li:after{border-left-color:#DBDBDB;right:-13px;z-index:5}
.navstrip > li.begin:before{border-left-color:#1f537b}
.navstrip > li:hover,.navstrip > li:hover a{background-color:#333;color:#FFF}
.navstrip > li:hover:before{border-left-color:#333}


Tác giả

@Zzbaivong
Tags: #punbb #breadcrumb #mod #tutorial
  Bài viết hay nhất3
Cám ơn Zzbaivong và diễn đàn rất nhiều.

  Bài viết hay nhất4
sao em ko tìm được
Code:
 <div id="pun-foot">
  Bài viết hay nhất5
Hướng dẫn đó là dành cho phiên bản punBB.
Xem các phiên bản khác http://devs.forumvi.com/tags/breadcrumb
You cannot reply to topics in this forum