Mootools Aufklappmenü MenuMatic in TYPOlight benutzen

[MacKP]

Dann will ich dir mal einen kleinen Tipp geben.
Schau dir mal an was für ein HTML-Tag der aktive Menüpunkt bekommt, wenn du das eins zu eins von mir übernommen hast.
Und dann rate mal wie dein Browser das per default darstellt ;-)

Viele Grüße

[Silvano]

okaaay, der war gemein So genau habe ich nicht ingeschaut und mit Firebug habe ich das überflogen. Habe mich auf das CSS beschränkt. Aber Danke!

[Snaky]

Das liegt an deinem Header mit margin-top 40px.
Mach das weg und gib dem Wrapper ein padding von 40px dann klappt das.

Viele Grüße

Vielen Dank! Die Möglichkeit mit dem Wrapper ist natürlich deutlich eleganter.
Lg

[Covent]

Hallo Zusammen, erstmal möchte ich mich für den super Wiki Eintrag bedanken !

Spiele nun schon eine Weile an dem Menü, es funktioniert soweit auch, doch da gibt es etwas, an dem ich mir die Zähne ausbeisse...

Ist es möglich, bei jedem Hauptmenüpunkt ein anderes Hintergrundbild zu setzen? (Momentan ist bei jedem Punkt dasselbe Bild... "Wo alles angefangen hat...")

Hier der Link zu meiner Testseite: Klick

Natürlich ist auch ein anderer Lösungsweg gerne wilkommen

Besten Dank im Voraus

Covent

[MacKP]

Hallo Covent,
gib jedem Menüpunkt eine Klasse in der Seitenstruktur. Dann kannst du die jeweils passend ansprechen in der Navigation und denen unterschiedliche Bilder per CSS zuweisen.

Viele Grüße

[Covent]

Da hätte ich doch auch selber drauf kommen können...
Naja manchmal braucht man eben einen Denkanstoss

Vielen Dank MacKP!

[chefprolet]

Servus,

habe das Menü jetzt schon zweimal im Einsatz, nur leider ist die Box, die unten rausfährt immer ca. 10% transparent, dass man die Inhalte, die dahinter stehen durchschimmer sehen kann. Wie bekomme ich das den hin, dass das 100% Deckkraft hat??

http://web95.sv12.pixelx.de/ zum anschauen mal hier gucken

Dank und Gruss
Sven

[xchs]

Das musst Du im JavaScript konfigurieren! Weitere Infos dazu findest Du auf der MenuMatic-Seite.

[chefprolet]

ja super.....und das in dem chaos....

