Submenu Problem bei MenuMatic

[bcit6k]

Hallo,

ich habe bei MenuMatic (das ich echt nicht schlecht finde) ein Problem beobachtet.
Dieses Problem hab ich auch auf anderen Seiten bzw beim MenuMatic Sample selber endecken können!

Mein Submenu ist in einem DIV das mittig vom Browser Fenster ausgerichtet ist. Bei manchen Browser Fenster Breiten verschiebt sich das Submenu um einen Pixel nach links.

konnte das schon jemand anders auch beobachten ? und wenn ja hat jemand einen fix dafür?

danke

[MacKP]

Hallo bcit6k,
wenn das auch im Original so passiert, dann sag doch einfach dem Entwickler Bescheid.
Gib Ihm aber noch Angaben wie:
- Browser und Version
- Unter welchen Umständen genau

Viele Grüße

[bcit6k]

Hi,

ja ich hab dem Entwickler bereits eine mail zugesendet und in seinem Forum diesbezüglich einen Post hinterlassen. leider erst gestern.

Browser habe ich bis jetzt Firefox,Safai und IE getestet auf Windows XP,7, und Mac OSX
überall das selbe Ergebnis!

Der Aufbau der Seite ist recht einfach, im header .inside ist das ul li menu plaziert. die ganze seite ist mittig zentriert (wrapper)

auf dieser Seite sieht man es recht gut http://tff-kassel.de .

wenn ich nun das browserfenster immer um ein paar pixel zusammen schieb und dann wieder mit dem mauszeiger über das submenu fahre, rückt diese eben bei bestimmten breiten einfach um einen px nach links.

ich habe mir auch schon die positionen an denen das submenu angefügt wird ausgebenlassen ob da irgend welche zahlen dabei sind die nicht durch 2 teilbar sind, aber egal ob gerade oder ungerade zaheln es tritt einfach "wilkürlich" auf.

leider konnte ich noch keine logik dahinter finden.

ich bin mir nicht mal sicher ob das menu den fehler macht oder ob der browser das wrapper div falsch positioniert!

[bizon]

Dieser Versatz liegt am MenuMatic.css in der Klasse .smOW. Der Standardwert ist margin:0 0 0 -2px; Der Wert muss je nach Design angepasst werden.

Besser passt es bei der ttf-kassel.de, wenn .smOW auf margin:0 0 0 -1px lautet.

[bcit6k]

ja das stimmt, das habe ich acuh schon probiert es mit diesem Parameter zu korrigieren, aber das passt dan auch wieder nur für die Browser bildbreite. Wenn du das Browser fenster wieder schrittweise vergößerst oder verkleinerst tritt die verschiebung erneut auf!

[bizon]

Sprichst du jetzt weiterhin über tff-kassel.de? Wenn ja, dann liegt das vermutlich nicht nur an der MenuMatic.css.

Auf meiner Seite funzt MenuMatic - gleitschirmschule.at

Ich hab den Versatz über .smOW angepasst.

[bcit6k]

hallo,

ich habe mir gerade deine seite angesehen. wenn ich die in meinem browser fullsize öffne Anzeigebereich 1936x1034 sehe ich den 1px versatz, siehe bild.

Wenn ich nun meine Browser verkleinere zb.: auf 1501x823 verschwindet die verschiebung.

das selbe ist bei der tff-kassel.de und jeder anderen seite ide ich mit menumatic bis jetzt gesehen habe.

[bcit6k]

ichhab mir nun noch einen Ansatz überlegt, aber leider reichen meine Mootools kentnisse noch nicht aus. Vieleicht kann mir jemand von euch weiterhelfen.

ich möchte gerne die x koordinate des ersten div's das die Klasse .smOW hat abrufen.

Für das div mit dem namen nav ist mir das schon gelungen.

Aber für ein Klassenobjekt eben nicht!

[bcit6k]

Hallo,

so nun habe ich eine Möglichkeit gefunden dem Problem zu begegnen.

