Verwendung: mobile-menu von rechts einblenden

karsten's Avatar

karsten

01 Aug, 2015 05:35 AM

Produkt: Oneo Contao
Contao-Version: 3.5

guten morgen,

ich möchte, dass das mobile-menu von rechts eingeblendet wird, komme mit den gefundenen klassen aber nicht weiter:

@media screen and (max-width: 768px) {

    .main-navigation { display: none; }

    .main-navigation-mobile-open {
        display: block;
               left:auto;
              right:6.66667%;
    }

    .main-navigation-mobile.is-enabled {    display: block;}

       .modernizr-csstransforms3d .main-navigation-mobile.is-enabled {    }

}

was muss ich unternehmen?

vielen dank!

  1. Support Staff 1 Posted by RockSolid Theme... on 03 Aug, 2015 09:00 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Nachricht.

    Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

    Versuchen Sie es bitte mit folgendem CSS-Code in der Datei files/oneo/css/custom.css:

    .modernizr-csstransforms3d .main-navigation-mobile.is-enabled {
      left: auto;
      right: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    .modernizr-csstransforms3d .main-navigation-mobile.is-active {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .main-navigation-mobile-close {
        right: auto;
        left: -17.6471%;
    }
    
  2. 2 Posted by karsten on 03 Aug, 2015 10:09 AM

    karsten's Avatar

    herzlichen dank!

    das läuft ganz wundervoll.

    hier noch einmal für andere, die es vielleicht suchen der code incl. media query (einblenden ab 768px):

    @media screen and (max-width: 768px) {
    
        .main-navigation { display: none; }
    
    
        .main-navigation-mobile-open {
            display: block;
              left:auto;
              right:6.66667%;
        }
    
        .main-navigation-mobile.is-enabled {
            display: block;
        }
    
    
        .modernizr-csstransforms3d .main-navigation-mobile.is-enabled {
          left: auto;
          right: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        }
        .modernizr-csstransforms3d .main-navigation-mobile.is-active {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        }
        .main-navigation-mobile-close {
        right: auto;
        left: -17.6471%;
        }
    
    }
    
  3. 3 Posted by Robin Hood on 14 Jul, 2016 12:50 PM

    Robin Hood's Avatar

    Hallo zusammen,

    habe das im oneo Theme wie o.g. umgesetzt.
    Das Mobile Menu bleibt aber erreichbar, wenn man nach rechts scrollt ...
    Wie kann das ausgeschlossen werden ..?

    Vielen Dank

  4. Support Staff 4 Posted by RockSolid Theme... on 15 Jul, 2016 06:27 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Das sollten Sie mit folgendem CSS-Code verhindern können:

    @media screen and (max-width: 599px) {
        html {
            overflow-x: hidden;
        }
    }
    
  5. 5 Posted by Robin Hood on 15 Jul, 2016 09:29 AM

    Robin Hood's Avatar

    Top, vielen Dank für die schnelle Antwort.

    damit es auch in Safari OSX/iOS funktioniert habe ich noch folgenden Code ergänzt:

    @media screen and (max-width: 599px) {
        html {
            overflow-x: hidden;
        }
        body {
            position:relative;
            overflow-x:hidden;
        }
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac