javascript - Customize Angular SlideAndPush Directive with Menu offset -

javascript - Customize Angular SlideAndPush Directive with Menu offset -

i need customize angular slide.and.push directive found here: http://ngmodules.org/modules/slide.and.push of course of study inspired jquery version here: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

what trying mimic type of menu/sub menu scheme squarespace (http://www.squarespace.com/) using administrative dashboard (you'll have create free business relationship utilize or go watch promo video shows it) there visible side menu along left side of page menu icons. upon clicking 1 of icons, secondary slide-out (push menu) slides out first (making appear secondary menu coming out of first side menu.).

so far, when add together slide.and.push directive secondary menu slides out left side of page on top of primary side menu. have tried adjusting css bit no avail. here's original css side menu. instead of sliding out far left off screen...i need slide out primary visible side menu 110px wide.

/* vertical menu slides 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; }

and here's code directive:

angular.module("slidepushmenu", []).factory('slidepush',function () { var spmenuhorizontalheight, spmenuverticalwidth; spmenuverticalwidth = 320; spmenuhorizontalheight = 150; homecoming { 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); } } homecoming 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); } homecoming 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); } } homecoming 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); } homecoming menu.removeclass("spmenu-open"); } } }; }).directive("ngslidemenu", [ 'slidepush', function (slidepush) { homecoming { restrict: "a", link: function (scope, elem, attrs) { homecoming elem.click(function () { var menu; menu = angular.element("#" + attrs.ngslidemenu); homecoming slidepush.slide(menu, elem); }); } }; } ]).directive("ngpushmenu", [ 'slidepush', function (slidepush) { homecoming { restrict: "a", link: function (scope, elem, attrs) { var body, menu; menu = angular.element("#" + attrs.ngpushmenu); body = angular.element("body"); body.addclass("spmenu-push"); homecoming elem.click(function () { homecoming slidepush.push(menu, elem); }); } }; } ]).directive("ngslidepushmenu", [ "$document", 'slidepush', function ($document, slidepush) { var compile, link; compile = function (elem, attrs, transclude) { link.transclude = transclude; homecoming link; }; link = function (scope, elem, attrs) { homecoming 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')) { homecoming slidepush.slideforceclose(elem, btn); } }); btn.click(function () { homecoming 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')) { homecoming slidepush.pushforceclose(elem, btn); } }); btn.click(function () { homecoming slidepush.push(elem, btn); }); } } elem.append(clone); if (attrs.open) { homecoming btn.click(); } }); }; homecoming { compile: compile, restrict: "e", replace: true, template: "<nav><a class=\"spmenu-button\"><i class=\"caret\"></i></a></nav>", transclude: "element" }; } ]);

any help appreciated! :-)

after tinkering able solve problem. had create adjustments in directive , adjust z-index of slide menu less that of static primary side menu. see comments in slide function.

slide: function (menu, btn) { btn.toggleclass("active"); if (menu.hasclass("spmenu-left")) { if (menu.hasclass("spmenu-open")) { menu.css("left", -210); // changed hardcoded value } else { menu.css("left", 110); // changed 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); } } homecoming menu.toggleclass("spmenu-open"); },

javascript css angularjs