Skip to main content

Archive

Show more

Navigation Bar With Hover Animation | HTML And CSS

by Rustcode
Navigation-Bar-With-Hover-Animation-HTML-And-CSS

Navigation Bar With Hover Animation Using HTML And CSS

There are many animations that can be created using CSS. We can also apply those animations to various elements of the web application. Hover animations apply to most of those elements.

In this article, we are building a navigation (menu) bar with CSS hover animations. A unique animation will be generated when you hover over the navigation (menu) bar.

Let's try to understand the concept that we used. All menu links were brought to the center. Then an underline is created below the links, whose position will change when the mouse is moved over the menu link. The underline will shift slightly upwards and the background color and text color of the menu link will change when the mouse hovers over the link.

You can check the playlist of the navigation bar, where we add a navigation(menu) bar with disparate concepts and technology.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Navigation Bar With Hover Animation | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
<head>
  <title>Navigation Bar With Hover Animation | Rustcode</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="wrapper">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">DESIGN</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>

</body>
</html>



03. CSS

@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap');

*{
  box-sizing: border-box;
}

body{
  margin: 0px;
  padding: 0px;
  font-family: "Play", sans-serif;
  background: #F8F8F8;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.wrapper ul{
  display: flex;
  padding: 0px;
  margin: 0px;
  list-style: none;
}

ul li{
  position: relative;
  margin: 0 1.4em;
  padding: 1.2em 1.6em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  transition-delay: 0.2s;
}

ul li:hover{
  background: #FF595E;
}

ul li:before{
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background-color: black;
  transition: all 0.2s;
}

ul li:hover::before{
  bottom: 56px;
  left: 0px;
}

ul li a{
  text-decoration: none;
}

ul li:hover a{
  color: white;
}



04. Youtube Video

Here we are attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment