Mobiles Menü: 2. Ebene immer ausklappen

Hallo,

da müssen Sie etwas eigenes CSS einsetzen. Bitte dazu mal folgende Seite lesen: https://docs.zeta-producer.com/eigenes-css-einfuegen.html

Folgender Code sollte dann funktionieren:

<style>
@media only screen and (max-width: 1023px) {
    #navigation ul ul {
        display: block;
    }
}
</style>

Hallo,

ginge dies auch mit einer 3. Ebene ? Der CSS-Code oben scheint nur bis zur 2. Ebene zu gehen ..

noch schönen verregneten Sonntag

Zitat von Websven

Hallo,

ginge dies auch mit einer 3. Ebene ? Der CSS-Code oben scheint nur bis zur 2. Ebene zu gehen ..

noch schönen verregneten Sonntag

Probiere mal einfach noch ein ul hinter den anderen beiden. Ist aber nur ein Schuss ins Blaue.

madas

Zitat von sT.

Hallo,

da müssen Sie etwas eigenes CSS einsetzen. Bitte dazu mal folgende Seite lesen: https://docs.zeta-producer.com/eigenes-css-einfuegen.html

Folgender Code sollte dann funktionieren:

Code

<style>
@media only screen and (max-width: 1023px) {
    #navigation ul ul {
        display: block;
    }
}
</style>

Damit ist jedoch die Funktionalität der Pfeil-Buttons nicht mehr gegeben. Eine bessere Variante wäre das Ganze via JQuery zu implementieren, dann funktionieren die Buttons auch noch.
Der folgende Code wäre beim Attribut mobile_script einzutragen:

<script>
    $z(document).ready(function () {
        checkSize();
        $z(window).resize(checkSize);
    });

    function checkSize() {
        if ($z("#navigation").css("position") == "fixed" ){
            $z("#menubutton").click(function() {
                $z("#navigation.visible ul li.haschilds").addClass("selected");
                $z("#navigation.visible ul ul li.haschilds").addClass("selected");
                $z("#navigation.visible ul ul ul li.haschilds").addClass("selected");
            });
        }
    }
</script>

Grüße madas

Hallo madas,

danke für die Antwort - habs jetzt mal mit dem 3. ul probiert - ging leider nicht.

Was meinst mit

Zitat

Der folgende Code wäre beim Attribut mobile_script einzutragen:

bin jetzt nicht so firm, was CSS etc so angeht. Hatte den obige code unter Eigenschaft - CSS eingetragen - Deiner ist jetzt vermutlich wo anders einzutragen, oder ?

Ich hab das jetzt erst einmal mit dem Widget "Untermenü" gelöst - da wird sowieso nur auf "Artikelanker" auf der Seite gesprungen. "Früher" - also eigentlich die aktuelle Version - wurde mit DataBecker web2Date erstellt" waren die Aktiel in einzelnen Unterseiten - was ich jetzt aber wegen der geringen Menge an Text eigentlich nicht mehr wollte .....

Hier mal zur Variante, die es evtl. wird (CleanStyle responsive): http://2017.janutsch-hausverwaltung.de/4/leistungen.html

Für andere Lösungsvorschläge bin ich offen

Zitat von Websven

Hallo madas,

danke für die Antwort - habs jetzt mal mit dem 3. ul probiert - ging leider nicht.

Was meinst mit

bin jetzt nicht so firm, was CSS etc so angeht. Hatte den obige code unter Eigenschaft - CSS eingetragen - Deiner ist jetzt vermutlich wo anders einzutragen, oder ?

für den JQuery Script Code musst Du im Menü oben auf Erweitert=>Attribute gehen. Dort dann das Attribut mobile_script suchen und den von mir geposteten Code dort eintragen.

Den Code vom CSS, den Hr. Seitz gepostet hatte, aber wieder unter Eigenschaften=>CSS rausnehmen.

Danach alle Seiten neu erstellen lassen.

madas

Hallo madas,

danke für die Hilfe - hab ich gerade gemacht - leider bleibt das ergebnis unverändert - hier mal ein Screeshot vom schmalen Browserfenster - auch auf meinem urlaten Samsung Tab2 7 siehts nicht anders aus ....

Hier nochmal der Link zur Testseite: http://2017.janutsch-hausverwaltung.de/4/

Hallo Sven,

eventuell liegt es daran, dass der ursprüngliche Ersteller dieses Threads das Layout "Top-Responsive" nutzt, auf das sowohl das angepasste CSS von Steffen T. als auch das JQuery von madas jeweils abgestimmt waren. Du verwendest auf der Seite aber "Clean Style Responsive", wo es sein kann, dass die einzelnen Elemente (weil die Layouts von verschiedenen Entwicklern oder zu unterschiedlichen Zeiten geschrieben wurden) ganz andere Bezeichnungen haben.

Man kann sicherlich mit CSS, JQuery, PHP und HTML viel mehr aus den Standardvorlagen von Zeta herausholen, nur sollte man sich dann auch etwas mit dem Thema beschäftigen und dort einlesen. Wenn man da eigene Grenzen erkennt, baut man - wie Du mit dem "Untermenü" - eine Lösung mit Bordmitteln, die einen auch ungefähr ins Ziel bringt.

