Underline Transition in Menu

CSS Menu Underline Animation

you need to add a relative position to .link so that the underline will be relative to the link's position. and then just set the top or bottom position of the underline to make it appear on the bottom of the link.

.link { position: relative }

Underline transition in menu

You may be able to do this through CSS, I really don't know.
But why don't you just use these 3 lines of JS (jQuery) and replace the Style-definition by this:

$('.ph-line-nav').on('click', 'a', function() {
    $('.ph-line-nav a').removeClass('active');
    $(this).addClass('active');
});

nav a:nth-child(1).active ~ .effect {
    left: 18%;
    /* the middle of the first <a> */
}
nav a:nth-child(2).active ~ .effect {
    left: 43.5%;
    /* the middle of the second <a> */
}

Seen in this jsFiddle: Click me!

CSS code for underline style for menu items

this is better

body,html {
  margin: 0;
  font: bold 14px/1.4 'Open Sans', arial, sans-serif;
  background: #fff;
}
ul { 
  margin: 150px auto 0; 
  padding: 0; 
  list-style: none; 
  display: table;
  width: 600px;
  text-align: center;
}
li { 
  display: table-cell; 
  position: relative; 
  padding: 15px 0;
}
a {
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  
  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #000;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
a:hover:after { 
  width: 100%; 
  left: 0; 
}
@media screen and (max-height: 300px) {
    ul {
        margin-top: 40px;
    }
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Support</a></li>
</ul>

How do I achieve this animated underline effect on my menu bar?

Each item has an additional .uiLinkBar div whose width is animated using a :hover selector on the link.

Here's a minimal example extracted from the site (with orange instead of yellow).

a.uiLink {  position: relative;  padding-bottom: 12px;  margin-right: 5px;  text-decoration: none;  color: #333;}
a.uiLink:hover {  color: #000;}
a.uiLink:hover i.uiLinkBar {  width: 100%;}
a.uiLink i.uiLinkBar {  position: absolute;  bottom: 0;  left: 0;  width: 0;  height: 9px;  background: #ff6600;  transition: all .3s ease-in-out;}

<a class="uiLink" href="#">  Example Link 1  <i class="uiLinkBar"></i></a><a class="uiLink" href="#">  Example Link 2  <i class="uiLinkBar"></i></a><a class="uiLink" href="#">  Example Link 3  <i class="uiLinkBar"></i></a>

Responsive menu with underline animation

Each element is 33.33% wide. Divide that in half, that's 16.66%, so that will be the center of the element. Using 16.66% as the default left value will put the left edge of .effect in the center of the first element. To center the .effect in the true center, move it back 50% of it's own with with translateX().

So the first element's left should be 16.66%.

The second element will be 49.99% (99.99 / 2)

The third element will be 83.33% (99.99 - 16.6 or 66.66 + 16.66)

nav {    margin-top:30px;    font-size: 15pt;    background: #FFF;    position: relative;    height:50px;    display: flex;}nav a {    text-align:center;    background: #FFF;    display: block;    padding: 2% 0;    flex-basis: 33.33%;    text-decoration: none;    transition: .4s;    color: red;} .effect {    position: absolute;    left: 16.66%;    transition: 0.4s ease-in-out;    transform: translateX(-50%);}nav a:nth-child(1):target ~ .effect {    left: 16.66%;    /* the middle of the first <a> */}nav a:nth-child(2):target~ .effect {    left: 49.99%;    /* the middle of the second <a> */}nav a:nth-child(3):target ~ .effect {    left: 83.33%;    /* the middle of the third <a> */}.ph-line-nav .effect {    width: 34px;    height: 2px;    bottom: 5px;    background: blue;}

<nav class="ph-line-nav">    <a href="#A1" id="A1">AA</a>    <a href="#A2" id="A2">AA</a>    <a href="#A3" id="A3">AA</a>    <div class="effect"></div></nav>

Underline element and increase distance between them on navbar with sliding underline

You need to update size and position of your underlining element with javascript

const navBar = document.getElementById("nav");
const navCursor = navBar.querySelector('.cursor');
const navItems = navBar.querySelectorAll('a');

function handleMouseEnterNavItem(event) {
  // executed when mouse enter a navigation item
  // update cursor to match position and size of target
  const { offsetLeft, clientWidth } = event.target;
  navCursor.style.left = offsetLeft + 'px';
  navCursor.style.width = clientWidth + 'px';
}

navItems.forEach((navItem) => {
  navItem.addEventListener('mouseenter', handleMouseEnterNavItem);
});

nav {
  position: relative;
}

nav a {
  font-family: sans-serif;
  text-decoration: none;
  color: gray;
  margin: 22px 10px 10px;
  display: inline-block;
  padding: 0; /* note: padding will be underlined */
}

nav .cursor {
  background: blue;
  height: 1px;
  position: absolute;
  bottom: 0;
  z-index: 10;
  transition: .16s all 0.025s;
}

<nav id="nav">
  <a href="#">News</a>
  <a href="#">Activities</a>
  <a href="#">Search</a>
  <a href="#">Time</a>
  <div class="cursor"></div>
</nav>

---

Related Topics