Inzwischen habe 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 Ebene 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.
Hier mal meine derzeitigen Codes:
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;
}
}
Ich hab noch Bilder vom aktuellen Stand angehangen. Auf dem letzten sieht man in der mobilen Version, dass sich die erste Ebene (wird im Moment noch vom Banner überdeckt) ausklappt und auf den anderen beiden Bildern ist die Desktopversion zu sehen, dort rücken die Menüpunkte beim hovern plötzlich zusammen oO nehme ich die letzten drei Klassen, also ab .js .nav-collapse, aus der css raus, dann funktioniert meine Desktopversion wieder, aber dann klappt sich auf der mobilen Version eben nichts ein. Ich komm so absolut nicht weiter 🙁 hat nicht irgendjemand eine Idee oder einen Tipp für mich? Alles andere funktioniert einwandfrei auf der Website,es hängt nur an dieser doofen Navi -.-