Hier im Forums sind es vor allem Jochen ; Mario & madas als "User für User" sowie Stefan S und Steffen T. als "Zeta-Mitarbeiter", die über individuelles CSS für EINE SEITE diese schöner aussehen lassen.

Mir persönlich würde es gefallen, wenn es gar keine Fragen mehr in der Art "Wie kann ich das mit CSS machen?" kommen, sondern statt dessen in der Rubrik Entwickler-Bereich der User bereits mit einem CSS-Grundgerüst kommt, dass aber vielleicht noch nicht richtig funktioniert. Zumindest hat sich dann der User schon mal selbst auf den Weg gemacht und die einzelnen Elemente, die durch CSS beeinflusst werden sollen, entsprechend seinem Layout herausgesucht.

Hallo Thomas,

danke für Deine Antwort. "Top-Responsive" ist ja leider erst bei der Business-Version dabei ... ich werde es aber auch noch mit anderen Layouts mal "versuchen" - um auch etwas vertrauter mit ZP zu werden. Evtl. mach ich aber auch noch ein Upgrade auf die Bussiness-Version, ist halt auch eine Kostenfrage

Ich will eine "Uralt-Seite" modernisieren und habe momentan 6 Varianten zur Auswahl gestellt, damit sich die Geschäftsführung für eine aussuchen kann. http://2017.janutsch-hausverwaltung.de/index.html - danach werd ich sehen, ob es für diese Variante eine Lösung gibt oder es bleibt bei der "Behelfslösung" mit dem Untermenü ....

Noch schönen Restsonntag

Zitat von Websven

Hallo Thomas,

danke für Deine Antwort. "Top-Responsive" ist ja leider erst bei der Business-Version dabei ... ich werde es aber auch noch mit anderen Layouts mal "versuchen" - um auch etwas vertrauter mit ZP zu werden. Evtl. mach ich aber auch noch ein Upgrade auf die Bussiness-Version, ist halt auch eine Kostenfrage

Ich will eine "Uralt-Seite" modernisieren und habe momentan 6 Varianten zur Auswahl gestellt, damit sich die Geschäftsführung für eine aussuchen kann. http://2017.janutsch-hausverwaltung.de/index.html - danach werd ich sehen, ob es für diese Variante eine Lösung gibt oder es bleibt bei der "Behelfslösung" mit dem Untermenü ....

Noch schönen Restsonntag

Bei clean-responsive verhindert leider ein Script ganz am Ende des Layouts, dass die Jquery-Lösung schon bei ersten Klick greift. Aber wenn Du eventuell damit leben könntest, dann wäre dies das Skript für das Attribut footer_script:

<script>
    $z(document).ready(function () {
        checkSize();
        $z(window).resize(checkSize);
    });

    function checkSize() {
        if ($z("a#mobilenavtoggle").css("display") == "block" ) {
            $z("a#mobilenavtoggle").click(function() {
                $z("#navbar.on ul.mainmenu li.haschilds.dropdown").addClass("hoverToClickMenuAdded clicked open");
                $z("#navbar.on ul.mainmenu li.haschilds.dropdown ul.dropdown-menu").css({"display": "block", "visibility": "visible"});
                $z("#navbar.on ul.mainmenu li.haschilds.dropdown ul.dropdown-menu li.haschilds.dropdown-submenu").addClass("hoverToClickMenuAdded clicked open");
                $z("#navbar.on ul.mainmenu li.haschilds.dropdown ul.dropdown-menu li.haschilds.dropdown-submenu ul.dropdown-menu").css({"display": "block", "visibility": "visible"});
            });
        }
    }
</script>

Damit es auch beim ersten Klick schon funzt, müsstest Du an der Default.html vom Layout eine kleine Änderung ganz am Ende machen. Dort gibt es folgenden Code-Block:

<!-- Footer Script -->
#attribute(zpshop-basketindicator)

#attribute(footer_script)

<script>
$z(document).ready(function () {
    // switches the Mobile Navigation-Menu on/off, when "Menu" link is clicked.
    $z("a#mobilenavtoggle").on("click", function(e){
        e.preventDefault();
        $z("#navbar, #navbar ul.mainmenu").toggleClass("on");
    });
});
</script>

den Du in diesen ändern musst (praktisch nur das Auslesen vom Attribut footer_Script hinter den Script-Block schieben):

<!-- Footer Script -->
#attribute(zpshop-basketindicator)

<script>
$z(document).ready(function () {
    // switches the Mobile Navigation-Menu on/off, when "Menu" link is clicked.
    $z("a#mobilenavtoggle").on("click", function(e){
        e.preventDefault();
        $z("#navbar, #navbar ul.mainmenu").toggleClass("on");
    });
});
</script>

#attribute(footer_script)

Grüße madas

PS: alle Änderungen auf eigene Gefahr.

Hallo MAdas,

danke schon mal - aber ich warte jetzt erst mal ab, für welches Layout sich entschieden wird. Heute hab ich schon viereckige Augen

Hab ab ZP schon besser kennen gelernt .....

Und das mit der "eigenen Gefahr" ist klar -