Contao-Camp 2024
Ergebnis 1 bis 14 von 14

Thema: mobile Navigation klappt nicht zu

  1. #1
    Contao-Fan
    Registriert seit
    07.02.2010.
    Ort
    Kiel
    Beiträge
    263

    Standard mobile Navigation klappt nicht zu

    Hallo,

    ich baue mir gerade einen OnePager mit Contao 4 und Bootstrap 2 für Contao auf. Dazu habe ich als Navigation in die Bootstrap-Navigationsleiste die Erweiterung "erdmannfreunde/onepage-navigation" eingebunden. Das funktioniert soweit auch alles gut. Nur bei der mobilen Navigation habe ich folgendes Problem: Nach Klick auf einen Link (Anker) bleibt die Navigation offen und klappt nicht automatisch zu. Hat jemand einen Tipp?

    Gruß
    Karsten

  2. #2
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    Ich denke, Dein Problem ist hier, daß die Bootstrap Navigation das Onepager-Konzept (kein Seitenwechsel) nicht berücksichtigt. So, wie ich es sehe, wird nicht zugeklappt, da nach einem Klick (bei einem nicht-Onepager) sowieso ein Seitenwechsel stattfindet.

    Siehe auch https://github.com/twbs/bootstrap/pull/10540
    Geändert von fiedsch (03.12.2018 um 12:33 Uhr)
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  3. #3
    Contao-Fan
    Registriert seit
    07.02.2010.
    Ort
    Kiel
    Beiträge
    263

    Standard

    Zitat Zitat von fiedsch Beitrag anzeigen
    Ich denke, Dein Problem ist hier, daß die Bootstrap Navigation das Onepager-Konzept (kein Seitenwechsel) nicht berücksichtigt. So, wie ich es sehe, wird nicht zugeklappt, da nach einem Klick (bei einem nicht-Onepager) sowieso ein Seitenwechsel stattfindet.

    Siehe auch https://github.com/twbs/bootstrap/pull/10540
    habe eine Lösung im Netz gefunden, die funktioniert:
    You can simply add to each li the following attributes:

    <li data-toggle="collapse" data-target=".navbar-collapse">
    <a class="page-scroll" href="#home">Home</a>
    </li>

    https://stackoverflow.com/questions/...e-when-clicked

    Danke und Gruß
    Karsten
    Geändert von karo68 (03.12.2018 um 13:14 Uhr)

  4. #4
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Genau daran bin ich auch gerade, ich hab allerdings die onepage Erweiterung von wr genommen.

    Die hier: https://github.com/webrealisierung-ch/onepage-bundle

    Da musste man nur das Template ein bisschen umstricken, da klappt die soweit gut. Was ich allerdings gar nicht probiert habe, ob da submenüs gehen...

  5. #5
    Contao-Fan
    Registriert seit
    07.02.2010.
    Ort
    Kiel
    Beiträge
    263

    Standard

    Zitat Zitat von PaddySD Beitrag anzeigen
    Genau daran bin ich auch gerade, ich hab allerdings die onepage Erweiterung von wr genommen.

    Die hier: https://github.com/webrealisierung-ch/onepage-bundle

    Da musste man nur das Template ein bisschen umstricken, da klappt die soweit gut. Was ich allerdings gar nicht probiert habe, ob da submenüs gehen...
    Klappt das mobile Menü bei der Erweiterung automatisch zu oder hast du dafür das Template umgestrickt? Bootstrap-Klassen habe ich natürlich auch im Template vergeben.

  6. #6
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Oh sorry, Deinen Beitrag von 12:59h hatte ich gar nicht gesehen...zu langsam beim posten... Ja, genau so wie Du schreibst, "automatisch" macht das leider keine der Erweiterungen.

    Ich war ehrlich gesagt schon am überlegen, ob ich webstar nicht mal das Ohr blutig "nörgele" ( ) und versuche da eine Sub-Erweiterung passend zu contao-bootstrap zu machen (ohne seine Hilfe brauche ich garantiert dreimal so lang...).

  7. #7
    Contao-Fan
    Registriert seit
    07.02.2010.
    Ort
    Kiel
    Beiträge
    263

    Standard

    Zitat Zitat von PaddySD Beitrag anzeigen
    Ja, genau so wie Du schreibst, "automatisch" macht das leider keine der Erweiterungen.
    und wie hast du das hinbekommen? Hast du dazu die Lösung verwendet, die ich gepostet habe oder eine andere Lösung gefunden?

  8. #8
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Genauso wie Du beschreibst, ich hatte ebenfalls den ersten Suchtreffer von Google genommen, und klappt anstandslos. Was täten wir nur ohne StackOverflow. Ich bin mittlerweilen glücklicherweise auch in einem Alter, in dem ich nicht mehr so schnell arbeite, da kann ich fest davon ausgehen, dass irgendwer dasselbe Problem schonmal bei SO gepostet hat.

    Ist jetzt weder schön, noch wirklich geprüft, aber für den Moment reicht es, da komme ich im weiteren Verlauf wieder drauf zurück:
    PHP-Code:
    <?php if($this->arrArticle):?>
        <ul class="level_1 navbar-nav">
            <?php foreach($this->arrArticle as $artNav): ?>
                <li data-toggle="collapse" data-target=".navbar-collapse" class="nav-item sibling"><a class="nav-link page-scroll" href="<?= $this->uri?>#<?= $artNav['alias']?>"><?php echo $artNav['title'?></a></li>
            <?php endforeach;?>
        </ul>
        <?php if($this->loadDefaultJavascript): ?>
        <script>
            window.onload = function() {
                onepage = new Onepage();
                onepage.init();
            }
        </script>
        <?php endif;?>
    <?php 
    endif;?>
    In meinem Fall will ich das JS noch ans Seitenende verfrachten und ausserdem habe ich mich noch nicht damit beschäftigt, wie ich den Abstand bei fixem Menu hinbekomme. Im Moment hab ich den hardgecoded einfach in die Datei gepackt, dass ist aber keine Lösung auf Dauer.

  9. #9
    Contao-Fan
    Registriert seit
    07.02.2010.
    Ort
    Kiel
    Beiträge
    263

    Standard

    Zitat Zitat von PaddySD Beitrag anzeigen
    und ausserdem habe ich mich noch nicht damit beschäftigt, wie ich den Abstand bei fixem Menu hinbekomme. Im Moment hab ich den hardgecoded einfach in die Datei gepackt, dass ist aber keine Lösung auf Dauer.
    Abstand wohin? Welche Datei?

  10. #10
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Ich arbeite bei dieser Seite mit einer fest positionierten (display: fixed) Navigation, am oberen Rand. Die musst Du ja mittels "offset" und entsprechendem Margin oder Padding ein Stück "runter rutschen", damit der Inhalt nicht dahinter verschwindet.

    Mein Problem ist jetzt, dass sich das bei wr eigentlich einstellen lassen müsste (beim initieren des JS), da ich das aber nicht lange suchen wollte, hab ich einfach den "offset" hard im Script eingetragen. Das funktioniert auch gut, solange man nicht von einer Unterseite kommt, dann berücksichtigt er das nämlich nicht mehr. Aber das lässt sich sicherlich finden und beheben. Ich hatte nur noch keine Zeit (und Muße), mich an das Script zu setzen. Das hebe ich mir für später auf...

  11. #11
    Contao-Fan
    Registriert seit
    07.02.2010.
    Ort
    Kiel
    Beiträge
    263

    Standard

    Zitat Zitat von PaddySD Beitrag anzeigen
    Ich arbeite bei dieser Seite mit einer fest positionierten (display: fixed) Navigation, am oberen Rand. Die musst Du ja mittels "offset" und entsprechendem Margin oder Padding ein Stück "runter rutschen", damit der Inhalt nicht dahinter verschwindet.

    Mein Problem ist jetzt, dass sich das bei wr eigentlich einstellen lassen müsste (beim initieren des JS), da ich das aber nicht lange suchen wollte, hab ich einfach den "offset" hard im Script eingetragen. Das funktioniert auch gut, solange man nicht von einer Unterseite kommt, dann berücksichtigt er das nämlich nicht mehr. Aber das lässt sich sicherlich finden und beheben. Ich hatte nur noch keine Zeit (und Muße), mich an das Script zu setzen. Das hebe ich mir für später auf...
    Folgende Möglichkeiten fallen mir dazu ein:

    • Warum machst du das nicht einfach mit CSS?
      Code:
      body { 
      padding-top: <Höhe der Navbar>; 
      }
    • (Ansonsten könntest du auch eine Sticky-Menü (.sticky-top) verwenden. Allerdings wird dieser nicht im IE11 unterstützt. Also keine Lösung!)
    • Falls die Höhe deiner Navbar dynamisch ist, könntest du jQuery verwenden.
    • Du könntest eine leere Navbar davor setzen

  12. #12
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Per CSS ja. Das braucht es auf jeden Fall. Damit weiss aber Dein Scroll-Script noch nicht, wie weit rauf es fahren soll. Sonst fährt sich Dein Anker ja auf 0px von oben, anstatt 0px + Nav Höhe...

  13. #13
    Contao-Fan
    Registriert seit
    07.02.2010.
    Ort
    Kiel
    Beiträge
    263

    Standard

    Zitat Zitat von PaddySD Beitrag anzeigen
    Per CSS ja. Das braucht es auf jeden Fall. Damit weiss aber Dein Scroll-Script noch nicht, wie weit rauf es fahren soll. Sonst fährt sich Dein Anker ja auf 0px von oben, anstatt 0px + Nav Höhe...
    Stimmt. Das Padding wird bei Ankern ja grundsätzlich nicht berücksichtigt. Ich habe folgenden Code probiert:

    .anchor::before {
    content: "";
    display: inline-block;
    height: 56px;
    margin-top: -56px;
    bringt aber in diesem Fall nichts. Mittels CSS bin ich mit meinen Latein hier am Ende. Falls du eine Lösung gefunden hast, gerne posten.

  14. #14
    Contao-Fan Avatar von Doro
    Registriert seit
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    359

    Standard

    Zitat Zitat von karo68 Beitrag anzeigen
    Hallo,

    ich baue mir gerade einen OnePager mit Contao 4 und Bootstrap 2 für Contao auf. Dazu habe ich als Navigation in die Bootstrap-Navigationsleiste die Erweiterung "erdmannfreunde/onepage-navigation" eingebunden. Das funktioniert soweit auch alles gut. Nur bei der mobilen Navigation habe ich folgendes Problem: Nach Klick auf einen Link (Anker) bleibt die Navigation offen und klappt nicht automatisch zu. Hat jemand einen Tipp?

    Gruß
    Karsten
    Moin Karsten, und PaddySD
    darf ich mich verspätet mit einklinken ,
    wie habt ihr die "contao-onepage-navigation" von erdmannundfreunde im Einsatz,
    ist es möglich diese Navi für Desktop und mobile Version mit nur einer Navigation
    mit unterschiedlichem CSS zu nutzen, also in Etwa so wie es in dem Theme Sirius von erdmann und freunde eingesetzt ist.
    ich verstehe noch nicht wie man hier mit nur einer Navi auskommt? Tatsächlich nur über die MediaQueries? doof gefragt (shame) wie blend ich dann die Desktop-Variante aus, sobald die mobile Variante zum Einsatz kommt und umgekehrt. Kann meinem Hirn jemand nachhelfen???

    Gruß Doro

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •