[Resolved] Animating link underlines for main menu

Home Forums Support [Resolved] Animating link underlines for main menu

Home Forums Support Animating link underlines for main menu

  • This topic has 39 replies, 13 voices, and was last updated 5 years ago by Leo.
Viewing 15 posts - 1 through 15 (of 40 total)
  • Author
    Posts
  • #200743
    Michael

    Hi, I am want to have a animated underline under each menu item. Like this example: http://tobiasahlin.com/blog/css-trick-animating-link-underlines/

    The code below is not targeting the text…any suggestions would be great? Also this would be a great feature for the menu addon.

    .main-navigation .main-nav ul li > a:hover, .main-navigation .main-nav ul li > a:focus, .main-navigation .main-nav ul li.sfHover > a {
      color: red;
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #000;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

    cheer Michael

    #200801
    Luiz Bills

    I used this effect in a site with this css:

    /* nav links effect */
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    
        display: block;
        width: 0;
        height: 2px;
    
        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }
    #200990
    Tom
    Lead Developer
    Lead Developer

    Nice CSS, Luiz! Works great for me πŸ™‚

    #201229
    Michael

    Hi Luiz,

    Thank you for the css it works well and looks great. I really appreciate it:)

    Cheers
    Michael

    #282758
    Darrell

    Hello,

    I”ve added the above CSS from Luiz to have each menu item underlined when hovered over. However, when my page loads, the page that I’m currently on is already underlined without me hovering. I’m a newbie and I may be making an obvious mistake that I don’t see. My site is not up so I can’t provide a link. Could you please point me in the right direction.

    Thank you,

    Darrell

    #282828
    Tom
    Lead Developer
    Lead Developer

    Try removing this line:

    .main-navigation .menu > .menu-item.current-menu-item > a::after,

    #283215
    Darrell

    Hey Tom,

    Thank you so much for getting back to me. That worked like a charm and solved my problem!

    Darrell

    #283268
    Tom
    Lead Developer
    Lead Developer

    Glad I could help πŸ™‚

    #309570
    Farokh

    Thank you Luiz

    That was awesome!!!

    #315193
    Kyle

    solved

    silly me πŸ™

    #327866
    Farokh

    HI TOM,

    In the CSS Luiz has provided, the underline covers 50% of the menu item.
    How can I change this to full item length (100%)?

    /* nav links effect */
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    
        display: block;
        width: 0;
        height: 2px;
    
        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }

    Thanks

    #327882
    Leo
    Staff
    Customer Support

    Try this:

    /* nav links effect */
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    
        display: block;
        width: 0;
        height: 2px;
    
        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 100%;
    }
    #327976
    Farokh

    No, it’s not right. It moves to the left. has to do something with the -50% I guess.

    #328004
    Farokh

    Got it. This worked very well for me:

    /* nav links effect */
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 50;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    
        display: block;
        width: 0;
        height: 2px;
    
        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 90%;
    }
    #328098
    Leo
    Staff
    Customer Support

    Thanks for sharing!

Viewing 15 posts - 1 through 15 (of 40 total)
  • The topic ‘Animating link underlines for main menu’ is closed to new replies.