function correct_mm(){
	var viewportwidth = document.body.scrollWidth;
	var tweak = 0;	
	if(viewportwidth%2){
		var tweak = 1;
	} 	
	return tweak;
}

function dommmenu(){
	var tweak = correct_mm();
	var myMenu = new MenuMatic({
						opacity:80,
						effect:'fade',
						duration:100,
						tweakInitial:{ x:tweak , y:0 }
				});
}

window.addEvent('domready', function(){
	console.log('load');
	dommmenu();
});

window.addEvent('resize', function(){
	console.log('resize');
	dommmenu();
});

das Problem dabei ist aber noch das ich bei einem resize das menü nicht überschreiben kann!

wie kann ich das alte menü mit dem neuen überschreiben?

hat da jemand eine idee?

danke

[css-umsetzung]

Hi,

ich behaupte mal, das du den falschen Ansatz hast, dein submenü wird immer vor </body> erstellt, so dass sich alles nach der Position vom body richtet.

Da der Body in fast allen Browsern ein Problem bei der Pixelverschiebung hat, würde ich es anders versuchen.

mein Vorschlag:

du nimmst die javascript Datei und ersetzt alle document.body gegen 'wrapper' incl. der quotes. dann gibst du deinem #wrapper ein position:relative zu den Stylesheets hinzu (ich setzte voraus, das dein #wrapper eine feste Breite hat).

nun musst du nur noch top: von der Klasse smOW anpassen dann sollte es eventuell gehen.

Wie gesagt ich gehe davon aus, dass #wrapper eine feste Breite hat.

[bcit6k]

hallo,

danke für den Denkansatz. Dieser ist mir absolut lieber als mit so viel JS um sich zu feuern.

das submenu am wrapper aus zu richten find ich gut! leider reicht die umstellung die du gepostet hast nicht. das submenu witrd irgendwo angezeigt, je nach breite des fensters. ich versuche noch raus zu finden welche anderen parameter da noch mitspielen.

Einen konnte ich bereits finden, es ist die psoition des buttons

this.btn.getPosition().x

danke

[css-umsetzung]

deshalb sagte ich ja, das man das mit den styles noch anpassen muss und wenn es "irgendwo" angezeigt wird, dann ist dein wrapper nicht relative positioniert, es muss also irgendwo innerhalb des wrappers angezeigt werden.

Es war auch nur ein Denkansatz, der natürlich noch richtig ausgearbeitet werden muss meine Lösung war nur ungefähr von dem ausgehend, was ich bei den angegebenen Seiten gesehen habe.

[bcit6k]

Hallo,

sorry ich wollt dir nichts vorhalten. Anbei habe ich nun das Umgebaute file. Ich hoffe es hilft einigen! Bei mir funktionierts ganz gut, nur Safari kommt nicht ganz zurecht damit, wobei ich da eher auf mein css tippe!

mein wrapper ist mittig ausgerichtet und hat eine fixe breite!

[Nikolas]

Hervorragend

Hatte das Problem auch bei einem aktuellen Projekt. Mit dem angepassten Script funktioniert es einwandfrei.

Vielen Dank für eure Mühen

Gruß
Nikolas

[css-umsetzung]

ich kenne das Script, da ich es auch bereits, auf drei Webseiten verwendet habe, nur ist mir bisher noch nie dieses Pixelproblem aufgefallen und ich hab mich noch nie damit beschäftigt was Menumatic wirklich macht

Also im Grunde, ist alles was du anscheinend zu tun hast, der klasse Smow ein top:xx px !important; zu geben, dass hat in meinem schnellem Test eben gereicht, aber das kann natürlich je Layout auch abweichen, so dass eventuell mehr angepasst werden muss, es kommt ja vermutlich auch darauf an, wie viele Ebenen du hast, ein darauf schauen wäre also vorteilhaft.

[bcit6k]

das einzige was mir noch aufgefallen ist,ist das es im safari anscheinend nicht richtig funktioniert, wenn ich über mein oberstes menü fahre klapt das submenu nicht gleich aus, erst wenn ich das zweite mal drüber fahre.

