Navbar underline hover animation

user_11617384 0
Viewed 4509

i'm trying to make a hover animation that has an underline line appearing when the mouse is over it.

what can i add to achieve that? i tried the pre made ones but it didn't work. it showed an line appearing but not under the navbar text but under the website itself (on the bottom of the screen).

html,
body {
  margin: 0;
  padding: 0;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  height: 100px;
}

li {
  padding: 40px 16px;
  display: table-cell;
  text-align: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 2.5px;
}

li a:hover {
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.hover-nav {
  background-color: tomato;
}

#logo {
  margin-left: 30px;
  margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob-Mob</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
      <li style="float: right;" class="hover-nav"><a href="">კონტაქტი</a></li>
      <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
      <li style="float: right;"><a href="">ქეისები</a></li>
    </ul>
  </nav>

</body>

</html>

css html
4 Answers

Try this code, I marked my edits on your css code.

html,
body {
  margin: 0;
  padding: 0;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  height: 100px;
}

li {
  padding: 40px 16px;
  display: table-cell;
  text-align: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 2.5px;
}

li a:hover {
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}


/*Edit starts here*/
li {
  position:relative;
}

li::after {
    content: '';
    display: block;
    width: 0;
    position:absolute;
    left:50%;
    height: 2px;
    background: #0077ff;
    transition: cubic-bezier(.77,0,.18,1) 1s;
}

li:hover::after {
    width: 80%;
    left: 10%;
}

li {
  transition: cubic-bezier(.77,0,.18,1) 1s;
}

li:hover {
  background-color: tomato;
}

/*Edit ends here*/

#logo {
  margin-left: 30px;
  margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob-Mob</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
      <li style="float: right;"><a href="">კონტაქტი</a></li>
      <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
      <li style="float: right;"><a href="">ქეისები</a></li>
    </ul>
  </nav>

</body>

</html>

user_137269490

Add text-decoration:underline to your li:hover code like this...

li a:hover {
  text-decoration:underline;
}
Admin1

You should apply the transition to the element, not its hover state. With transition you are telling telling the element how to behave if anything changes. In this case all styles (that are susceptible to a transition) for a period of 0.3 seconds with an ease-in-out speed curve.

Then use the :hover selector to indicate what changes need to be made. So in this case change the background color and add an underline to the text.

Also avoid using inline styles when possible.

html, body {
    margin: 0;
    padding: 0;
    background-color: grey;
 }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 100px;
  }
  
  li {
    text-align: center;
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    padding: 40px 16px;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 2.5px;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }

  li a:hover {
      background-color: tomato;
      text-decoration: underline;
  }
<nav>
  <ul>
    <li><a href="">კონტაქტი</a></li>
    <li><a href="">ჩვენს შესახებ</a></li>
    <li><a href="">ქეისები</a></li>
  </ul>
</nav>

If you intended to apply an underline to the bottom of the box instead of the text you can use border-bottom and makes sure to use box-sizing: border box so your element will remain the same size when the border gets added.

html, body {
    margin: 0;
    padding: 0;
    background-color: grey;
 }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 100px;
  }
  
  li {
    text-align: center;
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    padding: 40px 16px;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 2.5px;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    box-sizing: border-box;
    height: 100px;
  }

  li a:hover {
      background-color: tomato;
      border-bottom: 1px solid white;
  }
<nav>
  <ul>
    <li><a href="">კონტაქტი</a></li>
    <li><a href="">ჩვენს შესახებ</a></li>
    <li><a href="">ქეისები</a></li>
  </ul>
</nav>

user_138066520

HTML Code Invalid you added <a> section in <ul> without <li> tag

<ul>
  <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
  <li style="float: right;" class="hover-nav"><a href="">კონტაქტი</a></li>
  <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
  <li style="float: right;"><a href="">ქეისები</a></li>
</ul>

changes to

<ul>
  <li><a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a></li>
  <li style="float: right;" class="hover-nav"><a href="">კონტაქტი</a></li>
  <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
  <li style="float: right;"><a href="">ქეისები</a></li>
</ul>

Edit in CSS:

ul {      
  width:100%;
  display: flex;
  align-items: center;
}
li {
  width:100%; // remove padding and add to `li a`.
}
li a{
  border-bottom:4px solid transparent;
  height: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
li a:hover { // instead of .hover-nav
  background-color: tomato;
  border-bottom:4px solid #fff;
}
// remove #logo margin

Working Demo

html,
body {
  margin: 0;
  padding: 0;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width:100%;
  background-color: #333;
  height: 100px;
  display: flex;
  align-items: center;
}

li {
  width:100%;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 1.5px;
  border-bottom:4px solid transparent;
  height: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

li a:hover {
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

li a:hover {
  background-color: tomato;
  border-bottom:4px solid #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob-Mob</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href=""><img src="https://dummyimage.com/100x100/52d41e/fff&text=Logo" alt="" style="width:100%;" id="logo"></a></li>
      <li class="hover-nav"><a href="">კონტაქტი</a></li>
      <li><a href="">ჩვენს შესახებ</a></li>
      <li><a href="">ქეისები</a></li>
    </ul>
  </nav>

</body>

</html>

user_133686580
Related