Mootools Aufklappmenü MenuMatic in TYPOlight benutzen

**subthiel** · 17.09.2010, 09:42

Hallo,
erstmal vielen Dank an MacKP für die Mühe das Menü für Contao fitzumachen.

Nun zu meinen Problem, ich habe das Menü so eingbaut wie im Tutorial beschrieben, allerdings sind die Links des Untermenüs nicht anklickbar, bzw. die erforderliche Seite. Das JavaScript hab ich jetzt bewusst, wegen IE6, ausgelassen.
Hier der Link:
http://www.jsg-kroppach.de/contao/

Das merkwürdige ist das die Beispielseiten:
http://greengeckodesign.com/projects...ical/index.htm

dort bei mir das gleiche Verhalten an den Tag legen.

Habe ich vielleicht doch was falsch gemacht?
Schonmal vielen Dank für die Hilfe.

Sonnige Grüße

Frank

**xkoy** · 17.09.2010, 09:49

Is nich dein Ernst mit IE6 oder ?

**subthiel** · 17.09.2010, 09:54

Zitat von xkoy

Is nich dein Ernst mit IE6 oder ?

Um Ehrlich zu sein, eigentlich schon.
Ich will jetzt hier aber auch keine neue Diskussion über Ja und Nein zum IE6 lostreten.

**xkoy** · 17.09.2010, 10:04

sry aber wer nen 10 Jahre alten Browser unterstützt ist selber Schuld. Viel Glück..

**subthiel** · 17.09.2010, 10:07

Da geb ich Dir definitiv Recht. Und daher schrieb ich ja auch:

Das JavaScript hab ich jetzt bewusst, wegen IE6, ausgelassen.

**xkoy** · 17.09.2010, 10:17

d.h. jetzt ?

Also bei denen gehts genauso nicht

Habe es vor 2 Wochen auch eingebaut, ist schon recht zugemüllt, hier mal meine:

http://ellingeranwalt.dyndns.org

Wie du siehst gehts bei mir OHNE Java auch nicht...

Bei google Analytics, nachm Login, geht GARNIX ohne java...

Werden aber ein anderes bzw. selber eins machen.

**subthiel** · 17.09.2010, 10:27

Jetz gehts merkwürdigerweise mit JS, obwohl es vorher auch schon mit JS nicht ging.
Aber eigentlich sollte das alles auch ohne JS gehen.

Werd ich mir später nochmal genauer anschauen.

**MacKP** · 17.09.2010, 14:10

Äh.. ich versteh jetzt das ganze Problem nicht...
Wenn der IE6 unterstützt werden soll dann geht das NUR über JS, da der sonst nicht damit klar kommt, das nicht Link Elemente nen hover haben.
Also einfach JS für IE6 drinn lassen und gut ist.. die anderen Browser brauchens ja nicht laden.

Viele Grüße

**subthiel** · 17.09.2010, 17:48

Hi MacKP,
danke für Deine Antwort.
Das das JS nur für den IE6 gebraucht wird weiß ich.
Was jetzt komisch ist, ohne JS von meiner Seite aus ist, JS ist jetzt auch rausgenommen, das sobald ich einen Link aus dem Untermenü auswähle er erstmal rechts neben dem Untermenü erscheint, und selbst nicht anklickbar ist und die entsprechende Seite nicht auf geht.

Im Anhang ist ein Screenshot so wie es bei mir dann aussieht, ohne JS.

Im Chrome klappt das ohne JS so wie es soll , allerdings nicht unter Firefox und IE8.

**MacKP** · 18.09.2010, 10:09

Hallo subthiel,
da kann man nur helfen wenn man direkt auf die Seite kommt.
Ich schätze mal da passt was mit deinem CSS nicht.

Viele Grüße

**subthiel** · 20.09.2010, 10:27

Hi MacKP,

Zitat von MacKP

Ich schätze mal da passt was mit deinem CSS nicht

ich habe die CSS Datei unverändert von http://greengeckodesign.com/menumatic benutzt, auf deren Seite scheints aber ebenso nicht vernünftig zu funktionieren.

Grüße

Frank

**MacKP** · 20.09.2010, 10:43

Also in meinem FF ohne JS funktionieren die Beispiele ohne Probleme. Die Schriften laufen dann nur bei extremer Breite etwas aus dem Kasten.
Warum das bei dir aber nen riesen Stück weiter rechts ist kann ich dort nicht nachstellen.

Also:
- entweder das ist wirklich im Originalcode auch so, dann bitte an den Hersteller wenden. Der ist dann der passende Ansprechpartner.
- Oder das ganze mal online stellen, denn ohne das live zu sehen kann ich da nix machen. Es könnten einige CSS-Definitionen von dir da mit rein spielen und das kann man anders nicht nachvollziehen.

Viele Grüße

**subthiel** · 20.09.2010, 11:16

Hi MacKP,
hier der Link der Live Seite, den hatte ich oben schon mal gepostet:
http://www.jsg-kroppach.de/contao/
Habe jetzt das JS mit reingenommen, dann klappts.

Grüße

Frank

**MacKP** · 20.09.2010, 11:31

Hallo subthiel,
dein Problem ist einfach das Falsche CSS.
Du hast das für eine Horizontale Navi genommen. Nimm das für eine Vertikale und gut ist.

Viele Grüße

**subthiel** · 20.09.2010, 12:20

Hallo MacKP,
eigentlich war da schon das richtige CSS drin, habe eben nochmal das vertikale hochgeladen, und auch beide gegeneinander ausgetauscht, und immer noch das gleiche Problem.
Werde mich später nochmal drum kümmern und den Fehler suchen.

Grüße

Frank

**MacKP** · 20.09.2010, 12:41

Hallo subthiel,
dann liegts vllt noch an deinem Cache...
Ich hab da original die Falschen CSS angaben gefunden, live ausgetauscht und alles ohne JS getestet unter FF. Es funktionierte mit dem passenden CSS dann auch richtig.

Viele Grüße

**subthiel** · 20.09.2010, 20:22

Hallo MacKP,
also am Cache kanns nicht liegen wenn ich die Seite an 4 verschiedenen FFs (3.6.10)ausprobiert habe. Und selbst das Menü der Original Seite funktioniert nicht auf allen 4ren nicht. Kein Ahnung worans liegt. Wenn Du mir vielleicht die Datei geben mit der Du es Live ausgetauscht hast?!

Selbst das horizontal Menü funktioniert schon nicht auf der Original Seite:
http://greengeckodesign.com/menumatic

Grüße

Frank

**MacKP** · 20.09.2010, 20:28

Hallo subthiel,
ich versteh nicht was dein Problem ist...
Ich hab mir jetzt auch noch einmal die Horizontale Navi ohne JS angeschaut. Bis auf ein paar Anzeigefehler funktioniert aber alles wunderbar. Man kommt an alle Navipunkte drann.

Das einzige was ich gemacht habe:
- Beispiel mit Vertikaler Navi geöffnet
- CSS bearbeiten angeklickt bei meiner Webdeveloper Toolbar (oder CSS per Hand aufrufen, geht auch)
- MenueMatic.css kopiert und bei dir eingefügt an der passenden Stelle (ebem in deine Datei.. einfach alles überschrieben...)

Viele Grüße

**subthiel** · 20.09.2010, 21:06

Hallo MacKP,
ok kanns hier bei mir echt nicht nachvollziehen warum das nicht klappt, habs an 4 verschiedenen Rechnern ausprobiert und immer noch der selbe Fehler, auf beiden Seiten (original/meine), ich lass es dann jetzt erstmal mit JS und dann is auch erstmal gut so.

Vielen vielen Dank für Deine Hilfe.

Grüße

Frank

**hajo808** · 29.09.2010, 09:52

