1. Add reference to jQuery into your master page, e.g.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
just before tag </head>
2. Add breadcrumb holder div and jQuery next to it where you want to see it
<div class="wss-BreadCrumb"></div>
<script type="text/javascript">
$("a.s4-breadcrumbRootNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbCurrentNode").clone().appendTo('div.wss-BreadCrumb');
$("<span>></span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbRootNode');
$("<span>></span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbNode');
$("span.s4-breadcrumbCurrentNode").clone().appendTo('div.wss-BreadCrumb');
</script>
3. Add styles to make it looks like WSS breadcrumb
div.wss-BreadCrumb
{
margin-bottom:5px;
display: inline-block;
}
div.wss-BreadCrumb span
{
margin-left:5px;
margin-right: 5px;
}
div.wss-BreadCrumb span.s4-breadcrumbCurrentNode
{
margin-left:0px;
margin-right:0px;
}
div.wss-BreadCrumb a.s4-breadcrumbNode, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode,
div.wss-BreadCrumb a.s4-breadcrumbRootNode
{
color: blue;
}
No comments:
Post a Comment