ist das bei euch auch so?

[css-umsetzung]

Ich habe mich noch einmal ran gesetzt und das Script einfach ein wenig abgeändert, so dass es auf "#wrapper" geimpft ist und ein Demo online gestellt, das du dir hier anschauen kannst.

ich habe das jetzt in allen wichtigen Browsern getestet (IE6/IE7/Opera/FF/Safari (PC) /Chrome) es gibt keine Probleme.

http://statisch.kunden-layout.de/menumatic/

ich werde mir das aber schon weil ich es ja auch verwende demnächst genauer anschauen.

[bcit6k]

Hallo,

ich hab nun den unterschied gefunden, ich habe meine menus auf effect:'fade' gestellt und da funktionierts nicht auf anhib, wenn ich es aber default stelle funktionierts.

kannst du bei deinem sample mal auf effect:'fade' stellen?

[css-umsetzung]

Das ist ein Fehler von MenuMatic der im Original auch vorhanden ist.

[css-umsetzung]

Ich habe das in dem Script "MenuMatic_0.68.3.js" bei mir im Demo mal angepasst.
Im Windows Safari sollte das nun auch gehen wenn du nur "fade" eingestellt hast im Mac Safari sollte es vorher schon funktioniert haben, denke ich.

mein Demo ist auf "fade" eingestellt.

[Hoch-3]

Guten Tag wohl

Ist das sehr kompliziert, dem ul.level_2 noch den pageTitle des übergeorneten Levels als class mitzugeben? Damit könnte ich diese jeweils separat gestalten. Beispiel hier: http://bbn.hoch-3.ch. Da sollten die Dropdown-Menus und Links darin von Planning, Systems und Services in den jeweiligen Farben erscheinen. Ist das eine js-Angelegenheit?

[bcit6k]

schau mal in die seiteneigenschaften, da findest du unter experteneinstellungen css klasse das richtige!

[Hoch-3]

schau mal in die seiteneigenschaften, da findest du unter experteneinstellungen css klasse das richtige!

Danke schon mal für die Antwort. Wie kriege ich jetzt aber diese Klasse in der Ebene subMenusContainer in das entsprechenden ul.level_2 rein?

[bcit6k]

Hallo, wenn ich michnicht irre wird diese automatisch eingefügt, sonst müsste man sich das nav template file mal ansehen

[Hoch-3]

im Template-File hab ich das eigentlich auch dazugefügt. Das Problem scheint, dass eben im MenuMatic das in einem Script erstellt wird und das nicht dazugefügt wird. Kann man dem JS das irgendwie beibringen?

[bcit6k]

kannst du makl einen beispiellink posten? oder ist es der von oben?

die klasse wird mit php in das template geadded, das sollte schon im ul li stehen!

[Hoch-3]

Ist der link von oben. Es könnte aber sein, dass ich nicht das Original MenuMatic genommen habe.

Das Template nav_menumatic.tpl habe ich in nav_menumatic.html5 umbenannt und den Inhalt leicht abgeändert (damit soll das li.level_1 als Klasse den Titel erhalten, im css geb ich dann der jeweiligen Klasse die entsprechenden Farben):

<ul <?php if ($this->level == 'level_1'): ?>id="nav"<?php endif; ?> class="vlist <?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li id="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>" class="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?> active<?php if ($item['class']): ?><?php echo $item['class']; ?><?php endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li id="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>" class="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?> <?php if ($item['class']): ?><?php echo $item['class']; ?><?php endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

[bcit6k]

hi,

also wenn ich mir den quellcode der oben genannten seite ansehe sieht ein teil vom menu so aus:

<li id="Consulting" class="Consulting submenu Consulting sibling first"><a href="index.php/consulting.html" title="Consulting" class="submenu Consulting sibling first">Consulting</a><ul class="vlist level_2">
<li id="Unsere Leistungen" class="Unsere Leistungen first"><a href="index.php/broadband-consulting-leistungen.html" title="Unsere Leistungen" class="first">Unsere Leistungen</a></li>
<li id="Ihre Vorteile" class="Ihre Vorteile "><a href="index.php/broadband-consulting-vorteile.html" title="Ihre Vorteile">Ihre Vorteile</a></li>