Hallo!

Ich habe da mal eine Frage.

Und zwar habe ich das menumatic in eine ganz normale Seite eingebaut.
Das klappt auch alles soweit.

Das Problem ist, sollte bei einem User Java deaktiviert sein, sollt die Navigation trotzdem funzen.
Kommentiere ich also

Code:

<!-- <link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="screen" charset="utf-8" /> -->

aus, wird das Menü so angezeigt wie es ohne JavaScript funzt.
Leider werden unter dem Content die ausgeblendetetn unterlinks angezeigt.
(bei einem horizontalen Menü)

Das liegt an den unteren Codesegmenten.

Code:

            <!-- Load the Mootools Framework -->
             <script src="http://www.google.com/jsapi"></script><script>google.load("mootools", "1.2.1");</script>    
    
             <!-- 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() 
            // remove classe entfernt
            {var myMenu = new MenuMatic();});        
           </script>

Wo "// remove classe entfernt" steht müsste ich noch was eintragen damit das Script die versteckten Menüs nicht anzeigt und dann weiter durchläuft.

Weiss einer wie man das anstellt?

Code:

<div id="main_nav">
                <ul id="nav">
                    <li id="start">         <span>Startseite</span></li>

                    <li id="philo">            <a href="philosophie.html" alt="Philosphie"    title="Unsere Philosophie">Philosophie</a></li>
                    <li id="ueberuns">      <a href="ueberuns.html"    alt="&Uuml;ber uns" title="Wir &uuml;ber uns">&Uuml;ber uns</a></li>
                    <li id="leistungen">     <a href="leistungen.html"  alt="Leistungen"    title="Diese Leistungen bieten wir ihnen">Leistungen</a>  
                        <ul class="nav2">
                            <li id="soziales">       <a href="soziales.html"       alt="Soziales"         title="Soziales">Soziales</a></li>       
                            <li id="behoerden">      <a href="behoerden.html"      alt="Beh&ouml;rden"    title="Beh&ouml;rden">Beh&ouml;rden</a></li>

                            <li id="betreuung">      <a href="betreuung.html"      alt="Betreuung"        title="Betreuung">Betreuung</a> </li>
                            <li id="hauswirtschaft"> <a href="hauswirtschaft.html" alt="Hauswirtschaft"   title="Hauswirtschaft">Hauswirtschaft</a> </li>
                        </ul>
                    </li>
                    <li id="preise">        <a href="preise.html"   alt="Honorar"   title="Honorar">Honorar</a></li>

                    <li id="kontakt">       <a href="kontakt.html"  alt="Kontakt"   title="Kontakt">Kontakt</a></li>
                    <li id="links">         <a href="links.html"    alt="Links"     title="Links">Links</a></li>
                </ul> 
            
        </div>

Ich habe der ul eine Klasse gegeben..nav2.. nur weiss ich nicht wie ich das in der Javascript Anweisung mitteile.

Ich habe das mit id probiert..aber das klappt irgendwie auch nicht.
http://www.mysrc.de/mootools/mootool...class-problem/

Weiss einer wie man das macht?

So sieht es auch wenn auskommentiert ist.

Gr

