Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Add transition to the drop down menu

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #244878
    hoosoohoo
    Participant

    Hi everyone
    I want to add transition to the drop down menu at my website
    i added transition to the main menu items but when trying to add transition to the drop down menu, it does not work
    i want to add transition: all 0.3s ease-in-out 0s;
    any help
    i am not css expert, i will copy and paste the code
    thanks

    website
    http://test3.necklacesstyle.com/wp/

    #244887
    giudev
    Participant

    your dropdown now works in this way

    status normal: .submenu { left: -999em } (this means hidden outsite the viewport)
    status hover: .submenu { left:auto } (this means 0px or /default position/ from his relative container)

    you should change this logic, in order to have:

    status normal/closed:

    .submenu {
    left: 0; /*always in the right place*/
    max-height: 0px;
    overflow: hidden; /* to have hidden content */
    border-top: none; /* you don't want to show the border when closed */
    transition: max-height 1s; /*or change with your value */
    }

    status hover/open

    .submenu {
    max-height: 1000px; /* */
    border-top: 2px solid #000;
    }

    This will makes your dropdown sliding from top.

    Keep in mind the transition speed is related to the time needed to go from 0px to 1000px, also if the computed height is only 200px. So choose the right values for both transition speed and max-height

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.