<li id="Referenzen" class="Referenzen last"><a href="index.php/broadband-consulting-referenzen.html" title="Referenzen" class="last">Referenzen</a></li>

hast du da im backend bei den seiten dise (in fett) werte eingetargen? warum nicht die klasse des (fett italc) übergeordnetten?

ich denke wenn du die klasse des übergeordnetten in die untergeordnetten einträgst wird sich das passend einfärben! (wenn du nur die farbe dadurch veränderst)

[Hoch-3]

Heureka! Du bist mein ganz persönlicher Held des 25.8.11. :-)

Das funktioniert. Resultat: http://bbn.hoch-3.ch

Der Haken, dass man jetzt bei jeder Unterseite diese Klasse angeben muss. Muss ich halt dem Kunden in der Schulung mit einbauen.

Danke herzlichst.
René

[MacKP]

Äh.. da das eine verschachtelte Liste ist, sollte das gar nicht nötig sein bei Unterpunkten die selbe Klasse anzugeben...

1. geht das auch so li.klassevomoberpunkmt li {}
2. wenn das Untermenü transparent ist, sollte das auch so gehen, da ja in dem li die ul der Unterpunkte ist...

Viele Grüße

[bcit6k]

ja genau , ich hab da viel zu kompliziert gadacht, danke !

[cryp]

Hallo, habe ebenfalls probleme mit dem Submenü von MenuMatic. Bei Mousover über die Hauptmenüpunkte, erscheint das Submenü so wie es sein soll. Das Problem ist nur dass wenn man nun mit der Maus über die Submenüpunkte geht ist die Hinterlegte backgroundcolor ca. 30-40px nach rechts verschoben zusammen mit dem Linktext, schein als wenn der innere div des gesamten submenüs nach rechts eingerückt ist, was nicht so toll aussieht. Hat jemand Rat für mich???

LG

[MacKP]

Hallo cryp,
ohne Link kann man dir nur sagen, das es an deinem CSS liegt und du mal mit Firebug gucken musst was genau Probleme macht.

Viele Grüße

[bcit6k]

Hallo,

bsp

var myMenu = new MenuMatic({opacity:80,tweakSubsequent: {x:0,y:-40},tweakInitial: {x:0,y:-40}});

[cryp]

Vielen Dank für die Hilfe, hab den Fehler nach langer Suche im css-file gefunden

LG Cryp

[cryp]

Habe noch eine Frage bezüglich der Submenüs. Versuche grade Level 3 Submenü direkt neben dem Level 2 Sub Menü zu Positionieren aber weiß nicht recht wie...

meu.jpg

Das ist meine MenuMatic .CSS
->

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                                Main-Menue                                                                             */            
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#nav {height: 70px; overflow: hidden; list-style-type:none;}
#nav li {float: left;}
#nav li a,
#nav li span {display: block; padding: 2px 0px 0px 0px; color: #ccc; text-decoration: none; vertical-align:middle; text-align:center; font-size: 9px; line-height: 60px; border-left: 1px solid #4f4f4f;  min-width: 123px;  max-width: 123px; max-height: 67px; min-height: 67px; list-style-type:none;}
#nav li span {color: #f18f4e;}
#nav li a:hover,
#nav li a.mainMenuParentBtnFocused,
#nav li a.trail {color: #f18f4e; background: #222;}
#nav li.first a {border: none;}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                                Drop-Down-Menue                                                                        */            
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.smOW{display:none; position: absolute; overflow:hidden; padding: 0; margin: 0; margin: 0px 0px 0px 0px;}

/*     --links
------------------------------------------------- */
#subMenusContainer a {padding: 7px 0px 7px 0px; margin: 0px 0px 0px 0px; display: block; color: #fff; min-width: 124px; max-width: 124px;}