[Anmerkung Moderation: Ich hab' Deinen Beitrag in dieses Thema verschoben!]

***xchs*** · 29.09.2010, 10:24

Hallo hajo808,

wieso kommentierst Du das Stylesheet Deines Navigationsmenüs aus?

Wenn Du testen möchtest, wie das Menü ohne JavaScript funktioniert, dann deaktiviere diese Skriptsprache (zeitweilig) in den Einstellungen Deiner Browser-Software.

**hajo808** · 29.09.2010, 12:04

Hallo!

Ich kommentiere so aus..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Startseite</title>
        <link rel="stylesheet" href="css/bsb.css" type="text/css" media="screen, projection" charset="utf-8" />
     <!--   <link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="screen" charset="utf-8" /> -->

        <!--[if lt IE 7]>
            <link rel="stylesheet" href="css/MenuMatic-ie6.css" type="text/css" media="screen" charset="utf-8" />
        <![endif]-->
        
    </head>
    <body id="startseite">
        
        <div id="wrapper">
            
            <div id="header">
                
                <div class="skiplink">
                    <a href="#main_nav" title="Zur Navigation springen">Zur Navigation springen</a><br/>

                    <a href="#content"  title="Zum Inhalt springen">Zum Inhalt springen</a>
                </div>
                        
            </div>
            
   
        <div id="main_nav">
                <ul id="nav">
                    <li id="start">         <span>Startseite</span></li>

                    <li id="philo">            <a href="philosophie.html" alt="Philosphie"    title="Unsere Philosophie">Philosophie</a></li>
                    <li id="ueberuns">      <a href="ueberuns.html"    alt="&Uuml;ber uns" title="Wir &uuml;ber uns">&Uuml;ber uns</a></li>
                    <li id="leistungen">     <a href="leistungen.html"  alt="Leistungen"    title="Diese Leistungen bieten wir ihnen">Leistungen</a>  
                        <ul class="nav2">
                            <li id="soziales">       <a href="soziales.html"       alt="Soziales"         title="Soziales">Soziales</a></li>       
                            <li id="behoerden">      <a href="behoerden.html"      alt="Beh&ouml;rden"    title="Beh&ouml;rden">Beh&ouml;rden</a></li>

                            <li id="betreuung">      <a href="betreuung.html"      alt="Betreuung"        title="Betreuung">Betreuung</a> </li>
                            <li id="hauswirtschaft"> <a href="hauswirtschaft.html" alt="Hauswirtschaft"   title="Hauswirtschaft">Hauswirtschaft</a> </li>
                        </ul>
                    </li>
                    <li id="preise">        <a href="preise.html"   alt="Honorar"   title="Honorar">Honorar</a></li>

                    <li id="kontakt">       <a href="kontakt.html"  alt="Kontakt"   title="Kontakt">Kontakt</a></li>
                    <li id="links">         <a href="links.html"    alt="Links"     title="Links">Links</a></li>
                </ul> 
            
        </div>

            <div id="content">
                <div id="content_inhalt">

                </div>
            </div>

            
            
            <div id="footer">
                <div id="footer_inhalt">
                    
                </div>
            </div>
        </div>

        
            <!-- Load the Mootools Framework -->
             <script src="http://www.google.com/jsapi"></script><script>google.load("mootools", "1.2.1");</script>    
    
             <!-- 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() 
            // remove classe entfernt
            {var myMenu = new MenuMatic();});        
           </script>
           
    </body>

</html>

Vergebe ich der ul zB.

Code:

 <ul id="nav2">

und trage das zB. so ein..

Code:

    <!-- Create a MenuMatic Instance -->
	       <script type="text/javascript" >
	     	window.addEvent('domready', function() 
			document.getElementById('nav2').style.display='none';
			{var myMenu = new MenuMatic();});		
	       </script>

tauchen zwar die Links (bei ausgeschaltetem JS) nicht mehr auf, sobald ich JS wieder aktiviere, funzt das DropDown Menu nicht mehr.

***xchs*** · 29.09.2010, 13:38

Zitat von hajo808

Das Problem ist, sollte bei einem User Java deaktiviert sein, sollt die Navigation trotzdem funzen.

Und das tut sie auch! Aber dafür darfst/musst Du nicht irgendwelche Stylesheets auskommentieren.

Ich kann's nur nochmals sagen:

Zitat von xchs

Wenn Du testen möchtest, wie das Menü ohne JavaScript funktioniert, dann deaktiviere diese Skriptsprache (zeitweilig) in den Einstellungen Deiner Browser-Software.

