[Resolved] Some transition effects for the secondary menu

Home Forums Support [Resolved] Some transition effects for the secondary menu

Home Forums Support Some transition effects for the secondary menu

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #817789
    Ender

    Hello, I am the proud user of this wonderful theme since yesterday and I am very happy.

    Now my questions for the secondary menu.

    I would like to add some simple transition effects in the second menu.

    1. When the mobile menu button is pressed, the window should first appear slowly below. At the same time, the individual menu items should slowly scroll / slide down.

    2. Is there a possibility that the content is not pushed down below. A kind of overlay maybe?

    3. Is there a possibility that if the user continues to scroll the opened menu is automatically closed again.

    Many thanks.

    Update1: For the effects 1. and 2. similar like here (must be not the same): http://jsfiddle.net/RxguB/98/

    #818223
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot for #1 and #2:

    @media (max-width: 768px) {
        .secondary-navigation .main-nav>ul {
            position: absolute;
            left: 0;
            right: 0;
            top: 45px;
            z-index: 100;
            background: #fff;
            transition: opacity 500ms ease-in-out;
            opacity: 0;
            display: block;
            pointer-events: none;
            transition-delay: 0;
        }
    
        .secondary-navigation.toggled .main-nav > ul {
            max-height: 1000px;
            transition: opacity 500ms ease-in-out;
            opacity: 1;
            pointer-events: auto;
            transition-delay: 0;
        }
    
        .secondary-navigation {
            position: relative;
        }
    
        .secondary-navigation .main-nav > ul > li {
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
    
        .secondary-navigation li {
            float: none;
            width: 100%;
            text-align: left;
        }
    
        .secondary-navigation.toggled .main-nav > ul > li:nth-child(1) {
            opacity: 1;
            transition-delay: 1s;
        }
    
        .secondary-navigation.toggled .main-nav > ul > li:nth-child(2) {
            opacity: 1;
            transition-delay: 1.2s;
        }
    
        .secondary-navigation.toggled .main-nav > ul > li:nth-child(3) {
            opacity: 1;
            transition-delay: 1.4s;
        }
    
        .secondary-navigation.toggled .main-nav > ul > li:nth-child(4) {
            opacity: 1;
            transition-delay: 1.6s;
        }
    }

    Closing it on scroll would likely require some custom javascript, unfortunately.

    #818571
    Ender

    Works wonderfully. Great! Thank u very much.

    But I have an additional request:

    4.
    When the individual sub-points are opened, how can I implement an effect like “FadeInDown”? Similar to here:

    https://codepen.io/kmyers/pen/PwRjyV

    or

    https://www.tutorialspoint.com/css/css_animation_fade_in_down.htm

    5.
    But then there is the last request:

    If the menu button is pressed again and then the window closes again. How could the individual opened sub-points disappear with an opposite effect (ie: FadeInUp)?

    I know that there is a WordPress plugin for https://daneden.github.io/animate.css/.

    I could imagine that with this plugin these ideas can be realized. However, i want to install as few plugins as possible and be as independent as possible.

    I thank you for your efforts.

    #818588
    Ender

    and unfortunately I had to realize: if the code is activated, the second menu disappeared on the desktop version.

    #818916
    Tom
    Lead Developer
    Lead Developer

    Unfortunately, the CSS begins to get super complex (more so than it already is) when you get that deep into transitions. When it comes to offering custom CSS help here in the forum, we try to keep a reasonable limit on the amount of time we spend coding. In this case, it would take me far to long I’m afraid.

    As for the desktop issue, I just adjusted the code above to fix that ๐Ÿ™‚

    #819106
    Ender

    You are completely right. It does not help to get bogged down in details.

    Have now found a simple solution for me.

    I modify this

        .secondary-navigation.toggled .main-nav > ul {
            max-height: 1000px;
            animation: fadeInDown 500ms ease-in-out both;
            transition: opacity 500ms ease-in-out;
            opacity: 1;
            pointer-events: auto;
            transition-delay: 0;
        }
        }

    and add this

    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translate3d(0, -20%, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    That’s okay for me now. (Customizer make problems on the mobile view on Safari iMac – Menu cannot opened, but its ok)

    A reversed version with FadeOutUp I wanted to try. But then I have the problem that I have an effect in the menu with every page call. (I could not found the opposite of .secondary-navigation.toggled) In order not to loose more time, I have omitted this now.

    Now comes as next the animated hamburger animation.

    #819283
    Tom
    Lead Developer
    Lead Developer

    Glad you found a solution! Thanks for sharing it ๐Ÿ™‚

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.