var MenuMatic=new Class({Implements:Options,options:{id:"nav",subMenusContainerId:"subMenusContainer",effect:"slide & fade",duration:600,physics:Fx.Transitions.Pow.easeOut,hideDelay:1000,stretchMainMenu:false,matchWidthMode:false,orientation:"horizontal",direction:{x:"right",y:"down"},tweakInitial:{x:0,y:0},tweakSubsequent:{x:0,y:0},center:false,opacity:95,mmbFocusedClassName:null,mmbClassName:null,killDivider:null,fixHasLayoutBug:false,onHideAllSubMenusNow_begin:(function(){}),onHideAllSubMenusNow_complete:(function(){}),onInit_begin:(function(){}),onInit_complete:(function(){})},hideAllMenusTimeout:null,allSubMenus:[],subMenuZindex:1,initialize:function(B){this.setOptions(B);this.options.onInit_begin();if(this.options.opacity>99){this.options.opacity=99.9}this.options.opacity=this.options.opacity/100;Element.implement({getId:function(){if(!this.id){var E=this.get("tag")+"-"+$time();while($(E)){E=this.get("tag")+"-"+$time()}this.id=E}return this.id}});this.options.direction.x=this.options.direction.x.toLowerCase();this.options.direction.y=this.options.direction.y.toLowerCase();if(this.options.direction.x==="right"){this.options.direction.xInverse="left"}else{if(this.options.direction.x==="left"){this.options.direction.xInverse="right"}}if(this.options.direction.y==="up"){this.options.direction.yInverse="down"}else{if(this.options.direction.y==="down"){this.options.direction.yInverse="up"}}var A=$(this.options.id).getElements("a");A.each(function(F,E){F.store("parentLinks",F.getParent().getParents("li").getFirst("a"));F.store("parentLinks",F.retrieve("parentLinks").erase(F.retrieve("parentLinks").getFirst()));F.store("childMenu",F.getNext("ul")||F.getNext("ol"));theSubMenuType="subsequent";if($(F.getParent("ul")||F.getParent("ol")).id===this.options.id){theSubMenuType="initial"}F.store("subMenuType",theSubMenuType);if(theSubMenuType==="initial"&&$(F.getNext("ul")||F.getNext("ol"))){F.addClass("mainMenuParentBtn")}else{if($(F.getNext("ul")||F.getNext("ol"))){F.addClass("subMenuParentBtn")}}}.bind(this));var D=new Element("div",{id:this.options.subMenusContainerId}).inject($(document.body),"bottom");$(this.options.id).getElements("ul, ol").each(function(F,E){new Element("div",{"class":"smOW"}).inject(D).grab(F)}.bind(this));D.getElements("a").set("tabindex","-1");A.each(function(G,E){if(!G.retrieve("childMenu")){return }G.store("childMenu",G.retrieve("childMenu").getParent("div"));this.allSubMenus.include(G.retrieve("childMenu"));G.store("parentSubMenus",G.retrieve("parentLinks").retrieve("childMenu"));var F=new MenuMaticSubMenu(this.options,this,G)}.bind(this));var C=$(this.options.id).getElements("a").filter(function(F,E){return !F.retrieve("childMenu")});C.each(function(F,E){F.addEvents({mouseenter:function(G){this.hideAllSubMenusNow();if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration/2),transition:this.options.physics,link:"cancel"})).start(this.options.mmbFocusedClassName)}}.bind(this),focus:function(G){this.hideAllSubMenusNow();if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration/2),transition:this.options.physics,link:"cancel"})).start(this.options.mmbFocusedClassName)}}.bind(this),mouseleave:function(G){if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration*5),transition:this.options.physics,link:"cancel"})).start(this.options.mmbClassName)}}.bind(this),blur:function(G){if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(F).retrieve("btnMorph",new Fx.Morph(F,{duration:(this.options.duration*5),transition:this.options.physics,link:"cancel"})).start(this.options.mmbClassName)}}.bind(this),keydown:function(H){var G=new Event(H);if(H.key==="up"||H.key==="down"||H.key==="left"||H.key==="right"){H.stop()}if(H.key==="left"&&this.options.orientation==="horizontal"||H.key==="up"&&this.options.orientation==="vertical"){if(F.getParent("li").getPrevious("li")){F.getParent("li").getPrevious("li").getFirst("a").focus()}else{F.getParent("li").getParent().getLast("li").getFirst("a").focus()}}else{if(H.key==="right"&&this.options.orientation==="horizontal"||H.key==="down"&&this.options.orientation==="vertical"){if(F.getParent("li").getNext("li")){F.getParent("li").getNext("li").getFirst("a").focus()}else{F.getParent("li").getParent().getFirst("li").getFirst("a").focus()}}}}.bind(this)})},this);this.stretch();this.killDivider();this.center();this.fixHasLayoutBug();this.options.onInit_complete()},fixHasLayoutBug:function(){if(Browser.Engine.trident&&this.options.fixHasLayoutBug){$(this.options.id).getParents().setStyle("zoom",1);$(this.options.id).setStyle("zoom",1);$(this.options.id).getChildren().setStyle("zoom",1);$(this.options.subMenusContainerId).setStyle("zoom",1);$(this.options.subMenusContainerId).getChildren().setStyle("zoom",1)}},center:function(){if(!this.options.center){return }$(this.options.id).setStyles({left:"50%","margin-left":-($(this.options.id).getSize().x/2)})},stretch:function(){if(this.options.stretchMainMenu&&this.options.orientation==="horizontal"){var C=parseFloat($(this.options.id).getCoordinates().width);var D=0;var B=$(this.options.id).getElements("a");B.setStyles({"padding-left":0,"padding-right":0});B.each(function(F,E){D+=F.getSize().x}.bind(this));if(C<D){return }var A=(C-D)/B.length;B.each(function(F,E){F.setStyle("width",F.getSize().x+A)}.bind(this));B.getLast().setStyle("width",B.getLast().getSize().x-1)}},killDivider:function(){if(this.options.killDivider&&this.options.killDivider.toLowerCase()==="first"){$($(this.options.id).getElements("li")[0]).setStyles({background:"none"})}else{if(this.options.killDivider&&this.options.killDivider.toLowerCase()==="last"){$($(this.options.id).getElements("li").getLast()).setStyles({background:"none"})}}},hideAllSubMenusNow:function(){this.options.onHideAllSubMenusNow_begin();$clear(this.hideAllMenusTimeout);$$(this.allSubMenus).fireEvent("hide");this.options.onHideAllSubMenusNow_complete()}});var MenuMaticSubMenu=new Class({Implements:Options,Extends:MenuMatic,options:{onSubMenuInit_begin:(function(A){}),onSubMenuInit_complete:(function(A){}),onMatchWidth_begin:(function(A){}),onMatchWidth_complete:(function(A){}),onHideSubMenu_begin:(function(A){}),onHideSubMenu_complete:(function(A){}),onHideOtherSubMenus_begin:(function(A){}),onHideOtherSubMenus_complete:(function(A){}),onHideAllSubMenus_begin:(function(A){}),onHideAllSubMenus_complete:(function(A){}),onPositionSubMenu_begin:(function(A){}),onPositionSubMenu_complete:(function(A){}),onShowSubMenu_begin:(function(A){}),onShowSubMenu_complete:(function(A){})},root:null,btn:null,hidden:true,myEffect:null,initialize:function(B,A,C){this.setOptions(B);this.root=A;this.btn=C;this.childMenu=this.btn.retrieve("childMenu");this.subMenuType=this.btn.retrieve("subMenuType");this.childMenu=this.btn.retrieve("childMenu");this.parentSubMenus=$$(this.btn.retrieve("parentSubMenus"));this.parentLinks=$$(this.btn.retrieve("parentLinks"));this.parentSubMenu=$(this.parentSubMenus[0]);if(this.parentSubMenu){this.parentSubMenu=this.parentSubMenu.retrieve("class")}this.childMenu.store("class",this);this.btn.store("class",this);this.childMenu.store("status","closed");this.options.onSubMenuInit_begin(this);this.childMenu.addEvent("hide",function(){this.hideSubMenu()}.bind(this));this.childMenu.addEvent("show",function(){this.showSubMenu()}.bind(this));if(this.options.effect){this.myEffect=new Fx.Morph($(this.childMenu).getFirst(),{duration:this.options.duration,transition:this.options.physics,link:"cancel"})}if(this.options.effect==="slide"||this.options.effect==="slide & fade"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"){this.childMenu.getFirst().setStyle("margin-top","0")}else{this.childMenu.getFirst().setStyle("margin-left","0")}}else{if(this.options.effect==="fade"||this.options.effect==="slide & fade"){this.childMenu.getFirst().setStyle("opacity",0)}}if(this.options.effect!="fade"&&this.options.effect!="slide & fade"){this.childMenu.getFirst().setStyle("opacity",this.options.opacity)}var D=$(this.childMenu).getElements("a").filter(function(F,E){return !F.retrieve("childMenu")});D.each(function(F,E){$(F).addClass("subMenuBtn");F.addEvents({mouseenter:function(G){this.childMenu.fireEvent("show");this.cancellHideAllSubMenus();this.hideOtherSubMenus()}.bind(this),focus:function(G){this.childMenu.fireEvent("show");this.cancellHideAllSubMenus();this.hideOtherSubMenus()}.bind(this),mouseleave:function(G){this.cancellHideAllSubMenus();this.hideAllSubMenus()}.bind(this),blur:function(G){this.cancellHideAllSubMenus();this.hideAllSubMenus()}.bind(this),keydown:function(H){var G=new Event(H);if(H.key==="up"||H.key==="down"||H.key==="left"||H.key==="right"||H.key==="tab"){H.stop()}if(H.key==="up"){if(F.getParent("li").getPrevious("li")){F.getParent("li").getPrevious("li").getFirst("a").focus()}else{if(this.options.direction.y==="down"){this.btn.focus()}else{if(this.options.direction.y==="up"){F.getParent("li").getParent().getLast("li").getFirst("a").focus()}}}}else{if(H.key==="down"){if(F.getParent("li").getNext("li")){F.getParent("li").getNext("li").getFirst("a").focus()}else{if(this.options.direction.y==="down"){F.getParent("li").getParent().getFirst("li").getFirst("a").focus()}else{if(this.options.direction.y==="up"){this.btn.focus()}}}}else{if(H.key===this.options.direction.xInverse){this.btn.focus()}}}}.bind(this)})},this);$(this.btn).removeClass("subMenuBtn");if(this.subMenuType=="initial"){this.btn.addClass("mainParentBtn")}else{this.btn.addClass("subParentBtn")}$(this.btn).addEvents({mouseenter:function(E){this.cancellHideAllSubMenus();this.hideOtherSubMenus();this.showSubMenu();if(this.subMenuType==="initial"&&this.options.mmbClassName&&this.options.mmbFocusedClassName){$(this.btn).retrieve("btnMorph",new Fx.Morph($(this.btn),{duration:(this.options.duration/2),transition:this.options.physics,link:"cancel"})).start(this.options.mmbFocusedClassName)}}.bind(this),focus:function(E){this.cancellHideAllSubMenus();this.hideOtherSubMenus();this.showSubMenu();if(this.subMenuType==="initial"&&this.options.mmbClassName&&this.options.mmbFocusedClassName){$(this.btn).retrieve("btnMorph",new Fx.Morph($(this.btn),{duration:(this.options.duration/2),transition:this.options.physics,link:"cancel"})).start(this.options.mmbFocusedClassName)}}.bind(this),mouseleave:function(E){this.cancellHideAllSubMenus();this.hideAllSubMenus()}.bind(this),blur:function(E){this.cancellHideAllSubMenus();this.hideAllSubMenus()}.bind(this),keydown:function(E){E=new Event(E);if(E.key==="up"||E.key==="down"||E.key==="left"||E.key==="right"){E.stop()}if(!this.parentSubMenu){if(this.options.orientation==="horizontal"&&E.key===this.options.direction.y||this.options.orientation==="vertical"&&E.key===this.options.direction.x){if(this.options.direction.y==="down"){this.childMenu.getFirst().getFirst("li").getFirst("a").focus()}else{if(this.options.direction.y==="up"){this.childMenu.getFirst().getLast("li").getFirst("a").focus()}}}else{if(this.options.orientation==="horizontal"&&E.key==="left"||this.options.orientation==="vertical"&&E.key===this.options.direction.yInverse){if(this.btn.getParent().getPrevious()){this.btn.getParent().getPrevious().getFirst().focus()}else{this.btn.getParent().getParent().getLast().getFirst().focus()}}else{if(this.options.orientation==="horizontal"&&E.key==="right"||this.options.orientation==="vertical"&&E.key===this.options.direction.y){if(this.btn.getParent().getNext()){this.btn.getParent().getNext().getFirst().focus()}else{this.btn.getParent().getParent().getFirst().getFirst().focus()}}}}}else{if(E.key==="tab"){E.stop()}if(E.key==="up"){if(this.btn.getParent("li").getPrevious("li")){this.btn.getParent("li").getPrevious("li").getFirst("a").focus()}else{if(this.options.direction.y==="down"){this.parentSubMenu.btn.focus()}else{if(this.options.direction.y==="up"){this.btn.getParent("li").getParent().getLast("li").getFirst("a").focus()}}}}else{if(E.key==="down"){if(this.btn.getParent("li").getNext("li")){this.btn.getParent("li").getNext("li").getFirst("a").focus()}else{if(this.options.direction.y==="down"){this.btn.getParent("li").getParent().getFirst("li").getFirst("a").focus()}else{if(this.options.direction.y==="up"){this.parentSubMenu.btn.focus()}}}}else{if(E.key===this.options.direction.xInverse){this.parentSubMenu.btn.focus()}else{if(E.key===this.options.direction.x){if(this.options.direction.y==="down"){this.childMenu.getFirst().getFirst("li").getFirst("a").focus()}else{if(this.options.direction.y==="up"){}}}}}}}}.bind(this)});this.options.onSubMenuInit_complete(this)},matchWidth:function(){if(this.widthMatched||!this.options.matchWidthMode||this.subMenuType==="subsequent"){return }this.options.onMatchWidth_begin(this);var A=this.btn.getCoordinates().width;$(this.childMenu).getElements("a").each(function(E,D){var C=parseFloat($(this.childMenu).getFirst().getStyle("border-left-width"))+parseFloat($(this.childMenu).getFirst().getStyle("border-right-width"));var B=parseFloat(E.getStyle("padding-left"))+parseFloat(E.getStyle("padding-right"));var F=C+B;if(A>E.getCoordinates().width){E.setStyle("width",A-F);E.setStyle("margin-right",-C)}}.bind(this));this.width=this.childMenu.getFirst().getCoordinates().width;this.widthMatched=true;this.options.onMatchWidth_complete(this)},hideSubMenu:function(){if(this.childMenu.retrieve("status")==="closed"){return }this.options.onHideSubMenu_begin(this);if(this.subMenuType=="initial"){if(this.options.mmbClassName&&this.options.mmbFocusedClassName){$(this.btn).retrieve("btnMorph",new Fx.Morph($(this.btn),{duration:(this.options.duration),transition:this.options.physics,link:"cancel"})).start(this.options.mmbClassName).chain(function(){$(this.btn).removeClass("mainMenuParentBtnFocused");$(this.btn).addClass("mainMenuParentBtn")}.bind(this))}else{$(this.btn).removeClass("mainMenuParentBtnFocused");$(this.btn).addClass("mainMenuParentBtn")}}else{$(this.btn).removeClass("subMenuParentBtnFocused");$(this.btn).addClass("subMenuParentBtn")}this.childMenu.setStyle("z-index",1);if(this.options.effect&&this.options.effect.toLowerCase()==="slide"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="down"){this.myEffect.start({"margin-top":-this.height}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="up"){this.myEffect.start({"margin-top":this.height}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="right"){this.myEffect.start({"margin-left":-this.width}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.start({"margin-left":this.width}).chain(function(){this.childMenu.style.display="none"}.bind(this))}}}}}else{if(this.options.effect=="fade"){this.myEffect.start({opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.effect=="slide & fade"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="down"){this.myEffect.start({"margin-top":-this.height,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"&&this.options.direction.y==="up"){this.myEffect.start({"margin-top":this.height,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="right"){this.myEffect.start({"margin-left":-this.width,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.start({"margin-left":this.width,opacity:0}).chain(function(){this.childMenu.style.display="none"}.bind(this))}}}}}else{this.childMenu.style.display="none"}}}this.childMenu.store("status","closed");this.options.onHideSubMenu_complete(this)},hideOtherSubMenus:function(){this.options.onHideOtherSubMenus_begin(this);if(!this.btn.retrieve("otherSubMenus")){this.btn.store("otherSubMenus",$$(this.root.allSubMenus.filter(function(A){return !this.btn.retrieve("parentSubMenus").contains(A)&&A!=this.childMenu}.bind(this))))}this.parentSubMenus.fireEvent("show");this.btn.retrieve("otherSubMenus").fireEvent("hide");this.options.onHideOtherSubMenus_complete(this)},hideAllSubMenus:function(){this.options.onHideAllSubMenus_begin(this);$clear(this.root.hideAllMenusTimeout);this.root.hideAllMenusTimeout=(function(){$clear(this.hideAllMenusTimeout);$$(this.root.allSubMenus).fireEvent("hide")}).bind(this).delay(this.options.hideDelay);this.options.onHideAllSubMenus_complete(this)},cancellHideAllSubMenus:function(){$clear(this.root.hideAllMenusTimeout)},showSubMenu:function(A){if(this.childMenu.retrieve("status")==="open"){return }this.options.onShowSubMenu_begin(this);if(this.subMenuType=="initial"){$(this.btn).removeClass("mainMenuParentBtn");$(this.btn).addClass("mainMenuParentBtnFocused")}else{$(this.btn).removeClass("subMenuParentBtn");$(this.btn).addClass("subMenuParentBtnFocused")}this.root.subMenuZindex++;this.childMenu.setStyles({display:"block",visibility:"hidden","z-index":this.root.subMenuZindex});if(!this.width||!this.height){this.width=this.childMenu.getFirst().getCoordinates().width;this.height=this.childMenu.getFirst().getCoordinates().height;this.childMenu.setStyle("height",this.height,"border");if(this.options.effect==="slide"||this.options.effect==="slide & fade"){if(this.subMenuType=="initial"&&this.options.orientation==="horizontal"){this.childMenu.getFirst().setStyle("margin-top","0");if(this.options.direction.y==="down"){this.myEffect.set({"margin-top":-this.height})}else{if(this.options.direction.y==="up"){this.myEffect.set({"margin-top":this.height})}}}else{if(this.options.direction.x==="left"){this.myEffect.set({"margin-left":this.width})}else{this.myEffect.set({"margin-left":-this.width})}}}}this.matchWidth();this.positionSubMenu();if(this.options.effect==="slide"){this.childMenu.setStyles({display:"block",visibility:"visible"});if(this.subMenuType==="initial"&&this.options.orientation==="horizontal"){if(A){this.myEffect.set({"margin-top":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({"margin-top":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}}else{if(A){this.myEffect.set({"margin-left":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({"margin-left":0}).chain(function(){this.showSubMenuComplete()}.bind(this))}}}else{if(this.options.effect==="fade"){if(A){this.myEffect.set({opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}else{if(this.options.effect=="slide & fade"){this.childMenu.setStyles({display:"block",visibility:"visible"});this.childMenu.getFirst().setStyles({left:0});if(this.subMenuType==="initial"&&this.options.orientation==="horizontal"){if(A){this.myEffect.set({"margin-top":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{this.myEffect.start({"margin-top":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}else{if(A){if(this.options.direction.x==="right"){this.myEffect.set({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.set({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}}else{if(this.options.direction.x==="right"){this.myEffect.set({"margin-left":-this.width,opacity:this.options.opacity});this.myEffect.start({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}else{if(this.options.direction.x==="left"){this.myEffect.start({"margin-left":0,opacity:this.options.opacity}).chain(function(){this.showSubMenuComplete()}.bind(this))}}}}}else{this.childMenu.setStyles({display:"block",visibility:"visible"}).chain(function(){this.showSubMenuComplete(this)}.bind(this))}}}this.childMenu.store("status","open")},showSubMenuComplete:function(){this.options.onShowSubMenu_complete(this)},positionSubMenu:function(){this.options.onPositionSubMenu_begin(this);this.childMenu.setStyle("width",this.width);this.childMenu.getFirst().setStyle("width",this.width);if(this.subMenuType==="subsequent"){if(this.parentSubMenu&&this.options.direction.x!=this.parentSubMenu.options.direction.x){if(this.parentSubMenu.options.direction.x==="left"&&this.options.effect&&this.options.effect.contains("slide")){this.myEffect.set({"margin-left":this.width})}}this.options.direction.x=this.parentSubMenu.options.direction.x;this.options.direction.xInverse=this.parentSubMenu.options.direction.xInverse;this.options.direction.y=this.parentSubMenu.options.direction.y;this.options.direction.yInverse=this.parentSubMenu.options.direction.yInverse}var C;var A;if(this.subMenuType=="initial"){if(this.options.direction.y==="up"){if(this.options.orientation==="vertical"){C=this.btn.getCoordinates().bottom-this.height+this.options.tweakInitial.y}else{C=this.btn.getCoordinates().top-this.height+this.options.tweakInitial.y}this.childMenu.style.top=C+"px"}else{if(this.options.orientation=="horizontal"){this.childMenu.style.top=this.btn.getCoordinates().bottom+this.options.tweakInitial.y+"px"}else{if(this.options.orientation=="vertical"){C=this.btn.getPosition().y+this.options.tweakInitial.y;if((C+this.childMenu.getSize().y)>=$(document.body).getScrollSize().y){A=(C+this.childMenu.getSize().y)-$(document.body).getScrollSize().y;C=C-A-20}this.childMenu.style.top=C+"px"}}}if(this.options.orientation=="horizontal"){this.childMenu.style.left=this.btn.getPosition().x+this.options.tweakInitial.x+"px"}else{if(this.options.direction.x=="left"){this.childMenu.style.left=this.btn.getPosition().x-this.childMenu.getCoordinates().width+this.options.tweakInitial.x+"px"}else{if(this.options.direction.x=="right"){this.childMenu.style.left=this.btn.getCoordinates().right+this.options.tweakInitial.x+"px"}}}}else{if(this.subMenuType=="subsequent"){if(this.options.direction.y==="down"){if((this.btn.getCoordinates().top+this.options.tweakSubsequent.y+this.childMenu.getSize().y)>=$(document.body).getScrollSize().y){A=(this.btn.getCoordinates().top+this.options.tweakSubsequent.y+this.childMenu.getSize().y)-$(document.body).getScrollSize().y;this.childMenu.style.top=(this.btn.getCoordinates().top+this.options.tweakSubsequent.y)-A-20+"px"}else{this.childMenu.style.top=this.btn.getCoordinates().top+this.options.tweakSubsequent.y+"px"}}else{if(this.options.direction.y==="up"){if((this.btn.getCoordinates().bottom-this.height+this.options.tweakSubsequent.y)<1){this.options.direction.y="down";this.options.direction.yInverse="up";this.childMenu.style.top=this.btn.getCoordinates().top+this.options.tweakSubsequent.y+"px"}else{this.childMenu.style.top=this.btn.getCoordinates().bottom-this.height+this.options.tweakSubsequent.y+"px"}}}if(this.options.direction.x=="left"){this.childMenu.style.left=this.btn.getCoordinates().left-this.childMenu.getCoordinates().width+this.options.tweakSubsequent.x+"px";if(this.childMenu.getPosition().x<0){this.options.direction.x="right";this.options.direction.xInverse="left";this.childMenu.style.left=this.btn.getPosition().x+this.btn.getCoordinates().width+this.options.tweakSubsequent.x+"px";if(this.options.effect==="slide"||this.options.effect==="slide & fade"){this.myEffect.set({"margin-left":-this.width,opacity:this.options.opacity})}}}else{if(this.options.direction.x=="right"){this.childMenu.style.left=this.btn.getCoordinates().right+this.options.tweakSubsequent.x+"px";var D=this.childMenu.getCoordinates().right;var B=document.getCoordinates().width+window.getScroll().x;if(D>B){this.options.direction.x="left";this.options.direction.xInverse="right";this.childMenu.style.left=this.btn.getCoordinates().left-this.childMenu.getCoordinates().width+this.options.tweakSubsequent.x+"px";if(this.options.effect==="slide"||this.options.effect==="slide & fade"){this.myEffect.set({"margin-left":this.width,opacity:this.options.opacity})}}}}}}this.options.onPositionSubMenu_complete(this)}});

mal schauen auf der Seite, ob das was genaueres steht

hab es gefunden.....kommt recht am Anfang....opacity: 95 ist da eingestellt, muss dann auf 100.

[chefprolet]

da ihr ja immer alle so tolle Helfer seid, hier gleich noch ne Frage:

Wie kann ich es umsetzen, dass der aktive Hauptpunkt das gleiche Hintergrundbild bekommt wie die Punkte bei Mouse-over. Das Problem ist, dass es auch für die Punkte im Submenü übernommen wird so wie ich es gelöst haben.

[buchbergertom]

Hi, habe das Menü jetzt auch mal auf einer Seite eingebaut und hier mal meine Meinung bzw. auch Tipps...

Das Javascript File ist wirklich etwas verwirrend - im Prinzip aber recht einfach zu verstehen. Die ersten Einträge sind alle für die Konfiguration verantwortlich. So macht opacity:95 z.B. wie in einem vorherigen Post erwähnt diese leichte Transparenz aus. Einfach auf 100 setzen und nix ist mehr transparent.

Das Menü funktioniert auch super als "drop up" menu -- einfach den ersten eintrag direction....y von down auf up ändern! Alles andere lassen und man hat ein supertolles dop up Menü.

Slide, Fade, Verzögerungszeit beim Öffnen,... alles im 1. Eintrag in der JS Datei Konfigurierbar --- einfach mal auf der Menumatic Seite die Bedeutungen der Einträge durchlesen und man kennt sich schon ein wenig aus.

Alles Weitere wird in der CSS Datei angepasst bzw. muss angepasst werden. Diese Datei muss man eben für aktive Menüpunkte,... etwas erweitern -- ohne CSS Kenntnisse kommt man allerdings nicht sehr weit. Aber ein wenig mit Firebug Elemente untersuchen und man sieht schon welche Contao Klassen wo mitgegeben werden und man kann alles den eigenen Wünschen anpassen.

Kurzum... Bin Begeistert -- vor allem da das MooMenu nicht zu meiner Zufriedenheit funktioniert hatt!!!! Tolles Tutorial übrigens -- vor allem das Template war wichtig - wobei ich die em Tags entfernt habe!

lg, tom

PS: werde das Thema verfolgen -- und hoffe ich kann evtl. auch die ein oder andere Frage beantworten!

[buchbergertom]

@chefprolet: ohne jetzt zu testen solltest du so weiterkommen - spontan gedacht

#nav ul li.active a

Mit dieser CSS Selektion solltest du aktive Menüpunkte der 1. Ebene ändern können. Ohne ul alle aktiven Menüpunkte!

[Silvano]

@chefprolet: ohne jetzt zu testen solltest du so weiterkommen - spontan gedacht

#nav ul li.active a

Mit dieser CSS Selektion solltest du aktive Menüpunkte der 1. Ebene ändern können. Ohne ul alle aktiven Menüpunkte!

Bei mir war's

#subMenusContainer ul.level_2 li.active

[saromir]

Hi, erstmal vielen Dank für deinen Tipp mit disem Menü.
nun hab ich aber ein kleines Problem.

Ich hab das Menü jetzt mal soweit eingebunden. Farben, größen etc etc habe ich noch nicht angepasst. Jetzt habe ich ein kleines Problem. Jach habe auf der hp gelesen, dass man über hideDelay im skript die zeit ändern kann, bis das Untermenü wiede rverschwindet. Um zu testen ob das auch wirklich geht, habe ich das mal auf 10000 ms gestellt anstatt 1000 ms. Nur leider tut sich da bei mir nichts dergleichen, die dauer ist immernoch die gleiche. Jetzt vermute ich, dass ich die js datei vielleicht nicht richtig bzw garnicht eingebunden habe. WO kann ich contao sagen auf welche js datei es für das menü zugreifen soll??

[xchs]

Hallo saromir,

wenn Du beim Einbinden dieses JavaScript-Menüs nach der Anleitung laut Contao Wiki vorgegangen bist, dann sollte der entsprechende JavaScript-Code über Dein "Seitenlayout" eingebunden werden.

Wenn das der Fall ist, könntest Du anstelle der Zeile

var myMenu = new MenuMatic();

diesen Konfigurationscode einfügen:

var myMenu = new MenuMatic({ hideDelay:10000 });

[saromir]

Hallo, ja das bin ich, aber es funktioniert iwie trotzdem nicht -.-

Hier mal der Link:

http://www.visel-testsite.de

[xchs]

Hallo, ja das bin ich, aber es funktioniert iwie trotzdem nicht -.-

Hier mal der Link:

http://www.visel-testsite.de

Das JavaScript unter "js/MenuMatic_0.68.3.js" wird nicht gefunden (Error 404).

Möglicherweise liegt dieser Ordner in Deinem Files-Verzeichnis. Wenn das der Fall ist, müsstest Du den Pfad entsprechend abändern, beispielsweise so:

tl_files/js/MenuMatic_0.68.3.js

[saromir]

Das war mein Fehler ging von den css files aus, dass die der ursprung sind. Du bist mein Retter. Vielen Dank nun klappt es.

[hajo808]

/* Problem gelöst. */ can delete..

[addy]

Hi, habe hier auf das Menü eingebunden laut Anleitung..Problem ist nur, dass es eben einfach nocht angezeigt wird sobald die Stylesheets MenuMatic und MenuMatic-ie6 im Seitenlayout ausgewählt werden. Wenn die Stylesheets nicht ausgewählt sind, wird zumindest so etwas ähnliches wie das Menü angezeigt. Momentan ist es im footer eingebunden, damit mein rumprobieren nicht von den anderen Entwicklungsarbeiten gestört werden. Anschauen kann man es sich mal unter http://addy.dyndns.org:89/contao/

Vorgehensweise war wir folgt:
Dateien hinkopiert, neues Modul erstellt mit dem template nav_MenuMatic.tpl
Stylesheets importiert und im bestehenden Seitenlayout den JavaScript code eingefügt. Wie gesagt, mit angehakten Stylesheets wird gar nichts angezeigt..

In dem Beispiel wird das neue Seitenlayout ja nur zu testzwecken angelegt, oder?

Bin für jede Hilfe dankbar.

Grüße,
addy

[MacKP]

Hallo addy,
das neue Seitenlayout ist nicht nötig.. man kann das auch in die bestehenden einbringen.

Ich versteh nicht so ganz was du gemacht hast, bzw. wann genau welches Problem auftaucht...

Aber:
kann es sein, das du noch die Standard CSS drinn lässt für das Design der Navi? Das kommt dann nämlich nicht so gut, da die sich gegenseitig in die quere kommen werden.

Und wenn du uns zeigen möchtest (was ja sinnvoll ist) das es Probleme gibt, dann lass es am besten so wie es gehen sollte. Also mit dem passenden CSS (auch wenn nichts zu sehen ist.. ) denn nur dann können wir genau erforschen was falsch ist.

Viele Grüße

[addy]

Die standard css war nicht mit drin. Hab jetzt mal zwei Screenshots gemacht, wie es momentan eingestellt ist.

Angezeigt werden soll es eigentlich auch als horizontales Menü. Folgender JS Scode wurde in dem Layout eingefügt.

<!-- Load the MenuMatic Class -->
 
<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
 
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
window.addEvent('domready', function() {

var myMenu = new MenuMatic();

});
</script>

[MacKP]

Hallo addy,

du hast immer noch CSS drinn was die Navi beeinflusst. Ich seh da immer noch #footer_navi und so weiter was in der 1x1systems.css enthalten ist, was dazwischen funkt.
Also: Entferne ALLE anderen CSS Anweisungen von dem Menü!!!
Bau dann die CSS-Anweisungen von MenuMatic ein und bau das dann nach deinen Bedürfnissen um.

Viele Grüße

[addy]

Perfekt !! Danke für die Hilfe !!

[Snaky]

Hallo allerseits!

Ich habe folgendes Problem:
Einige Menüpunkte sind nur zur Kategorisierung und sollen nicht verlinkt sein.
Habe es mit http://de.contaowiki.org/Navigations...icht_verlinken versucht, dann zerhaut es mir aber komplett das ganze css, obwohl ich das ganze css einmal kopiert hab und alles mit .nonavlink erweitert habe. Gibt es dafür eine simple Lösung bei MenuMatic?

Lg
Michi

[MacKP]

Hallo Snaky,
ich hab jetzt nicht lange nachgeschaut in den Original Scripten, aber ich glaube das die nicht Verlinkung die Sache nicht gerade einfacher macht ^^
Ich würde da jetzt einfach Interne Weiterleitungen nutzen.

Aber an sich kann man da so nicht wirlich was zu sagen. OHNE LINK gehts einfach nicht.
Dazu hier auch noch mal der passende Thread: http://www.contao-community.de/showt...mit-URL-posten

Viele Grüße

[Snaky]

Achso. Ja kein Ding. http://www.michaelhartmann87.de
Und es sollen quasi alle Punkte die keinen unterpunkt haben "gekillt" werden.

Lg

[murphyslaw]

Hallo MacKP,

danke für dein tolles Tut und deine MenuMatic Lösung. Ich habe nun die vertikale Variante eingebaut.

Leider tritt das Problem auf, dass bei mir alles aufgeklappt gezeigt wird! Habe eigentlich alles gemacht wie im Tut beschrieben nur eine kleien Unsicherheit: beim zu ersetzenden Code habe ich nun im Layout folgenden JS eingesetzt bzw. die letzte Zeile wie im Tutorial für vertical empfohlen folgendermaßen ergänzt:

<!-- Load the MenuMatic Class -->
<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script> 
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
window.addEvent('domready', function() {
var myMenu = new MenuMatic({ orientation:'vertical' });
</script>

var myMenu = new MenuMatic({ orientation:'vertical' }); ob das so richtig in obigen Code eingebaut ist? Oder gehört es in die JS-Datei?

Die JS Datei habe ich übrigens in den Ordner JS geladen, der sich im Wurzelverzeichnis der Contao-Installation befindet (also im Contao-Installations-Ordner).

Gerne kannst Du es dir mal ansehen, das ist sicher einfacher als dir lang und breit was zu erklären! Vielleicht siehst du ja gleich wo bei mir der Hund begraben ist.

Da die Website derzeit noch nicht öffentlich ist, habe ich dir eine PM zugeschickt.

Wäre riesig super wenn du heute mal kurz draufgucken könntest!
1000 Dank!

[MacKP]

Hallo murphyslaw,
das js sollte dann so richtig eingebunden sein.
Es kann sein, das dein JS gar nicht funktioniert, weil falsch verlinkt, oder nicht genügend rechte. Das selbe mit dem CSS. Ich hab jetzt keine Zeit nachzusehen...
Musst du selber mal schauen.

Viele Grüße

PS: Bitte nicht mit ner PM auf Beiträge aufmerksam machen!
Wenn ich Zeit habe versuch ich zu helfen und ich bekomme mit wann was passiert (ja, ich lese wirklich jeden Post)...
Zugangsdaten erfrage ich und brauche/will diese vorher nicht haben.

[murphyslaw]

Danke, habe es nun hingekriegt

[P_J]

Hallo allerseits!

Ich habe folgendes Problem:
Einige Menüpunkte sind nur zur Kategorisierung und sollen nicht verlinkt sein.
Habe es mit http://de.contaowiki.org/Navigations...icht_verlinken versucht, dann zerhaut es mir aber komplett das ganze css, obwohl ich das ganze css einmal kopiert hab und alles mit .nonavlink erweitert habe. Gibt es dafür eine simple Lösung bei MenuMatic?

Lg
Michi

Hallo Snaky,
ich hab jetzt nicht lange nachgeschaut in den Original Scripten, aber ich glaube das die nicht Verlinkung die Sache nicht gerade einfacher macht ^^
Ich würde da jetzt einfach Interne Weiterleitungen nutzen.

Aber an sich kann man da so nicht wirlich was zu sagen. OHNE LINK gehts einfach nicht.
Dazu hier auch noch mal der passende Thread: http://www.contao-community.de/showt...mit-URL-posten

Viele Grüße

Hallo,
ich hab mich grad auch mal mit der Thematik beschäftigt. Selbst wenn mans mit eigenem CSS hinbiegt, dass der Rahmen stimmt, passt irgendwas nicht. Der Sliderkasten hat nen mords Abstand zum eigentlichen Feld und er fährt auch nicht mehr aus, sondern ist plötzlich da.
Der Tipp mit der internen Weiterleitung hab ich zu Herzen genommen und ihn auf die erste Seite im Untermenü gelegt. Nicht perfekt, aber annehmbar.
Für eine Lösung bin ich immer offen. ;-)

Trotzdem vorerst mal vielen Dank!
Grüße Pascal

[Rocksoft]

Hallo zusammen,

gibt es eine möglichkeit den Aktiven menü mit ein hintergrund Bild zu hinterlegen?

ich kann zwar die Farbe von den em ändern aber mit den hintergrung klapt es leider nicht.

Danke

MfG Robert

[MacKP]

Hallo Rocksoft,
mit a:activ wirst du nicht weit kommen, das ist eine Pseudo Klasse (SuMa bentutzen um mehr zu erfahren).
Du wirst schon das <em> oder den Link mit trail Formatieren müssen. Es kann auch sein, das du li.active oder li.trail nehmen musst, wenn der Hintergrund darüber definiert wurde...
Was auch immer: ohne Link kann man da nicht viel zu sagen.

Viele Grüße

[Rocksoft]

Hallo MacKP,


danke für deine Antwort, das sistema lauft in localhost modus daher ist es nicht sichtbar, ich werde mal ein wenig rumtesten, ich melde mich dann hier wenn ich was raus finde.

Mercy + Grüsse
Robert

[Covent]

Hallo Zusammen,

Ich habe da ein Problem mit der Darstellung des Menüs in FireFox wenn der Zoom auf "normal" steht. sobald man über meinen ersten Menüpunkt fährt erscheint der Unterpunkt nicht geradlinieg unter dem Hauptmenüpunkt. Unter IE taucht das Problem nicht auf, und auch nicht wenn man Zoom vergrössert/verkleinert im FireFox.

Ich denke das hat etwas mit dem Scrollbalken zu tun, welcher erscheint wenn die Seite länger ist. Lösung dazu finde ich leider keine

Hier noch der Link zu meiner Testseite.

Vielleicht findet jemand etwas heraus

Besten Dank und Grüsse

Covent

[MacKP]

Ja, sieht so aus, als ob die Position unter diesem phänomen leidet....
Als einfache Lösung: lass dir immer nen Scrollbalken anzeigen. Anleitungen gibts im Internet oder hier im Forum. Ist eh netter wie ich finde, da die Seite dann optisch nicht 'springt' wenn der mal da ist und mal nicht.

Viele Grüße

[Covent]

Vielen Dank für deinen Tip.

Ich habe das jetzt mal eingebaut. Jedoch ist das Problem nicht gelöst, da das Problem ja leider genau durch diesen Balken entsteht. Leider kann ich nicht einfach den Untermenüpunkt nach rechts verschieben weil sonst passt es wieder woanders nicht.

Als ich mit der Seite angefangen habe hat es in allen Browsern funktioniert. Irgendwas muss ich verbockt haben im CSS... nur was... :S

Grüsse

[Rocksoft]

Versuche es mit

.smOW{

padding: 1px 3px; <--- anpassen

}

MfG
Robert

[Covent]

Vielen Dank, damit klappts

mfg Covent

[skuhrt]

Edit: Nachdem ich mir das CSS der Vorlage mal neu sortiert habe kam ich auf die a-Elemente von #subMenusContainer. Diesen hab ich ein unteres margin von 15px verpasst, und siehe da, nun sieht der Container (nahezu) so aus wie er soll. Das "Warum" ist mir allerdings noch nicht ganz klar...[/QUOTE]

Vielen Dank, genau das war es bei mir auch!!!