Testen kannst Du das beispielsweise auch auf der MenuMatic Demo Seite: Schau Dir das Menu einmal mit aktiviertem JavaScript an und einmal ohne und Du wirst sehen, dass die Funktionalität gegeben ist und (größtenteils) jener mit aktiviertem JS entspricht.

**hajo808** · 29.09.2010, 15:10

Ahh alles klar, jetzt hab ich es gescheckt. Ich habe schon wieder viel zu kompliziert gedacht.

Gr

**Tinker2** · 06.10.2010, 13:31

Juhu MenuMatic-er,

ich habe ein (hoffe ich) etwas banales Problem mit MenuMatic, ich scheine nämlich die js-Datei einfach nicht eingebunden zu bekommen. Hmpf.

Folgende Situation:
- ganz frisches Contao, bisher nichts getan ausser dem Tut gefolgt und dieses auf einer Testseite eingebaut.
- auf besagter Testseite erscheint das Menü auch entsprechend dem MenuMatic-CSS gelayoutet, und reagiert auch indem es das Submenu aufklappt, ganz schlicht und direkt *plöpp* ohne Verzögerung oder Tween oder oder.

Im Seitenlayout habe ich den Pfad zur js-Datei lediglich angepasst:
Original (wie von MacKP vorgegeben):

Code:

<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>

Meine Änderung:

Code:

<script src="hauptverzeichnis/unterverzeichnis/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>

...wobei "hauptverzeichnis" in "TL-Files" liegt.

Eigentlich doch korrekt? Aber irgendwie greift das js nicht zu.

Hat jemand 1 oder 2 Gedanken dafür?

Danke schonmal,

Christian

***xchs*** · 06.10.2010, 13:37

Hallo Tinker2,

kann man sich die Testseite irgendwo live ansehen?

**MacKP** · 06.10.2010, 13:44

Mal die 2 Sachen Testen @ Tinker2:

1. Wenn die in tl_files sind, sollte das auch im Pfad als 1. stehen... also 'tl_files/hauptverzeichnis/unterverzeichnis/MenuMatic_0.68.3.js'

2. Mal nachschauen ob die Berechtigungen stimmen (geht auch indem du versuchst die Datei direkt im Browser aufzurufen.. wenn du das dann nicht darfst, dann fehlen da noch Rechte)

Viele Grüße

***xchs*** · 06.10.2010, 14:00

Das betreffende Skript wird nicht gefunden (Error 404), d.h. Du müsstest die Pfadangabe auf jeden Fall noch mit "tl_files/" ergänzen (also "tl_files/xxx/menumatic/MenuMatic_0.68.3.js"), sofern Du das Skript dort abgelegt hast!

**Tinker2** · 06.10.2010, 16:15

Okay, das ist wirklich ein Fehler der Kategorie:

Ich dachte das man das Verzeichnis eben gerade nicht mit angeben sollte, warum auch immer.
Na, vielen Dank euch beiden, nun funktioniert es und ich nehme mir mal was am Layout vor.

Schönen Tag allen!

**Tinker2** · 07.10.2010, 11:57

Gut Gut, ich muss nochmal hier nachfragen, da ich gerade keinen Lösungsansatz mehr finde.

Bei mir überlagern sich die einzelnen Punkte im Submenu, und ich finde den Grund nicht.
Alles ist eigentlich auf Originalzustand, hab sogar das style-css mal eingebaut, was die Sache zwar hübscher, aber nicht besser macht

Gebe aber auch zu, das ich das System hinter MenuMatic noch nicht so ganz checke, aber das kommt noch, zumindest ist das der Plan

Vielen Dank für Zeit und Rat!

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...

**Snaky** · 08.10.2010, 12:20

Hallo!

Erst einmal: Klasse Sache. Sowas hatte ich immer schon mal gesucht. Auch dass einfach auf CSS zurückgegriffen wird wenn kein JS vorhanden ist ist herrlich.

