我需要自定义此处的Angular Slide.and.push指令：http://ngmodules.org/modules/slide.and.push当然受到jquery版本的启发：http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
我想要做的是模仿SquareSpace（http://www.squarespace.com/）用于其管理信息中心的菜单/子菜单系统的类型（您必须创建一个免费帐户才能使用它或去观看他们展示它的促销视频）页面左侧总是有一个可见的侧面菜单，带有菜单图标。单击其中一个图标后，辅助滑出（推动菜单）将从第一个滑出（使其看起来像第二个菜单中出现的二级菜单。）。
到目前为止，当我添加此slide.and.push指令时，辅助菜单从主页面菜单顶部的页面左侧滑出。我试过调整一下css无济于事。这是侧边菜单的原始css。因此，它不是从最左边的屏幕滑出...我需要它从110px宽的主要始终可见的侧面菜单滑出。
/* Vertical menu that slides from the left or right */
.spmenu-left {
left: -320px;
border-right: 1px solid #65cff0;
}
.spmenu-left a.spmenu-button {
left: 320px;
top: 10px;
-webkit-border-top-right-radius: 5px;
-moz-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
这里是指令的代码：
angular.module("slidePushMenu", []).factory('slidePush',function () {
var spmenuHorizontalHeight,
spmenuVerticalWidth;
spmenuVerticalWidth = 320;
spmenuHorizontalHeight = 150;
return {
slide: function (menu, btn) {
btn.toggleClass("active");
if (menu.hasClass("spmenu-left")) {
if (menu.hasClass("spmenu-open")) {
menu.css("left", parseInt(menu.css("left"), 10) - spmenuVerticalWidth);
} else {
menu.css("left", parseInt(menu.css("left"), 10) + spmenuVerticalWidth);
}
}
if (menu.hasClass("spmenu-right")) {
if (menu.hasClass("spmenu-open")) {
menu.css("right", parseInt(menu.css("right"), 10) - spmenuVerticalWidth);
} else {
menu.css("right", parseInt(menu.css("right"), 10) + spmenuVerticalWidth);
}
}
if (menu.hasClass("spmenu-top")) {
if (menu.hasClass("spmenu-open")) {
menu.css("top", parseInt(menu.css("top"), 10) - spmenuHorizontalHeight);
} else {
menu.css("top", parseInt(menu.css("top"), 10) + spmenuHorizontalHeight);
}
}
if (menu.hasClass("spmenu-bottom")) {
if (menu.hasClass("spmenu-open")) {
menu.css("bottom", parseInt(menu.css("bottom"), 10) - spmenuHorizontalHeight);
} else {
menu.css("bottom", parseInt(menu.css("bottom"), 10) + spmenuHorizontalHeight);
}
}
return menu.toggleClass("spmenu-open");
},
slideForceClose: function (menu, btn) {
if (menu.hasClass("spmenu-open")) {
btn.removeClass("active");
if (menu.hasClass("spmenu-left")) {
menu.css("left", parseInt(menu.css("left"), 10) - spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-right")) {
menu.css("right", parseInt(menu.css("right"), 10) - spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-top")) {
menu.css("top", parseInt(menu.css("top"), 10) - spmenuHorizontalHeight);
}
if (menu.hasClass("spmenu-bottom")) {
menu.css("bottom", parseInt(menu.css("bottom"), 10) - spmenuHorizontalHeight);
}
return menu.removeClass("spmenu-open");
}
},
push: function (menu, btn) {
var body, bodyLeft, bodyTop;
body = angular.element("body");
btn.toggleClass("active");
if (menu.hasClass("spmenu-left")) {
bodyLeft = parseInt(body.css("left"), 10);
bodyLeft = (bodyLeft ? bodyLeft : 0);
if (menu.hasClass("spmenu-open")) {
body.css("left", bodyLeft - spmenuVerticalWidth);
} else {
body.css("left", bodyLeft + spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-open")) {
menu.css("left", parseInt(menu.css("left"), 10) - spmenuVerticalWidth);
} else {
menu.css("left", parseInt(menu.css("left"), 10) + spmenuVerticalWidth);
}
}
if (menu.hasClass("spmenu-right")) {
bodyLeft = parseInt(body.css("left"), 10);
bodyLeft = (bodyLeft ? bodyLeft : 0);
if (menu.hasClass("spmenu-open")) {
body.css("left", bodyLeft + spmenuVerticalWidth);
} else {
body.css("left", bodyLeft - spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-open")) {
menu.css("right", parseInt(menu.css("right"), 10) - spmenuVerticalWidth);
} else {
menu.css("right", parseInt(menu.css("right"), 10) + spmenuVerticalWidth);
}
}
if (menu.hasClass("spmenu-top")) {
bodyTop = parseInt(body.css("top"), 10);
bodyTop = (bodyTop ? bodyTop : 0);
if (menu.hasClass("spmenu-open")) {
body.css("top", "auto");
} else {
body.css("top", bodyTop + spmenuHorizontalHeight);
}
if (menu.hasClass("spmenu-open")) {
menu.css("top", parseInt(menu.css("top"), 10) - spmenuHorizontalHeight);
} else {
menu.css("top", parseInt(menu.css("top"), 10) + spmenuHorizontalHeight);
}
}
if (menu.hasClass("spmenu-bottom")) {
bodyTop = parseInt(body.css("top"), 10);
bodyTop = (bodyTop ? bodyTop : 0);
if (menu.hasClass("spmenu-open")) {
body.css("top", "auto");
} else {
body.css("top", bodyTop - spmenuHorizontalHeight);
}
if (menu.hasClass("spmenu-open")) {
menu.css("bottom", parseInt(menu.css("bottom"), 10) - spmenuHorizontalHeight);
} else {
menu.css("bottom", parseInt(menu.css("bottom"), 10) + spmenuHorizontalHeight);
}
}
return menu.toggleClass("spmenu-open");
},
pushForceClose: function (menu, btn) {
var body, bodyLeft;
if (menu.hasClass("spmenu-open")) {
btn.removeClass("active");
body = angular.element("body");
if (menu.hasClass("spmenu-left")) {
bodyLeft = parseInt(body.css("left"), 10);
bodyLeft = (bodyLeft ? bodyLeft : 0);
body.css("left", bodyLeft - spmenuVerticalWidth);
menu.css("left", parseInt(menu.css("left"), 10) - spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-right")) {
bodyLeft = parseInt(body.css("left"), 10);
bodyLeft = (bodyLeft ? bodyLeft : 0);
body.css("left", bodyLeft + spmenuVerticalWidth);
menu.css("right", parseInt(menu.css("right"), 10) - spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-top")) {
body.css("top", "auto");
menu.css("top", parseInt(menu.css("top"), 10) - spmenuHorizontalHeight);
}
if (menu.hasClass("spmenu-bottom")) {
body.css("top", "auto");
menu.css("bottom", parseInt(menu.css("bottom"), 10) - spmenuHorizontalHeight);
}
return menu.removeClass("spmenu-open");
}
}
};
}).directive("ngSlideMenu", [
'slidePush', function (slidePush) {
return {
restrict: "A",
link: function (scope, elem, attrs) {
return elem.click(function () {
var menu;
menu = angular.element("#" + attrs.ngSlideMenu);
return slidePush.slide(menu, elem);
});
}
};
}
]).directive("ngPushMenu", [
'slidePush', function (slidePush) {
return {
restrict: "A",
link: function (scope, elem, attrs) {
var body, menu;
menu = angular.element("#" + attrs.ngPushMenu);
body = angular.element("body");
body.addClass("spmenu-push");
return elem.click(function () {
return slidePush.push(menu, elem);
});
}
};
}
]).directive("ngSlidePushMenu", [
"$document", 'slidePush', function ($document, slidePush) {
var compile, link;
compile = function (elem, attrs, transclude) {
link.transclude = transclude;
return link;
};
link = function (scope, elem, attrs) {
return link.transclude(scope, function (clone) {
var body, btn, buttonClass, buttonText, classes, positionFix;
classes = (attrs.spmClass ? attrs.spmClass : "");
classes += " spmenu spmenu-" + (attrs.position === "right" || attrs.position === "left" ? "vertical" : "horizontal") + " spmenu-" + attrs.position;
elem.addClass(classes);
body = angular.element("body");
if (attrs.button) {
btn = elem.find(".spmenu-button").addClass("show");
buttonText = attrs.buttonText ? attrs.buttonText : "";
buttonClass = attrs.buttonClass ? attrs.buttonClass : "";
btn.addClass(buttonClass);
btn.append("<span class=\"" + buttonClass + "\">" + buttonText + "</span>");
positionFix = (attrs.fixTop ? "top: " + (parseInt(attrs.fixTop, 10) + elem.position().top) + "px; " : "");
positionFix += (attrs.fixLeft ? "left: " + (parseInt(attrs.fixLeft, 10) + elem.position().left) + "px; " : "");
btn.attr("style", positionFix);
if (attrs.button === "slide") {
$document.mouseup(function (e) {
if (!elem.is(e.target) && elem.has(e.target).length === 0 && !body.hasClass('modal-open')) {
return slidePush.slideForceClose(elem, btn);
}
});
btn.click(function () {
return slidePush.slide(elem, btn);
});
}
if (attrs.button === "push") {
angular.element("body").addClass("spmenu-push");
$document.mouseup(function (e) {
if (!elem.is(e.target) && elem.has(e.target).length === 0 && !body.hasClass('modal-open')) {
return slidePush.pushForceClose(elem, btn);
}
});
btn.click(function () {
return slidePush.push(elem, btn);
});
}
}
elem.append(clone);
if (attrs.open) {
return btn.click();
}
});
};
return {
compile: compile,
restrict: "E",
replace: true,
template: "<nav><a class=\"spmenu-button\"><i class=\"caret\"></i></a></nav>",
transclude: "element"
};
}
]);
非常感谢任何帮助！ ： - ）
答案 0 :(得分：0)
经过一些修补，我能够解决这个问题。我不得不在指令本身进行一些调整，然后将幻灯片菜单的z-index调整为小于静态主要侧面菜单的z-index。请参阅幻灯片功能中的我的评论。
slide: function (menu, btn) {
btn.toggleClass("active");
if (menu.hasClass("spmenu-left")) {
if (menu.hasClass("spmenu-open")) {
menu.css("left", -210); // Changed to this hardcoded value
} else {
menu.css("left", 110); // Changed to this hardcoded value
}
}
if (menu.hasClass("spmenu-right")) {
if (menu.hasClass("spmenu-open")) {
menu.css("right", parseInt(menu.css("right"), 10) - spmenuVerticalWidth);
} else {
menu.css("right", parseInt(menu.css("right"), 10) + spmenuVerticalWidth);
}
}
if (menu.hasClass("spmenu-top")) {
if (menu.hasClass("spmenu-open")) {
menu.css("top", parseInt(menu.css("top"), 10) - spmenuHorizontalHeight);
} else {
menu.css("top", parseInt(menu.css("top"), 10) + spmenuHorizontalHeight);
}
}
if (menu.hasClass("spmenu-bottom")) {
if (menu.hasClass("spmenu-open")) {
menu.css("bottom", parseInt(menu.css("bottom"), 10) - spmenuHorizontalHeight);
} else {
menu.css("bottom", parseInt(menu.css("bottom"), 10) + spmenuHorizontalHeight);
}
}
return menu.toggleClass("spmenu-open");
},