- This topic has 39 replies, 13 voices, and was last updated 5 years ago by Leo.
-
AuthorPosts
-
June 10, 2016 at 3:53 am #200743Michael
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
June 10, 2016 at 8:38 am #200801Luiz BillsI 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%; }
June 10, 2016 at 11:47 pm #200990TomLead DeveloperLead DeveloperNice CSS, Luiz! Works great for me π
June 12, 2016 at 12:13 am #201229MichaelHi Luiz,
Thank you for the css it works well and looks great. I really appreciate it:)
Cheers
MichaelFebruary 22, 2017 at 7:01 pm #282758DarrellHello,
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
February 23, 2017 at 12:26 am #282828TomLead DeveloperLead DeveloperTry removing this line:
.main-navigation .menu > .menu-item.current-menu-item > a::after,
February 23, 2017 at 3:43 pm #283215DarrellHey Tom,
Thank you so much for getting back to me. That worked like a charm and solved my problem!
Darrell
February 23, 2017 at 8:12 pm #283268TomLead DeveloperLead DeveloperGlad I could help π
April 24, 2017 at 2:44 am #309570FarokhThank you Luiz
That was awesome!!!
May 7, 2017 at 8:42 pm #315193Kylesolved
silly me π
June 2, 2017 at 3:39 pm #327866FarokhHI 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
June 2, 2017 at 5:36 pm #327882LeoStaffCustomer SupportTry 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%; }
June 3, 2017 at 1:46 am #327976FarokhNo, it’s not right. It moves to the left. has to do something with the -50% I guess.
June 3, 2017 at 3:48 am #328004FarokhGot 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%; }
June 3, 2017 at 9:23 am #328098LeoStaffCustomer SupportThanks for sharing!
-
AuthorPosts
- The topic ‘Animating link underlines for main menu’ is closed to new replies.