Ich habe es unter www.michaelhartmann87.de mal eingesetzt. allerdings wird bei "wir über uns" oder Forschung der subcontaier so weit unten angeordnet, ich finde aber den eintrag irgendwie nicht. Jemand eine Idee?

lg

**Tinker2** · 08.10.2010, 14:10

Schau mal in deiner js-Datei nach, ob du ganz am Anfang unter:

Code:

var MenuMatic=new Class({
  Implements:Options,options:{

die Zeilen:

Code:

tweakInitial:{x:0,y:0},
tweakSubsequent:{x:0,y:0},

findest. Diese Werte sollten 0 sein damit es wie im Bsp bei greengecko direkt anschliesst. Sie lassen dich die Positionierung des Containers ändern.

**Snaky** · 08.10.2010, 16:57

Ja. Das ist da noch drin. Ganz nach Standard.
lg

**Tinker2** · 08.10.2010, 18:58

Hm, dann finde ich auf Anhieb auch nix, bin aber auch kein Profi, und müsste selbst rumstochern und probieren.
Das einzige was mir noch aufgefallen ist wäre beim "#nav li" ein list-style "outside" der im MenuMatic.css drin ist und dort eigentlich nicht steht.
Da ich aber in den nächsten Tagen noch viel mit dem MenuMatic herum spielen werde halte ich mal die Augen offen ob sich das bei mir auch irgendwann ergibt.

**Jenna** · 08.10.2010, 19:21

Hallo Snaky,

guck mal unter:

#subMenusContainer, dort top: 1px; eintragen oder gewünschten Abstand, so funktioniert es jedenfalls bei mir.

Schau Dir Deine Site auch mal im IE 8 an, da stimmen die Abstände jetzt schon, ich sehe die grossen Abstände im Firefox, würde vorsichtshalber die neuen Werte mit den üblichen Browsern testen.

**Snaky** · 09.10.2010, 10:41

Zitat von Jenna

#subMenusContainer, dort top: 1px; eintragen oder gewünschten Abstand, so funktioniert es jedenfalls bei mir.

Da habe ich null stehen. Dieser Fehler treibt mich etwas in den Wahnsinn

lg

**MacKP** · 09.10.2010, 12:07

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

**Silvano** · 11.10.2010, 17:43

Zitat von virtuwell

Hallo-Hallo!

Bin ganz entzückt von der MenuMatic-Navigation und hab folgendes Problem:
Im active-Zustand ist der enstprechende Menüpunkt kursiv/im font-style italic.
Soweit, so gut.

Nur wenn ich gern diese Deklaration ändern bzw. um eine weitere style-Definition ergänzen möchte, wo mach ich das?
Verschiedene CSS-Anweisungsversuche meinerseits wie "#nav .active ...", selbst in der basic.css und mit ! important - Zusatz bleiben erfolglos.

Kann mir jmd. helfen?

...sorry fürs "Belästigen" - ich hab den Fehler selbst gefunden:
differente nav-css-Dateien im root und projekt-Ordner.

Hallo Zusammen.
Habe ein kleines Problem mit dem obigen zitiertem Text.
Habe genau das Problem, das ein aktiver Menüpunkt 'italic' hat obwohl ich rein gar nix finde betreffend 'italic'. Wo kann ich es ändern oder bei welchem CSS Punkt? Thanks.

**MacKP** · 11.10.2010, 22:40

Hallo Silvano,
schau dir das ganze mit Firebug (Addon von Firefox) an. Dann wirst du das rausfinden.
Es ist sinnlos hier jedem jeden einzelnen Wert vorzukauen, wie man das CSS anpassen kann. Das ist eh ziemlich individuell und je nach Bedarf.

Von daher ist es wesendlich effektiver, wenn du selber versucht das heraus zu finden ;-)

Viele Grüße

**Silvano** · 11.10.2010, 22:48

Danke für dein Antwort. Habe ich aber schon getan und bin eig. immer noch dran ;-)
Ist mir auch bewusst das es nix bringt alles vorzukaufen ... aber ...