... | in breadcrumbs_menu.naml |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
|
<macro name="breadcrumbs_menu" requires="node_page">
<n.comment.>
Adds an expanded menu to the breadcrumb menu.
</n.comment.>
<div id="breadcrumb-flyout-holder">
<ul class="has-subapps depth-1 node-id-[n.root_node.id/]">
<n.root_node.breadcrumbs_menu_item/>
</ul>
</div>
<div id="breadcrumb-flyout">
</div>
<script type="text/javascript">
<![CDATA[
if (!window.RP)
window.RP = {};
RP.BreadcrumbFlyout =
{
node: null,
holder: null,
crumbs:
{
top: null,
bottom: null
},
is_hovered: false,
reposition:
function(link, which) {
var link_coords = $(link).position();
var menu_coords = this.crumbs[which].position();
var height = this.node.outerHeight(true);
var menu_padding =
(which == "bottom") ?
(this.crumbs[which].parent().outerHeight(true) - this.crumbs[which].outerHeight(true)) / 2
:
this.crumbs[which].parent().outerHeight(true);
this.node.removeClass("top").removeClass("bottom").addClass(which).css("left", link_coords.left + "px");
if (which == "top")
this.node.css("top", (menu_coords.top + menu_padding) + "px");
else
this.node.css("top", (menu_coords.top - menu_padding - height) + "px");
Nabble.resizeFrames();
},
init:
function() {
this.node = $("#breadcrumb-flyout");
this.holder = $("#breadcrumb-flyout-holder");
this.crumbs.top = $("#breadcrumbs");
this.crumbs.bottom = $("#page-footer span.breadcrumbs");
// Listener for breadcrumb hover
this.crumbs.top.add(this.crumbs.bottom).children("a").hover(
function(e) {
var id = (this.className.match(/node-id-(\d+)/) || [0,-1])[1];
if (+id < 0)
return;
var BF = RP.BreadcrumbFlyout;
var node = BF.node.empty();
var item = BF.holder.find("ul.node-id-" + id + ", li[data-node-id='" + id + "']>ul").eq(0);
var which = ["top", "bottom"][ +!$("#breadcrumbs").find(this).length ];
node.stop(true, true).fadeIn(200);
node.append( item.clone().addClass("shaded-bg-color") );
BF.reposition(this, which);
},
$.proxy(
function(e) {
if (!this.is_hovered)
this.node.delay(1500).hide(1);
},
this
)
);
// Listeners for flyout item hover
this.node.on(
{
"mouseenter.RP.BreadcrumbFlyout":
function(e) {
var BF = RP.BreadcrumbFlyout;
var sub = $(this).children("ul");
$(this).children("ul").stop(true, true).show();
$(this).siblings("li.has-subapps").find("ul").stop(true, true).hide();
},
"mouseleave.RP.BreadcrumbFlyout":
function(e) {
$(this).children("ul").delay(1500).hide(1);
}
},
"li"
).on(
{
"mouseenter.RP.BreadcrumbFlyout":
$.proxy(
function(e) {
this.is_hovered = true;
this.node.stop(true, true).show();
},
this
),
"mouseleave.RP.BreadcrumbFlyout":
$.proxy(
function(e) {
this.is_hovered = false;
this.node.delay(1500).hide(1);
},
this
)
}
);
}
};
$(function(){RP.BreadcrumbFlyout.init()});
]]>
</script>
</macro>
|
Free forum by Nabble | Naml |