Sammy

Mitglieder
  • Gesamte Inhalte

    3
  • Registriert

  • Letzter Besuch

Ansehen in der Community

0 Neutral

Über Sammy

  • Rang
    Mitglied
  1. Probleme mit responsive Menu

    So, nach vielem herum ärgern, funktioniert die Navi weitestgehend, das einzige, was jetzt immer noch nicht funktioniert ist das ausklappen beim hovern (in der desktop ansicht) und das ausklappen der zweiten, dritten und vierten Ebene in der mobilen Ansicht. Ich nehme an, dass es am css liegt, wäre echt nett, wenn mir da vielleicht doch noch jemand auf die Sprünge helfen könnte. Mein CSS sieht derzeit so aus: /*! responsive-nav.js 1.0.39 by @viljamis */ .Nav { font-size:1.2em; line-height:2.5em; background-color: #008fc4; } ul.nav-collapse, ul.nav-collapse ul { margin: 0; padding: 0; width: 100%; display: block; list-style: none; } ul.nav-collapse li { width: 100%; display: block; float: none; } ul.nav-collapse a { display:block; height:1.9em; padding:0 1.2em 0.6em 1.1em; text-decoration:none; color: #fbfbfb; } ul.nav-collapse li a:hover {background-color: #009ed9; } ul.nav-collapse li #active {background-color: #009ed9; } /* Für Unterpunkte keine Float-Eigenschaft */ ul.nav-collapse ul li { width: 100%; display: block; float: none; } /* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */ ul.nav-collapse ul li.hover, ul.nav-collapse ul li:hover { background-color: #009ed9; } /* Zweite Ebene */ ul.nav-collapse ul { display: none; background-color: #008fc4; } /* Zweite Ebene anzeigen */ ul.nav-collapse li.hover ul, ul.nav-collapse li:hover ul { display: block; } /* Dritte Ebene */ ul.nav-collapse li.hover ul ul, ul.nav-collapse li:hover ul ul { display: none; margin: -2.56em 0 0 11em; height:auto; width:12.8em; padding-top:0.05em; } /* Dritte Ebene anzeigen */ ul.nav-collapse li.hover ul li.hover ul, ul.nav-collapse li:hover ul li:hover ul { display: block; } /* Vierte Ebene */ ul.nav-collapse li.hover ul li.hover ul ul, ul.nav-collapse li:hover ul li:hover ul ul { display: none; margin-left:12.8em; width:12.8em; } /* Vierte Ebene anzeigen */ ul.nav-collapse li.hover ul li.hover ul li.hover ul , ul.nav-collapse li:hover ul li:hover ul li:hover ul { display: block; } .js .nav-collapse { clip: rect(0 0 0 0); max-height: 0; position: absolute; display: block; overflow: hidden; zoom: 1; } .nav-collapse.opened { max-height: 9999px; } .nav-toggle { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } @media screen and (min-width: 1024px) { .js .nav-collapse { position: absolute; } .js .nav-collapse.closed { max-height: none; } .nav-toggle { display: none; } .Nav { width:100%; height:2.5em; font-size:1.2em; line-height:2.5em; background-color: #008fc4; } .contentNav { width:100%; } ul.nav-collapse, ul.nav-collapse ul { list-style-type: none; height:auto; position:absolute; z-index:9999; } ul.nav-collapse li { display:block; width:auto; height:auto; float: left; text-shadow: 1px 1px 1px rgba(35, 31, 32, 0.4); } ul.nav-collapse a { display:block; height:1.9em; padding:0 1.2em 0.6em 1.1em; text-decoration:none; color: #fbfbfb; } ul.nav-collapse li a:hover {background-color: #009ed9; } ul.nav-collapse li #active {background-color: #009ed9; } /* Für Unterpunkte keine Float-Eigenschaft */ ul.nav-collapse ul li { float:none; height:auto; } /* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */ ul.nav-collapse ul li.hover, ul.nav-collapse ul li:hover { background-color: #009ed9; } /* Zweite Ebene */ ul.nav-collapse ul { display: none; background-color: #008fc4; } /* Zweite Ebene anzeigen */ ul.nav-collapse li.hover ul, ul.nav-collapse li:hover ul { display: block; } /* Dritte Ebene */ ul.nav-collapse li.hover ul ul, ul.nav-collapse li:hover ul ul { display: none; margin: -2.56em 0 0 11em; height:auto; width:12.8em; padding-top:0.05em; } /* Dritte Ebene anzeigen */ ul.nav-collapse li.hover ul li.hover ul, ul.nav-collapse li:hover ul li:hover ul { display: block; } /* Vierte Ebene */ ul.nav-collapse li.hover ul li.hover ul ul, ul.nav-collapse li:hover ul li:hover ul ul { display: none; margin-left:12.8em; width:12.8em; } /* Vierte Ebene anzeigen */ ul.nav-collapse li.hover ul li.hover ul li.hover ul , ul.nav-collapse li:hover ul li:hover ul li:hover ul { display: block; } }  
  2. Probleme mit responsive Menu

    Ich hab noch Bilder vom derzeitigen Stand vergessen. Auf dem ersten sieht man, dass die Menüpunkte beim hovern zusammen rücken oO generell ist es irgendwie ziemlich verhunzt jetzt  :'(
  3. Probleme mit responsive Menu

    Hallo liebe Typo 3 Gemeinde, ich bin mit der Umsetzung meiner Navigation für die mobile Version mittlerweile echt am Ende meiner Ideen angelangt. Ich habe zwei Bilder angehangen, die die Navigation zeigt, wie sie aussehen soll. Einmal die Destkop - und einmal die mobile Version. Nun habte ich es mit viel rumprobieren und recherchieren zwar hinbekommen, dass sich die Navigation einklappt, sobald man das Browserfenster auf die mobile Größe verkleinert, aber dafür klappen sich die Unterebenen nicht bim onclick aus. Sprich, die erste Eben klappt sich per Klick aus, aber alles danach nicht mehr. Desweiteren funktioniert auch meine Desktopversion nicht mehr korrekt. Auch dort klappen sich überhaupt keine Unterebenen beim Hover aus. In meiner ursprünglichen css Version funktioniert die Desktopversion, aber sobald ich den css teil für die mobile version mit rein packe, funktioniert es nicht mehr. Ich nehme deshalb an, dass meine css irgendwie daneben ist. Eigentlich habe ich mit css sonst keine großen Schwierigkeiten, aber diesmal komm ich einfach nicht weiter. Da ich jedoch noch ein Typo 3 Anfänger bin, ist es auch möglich, dass in meinem TS irgendwas falsch ist. Ich habe schon zig Dinge ausprobiert. Z.B. ob die Reihenfolge des Einbindens der Dateien eine Rolle spielt usw. ich komme einfach nicht zum richtigen Ergebnis. Es wäre echt total nett, wenn mir jemand helfen könnte.   Mein derzeitiger Code ist leider, durch vielem ausprobieren, leider etwas konfus, ich hoffe, man steigt trotzdem durch: libs.ts ### Menü ### temp.menu = HMENU temp.menu { entryLevel = 0 1 = TMENU 1 { wrap = <ul class="nav-collapse">|</ul> expAll = 1 NO = 1 NO{ wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li> } ACT = 1 ACT{ wrapItemAndSub = <li id="active">|</li> } } 2 < .1 3 < .1 4 < .1 5 < .1 6 < .1 } lib.container < temp.menu   page.ts page = PAGE #page.config.metaCharset = utf-8 page.meta.viewport = width=device-width, initial-scale=1 ###page.headerData.120 = TEXT page.headerData.120.value ( <script type="text/javascript"> //<![CDATA[ function show(element){ element.className += "hover"; } function hide(element){ element.className = element.className = ""; } //]]> </script> )### page { config { metaCharset = utf-8 doctype = html5 additionalHeaders = Content-Type:text/html;charset=utf-8 } includeCSS.custom = EXT:wsg_distribution/Resources/Public/css/custom.css ###includeCSS.nav = EXT:wsg_distribution/Resources/Public/Css/Nav.css### includeCSS.powermailbasic = EXT:wsg_distribution/Resources/Public/Css/Form.css includeCSS.responsive-nav = EXT:wsg_distribution/Resources/Public/Css/responsive-nav.css includeJS.File1 = EXT:wsg_distribution/Resources/Public/JavaScript/responsive-nav.min.js includeJS.File2 = EXT:wsg_distribution/Resources/Public/JavaScript/responsive-nav.js   Template Content <div class="Nav"> <div class="contentNav"> <a href="http://www.woltemath-shop.de/" target="_blank"><div class="shop"></div></a> <f:cObject typoscriptObjectPath="lib.container" /> </div> </div>   Template Footer </div><!-- /.container --> <script> var nav = responsiveNav(".nav-collapse"); </script> </f:section>   CSS .Nav { width:100%; height:3.0em; background-color: #008fc4; z-index:9999; } .contentNav { min-width:380px; max-width:1250px; position:relative; left:50%; margin-left:-50%; height:2.85em; padding:0em 0em 0 0em; } ul.nav-collapse, ul.nav-collapse ul { list-style-type: none; } ul.nav-collapse li { display:block; z-index:9999; width:auto; height:auto; font-size:1.2em; line-height:2.5em; float: none; text-shadow: 1px 1px 1px rgba(35, 31, 32, 0.4); } ul.nav-collapse a { display: block; font-weight:normal; text-decoration:none; color: #fbfbfb; height:1.9em; padding:0 1.2em 0.6em 1.1em; } ul.nav-collapse a:hover {background-color: #009ed9;} ul.nav-collapse #active {background-color: #009ed9;} /* Für Unterpunkte keine Float-Eigenschaft */ ul.nav-collapse li { float:none; width:100%; height: auto; font-size:0.9em; z-index:9999; background-color: #008fc4; } /* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */ ul.nav-collapse li.hover, ul.nav-collapse li:hover { background-color: #009ed9; } /* Zweite Ebene */ ul.nav-collapse ul { font-size:0.9em; background-color: #008fc4; display: block; width: 100%; } /* Zweite Ebene anzeigen */ ul.nav-collapse li.hover ul, ul.nav-collapse li:hover ul { display: block; } /* Dritte Ebene */ ul.nav-collapse li.hover ul ul, ul.nav-collapse li:hover ul ul { display: none; font-size:1.18em; z-index:9997; } /* Dritte Ebene anzeigen */ ul.nav-collapse li.hover ul li.hover ul, ul.nav-collapse li:hover ul li:hover ul { display: block; width:12em; } /* Vierte Ebene */ ul.nav-collapse li.hover ul li.hover ul ul, ul.nav-collapse li:hover ul li:hover ul ul { display: none; font-size:1.18em; z-index:9996; } /* Vierte Ebene anzeigen */ ul.nav-collapse li.hover ul li.hover ul li.hover ul , ul.nav-collapse li:hover ul li:hover ul li:hover ul { display: block; width:12em; } .js .nav-collapse { clip: rect(0 0 0 0); max-height: 0; position: absolute; display: block; overflow: hidden; zoom: 1; } .nav-collapse.opened { max-height: 9999px; } .nav-toggle { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } @media screen and (min-width: 1024px) { ul.nav-collapse, ul.nav-collapse ul { list-style-type: none; } /* Für Unterpunkte keine Float-Eigenschaft */ ul.nav-collapse li { display:block; float:left; height: auto; width:auto; font-size:1.2em; line-height:2.5em; text-shadow: 1px 1px 1px rgba(35, 31, 32, 0.4); } ul.nav-collapse a { display: block; font-weight:normal; text-decoration:none; color: #fbfbfb; height:1.9em; padding:0 1.2em 0.6em 1.1em; } ul.nav-collapse li a:hover {background-color: #009ed9;} ul.nav-collapse li #active {background-color: #009ed9;} /* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */ ul.nav-collapse ul li.hover, ul.nav-collapse ul li:hover { background-color: #009ed9; } /* Zweite Ebene */ ul.nav-collapse ul { font-size:0.9em; background-color: #008fc4; display: none; z-index:9998; } /* Zweite Ebene anzeigen */ ul.nav-collapse li.hover ul, ul.nav-collapse li:hover ul { display: block; } /* Dritte Ebene */ ul.nav-collapse li.hover ul ul, ul.nav-collapse li:hover ul ul { display: none; font-size:1.18em; z-index:9997; } /* Dritte Ebene anzeigen */ ul.nav-collapse li.hover ul li.hover ul, ul.nav-collapse li:hover ul li:hover ul { display: block; width:12em; } /* Vierte Ebene */ ul.nav-collapse li.hover ul li.hover ul ul, ul.nav-collapse li:hover ul li:hover ul ul { display: none; font-size:1.18em; z-index:9996; } /* Vierte Ebene anzeigen */ ul.nav-collapse li.hover ul li.hover ul li.hover ul , ul.nav-collapse li:hover ul li:hover ul li:hover ul { display: block; width:12em; } .js .nav-collapse { position: relative; } .js .nav-collapse.closed { max-height: none; } .nav-toggle { display: none; } }   Sorry, dass es soviel code ist, aber da ich nicht weiß, wo der oder die Fehler liegen, habe ich alles genommen, was das Menü betrifft. Außer den JS teil, den habe ich unverändert gelassen, da ich mit folgendem Plugin versucht habe, meine Navigation responsive zu machen.  http://responsive-nav.com/ Sobald ich im CSS die letzten drei klassen einfüge, also in beiden versionen ab .js .nav-collapse, klappt sich nichts mehr aus.  Ich benutze kein Templavoila oder so. ich hatte mal versucht ein Bootstrap einzubinden, aber damit bin ich irgendwie nicht zurecht gekommen. Die Website an sich ist fertig und bis auf das Menü ist auch alles responsive, es hängt nur noch an der navigation. :( Ich wäre echt froh, wenn mir da jemand helfen könnte.