[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

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

Theo hướng dẫn tại địa chỉ: http://jsfiddle.net/nXrDn/ sẽ cho ra kết quả:

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

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:

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

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ỏi đáp] Thanh đường dẫn đẹp Nav_610


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.

[Hỏi đáp] Thanh đường dẫn đẹp Nav_1011
  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 https://devs.forumvi.com/tags/breadcrumb
  Bài viết hay nhất6
You cannot reply to topics in this forum