/*     --hover || focus
------------------------------------------------- */
#subMenusContainer a:hover, #subMenusContainer a:focus, .subMenuParentBtnFocused {color: #f18f4e; background: #222; text-align:center; text-decoration: none; margin: 0px 0px 0px 0px;}

/*     --aktiver & trail menuepunkt
------------------------------------------------- */
#subMenusContainer a.trail, #subMenusContainer li.active a {color: #f18f4e; background: #222; text-decoration: none; margin: 0px 0px 0px 0px; text-align:center;}

/*     --ul ebene 2
------------------------------------------------- */
#subMenusContainer ul.level_2 {background: #555; list-style-type:none; padding: 0px 0px 0px 0px; text-align:center;}

/*     --ul ebene 3
------------------------------------------------- */
#subMenusContainer ul.level_3 {background: #555; list-style-type:none; padding: 0px 0px 10px 0px; text-align:center;}

/*     --subMenusContainer verstecken
------------------------------------------------- */
#subMenusContainer {display:block; position:absolute; top:0; left:1px; width:100%; height:32px; overflow:visible; z-index:1000000000; text-align:center;}

/*     --icons wenn unterpunkte vorhanden ist
------------------------------------------------- */
/*
.mainMenuParentBtn {background: url(../img/arrow-down.png) 95% center no-repeat;}
.mainMenuParentBtnFocused {background: url(../img/arrow-down-hover.png) 95% center no-repeat;}
.subMenuParentBtn {background: url(../img/arrow-right.png) 95% center no-repeat;}
.subMenuParentBtnFocused {background: url(../img/arrow-right-over.png) 95% center no-repeat;}
*/

/*     --IE hacks
------------------------------------------------- */
#nav li ul {display: none;} /* verhindert das aufblitzen des submenus beim laden */
* + html .smOW  {margin-top: -2px; margin-left: -2px;} /*IE7 hack - richtige positionierung*/
* + html #subMenusContainer ul.level_3 {margin-top: 2px;} /*IE7 hack - richtige positionierung*/

Weiß jemand Rat?

LG und ein großes Danke im Vorraus!
Cryp

[AiGatling]

Ich habe mich noch einmal ran gesetzt und das Script einfach ein wenig abgeändert, so dass es auf "#wrapper" geimpft ist und ein Demo online gestellt, das du dir hier anschauen kannst.

ich habe das jetzt in allen wichtigen Browsern getestet (IE6/IE7/Opera/FF/Safari (PC) /Chrome) es gibt keine Probleme.

http://statisch.kunden-layout.de/menumatic/

ich werde mir das aber schon weil ich es ja auch verwende demnächst genauer anschauen.

Ich bumpe ja nur ungern einen so alten Thread, aber ich habe auch Probleme mit dieser 1px-Verschiebung. Hat noch jemand das oben verlinkte Skript?

[css-umsetzung]

Ich bumpe ja nur ungern einen so alten Thread, aber ich habe auch Probleme mit dieser 1px-Verschiebung. Hat noch jemand das oben verlinkte Skript?

Bumpen ist immer besser als Private Nachrichten

also ich hab mir das ja seinerzeit angeschaut, es geht im Grunde um nichts anderes,
als dass sich das Script nach dem Body richtet, der ja je nach Browser, gerne mal etwas wackelt.

Wenn du dir das mit Firebug anschaust, wo die untere Ebene des Menüs liegt, wirst du sehen das das vor dem </body> ist.

wenn du dir das Script anschaust, siehst du das auch :
dieses findest du überall im Script

$(document.body)

ich hatte das zum testen überall geändert auf $('wrapper')
ich bin nicht mehr sicher, aber ich glaube #wrapper muss dann in jedem Fall ein position:relative in den styles haben.

wenn #wrapper aber 100% breite hat, ist es ja klar, dass du wieder dieses Problem hast.

Es ist wie gesagt schon lange her, ich hab dann auch aufgehört mich mit diesem Menüscript zu beschäftigen weil es nicht gerade toll ist.