Skip to main content

Navigation Bar With Hover Line Effect | HTML And CSS

by Rustcode
NavigationBar-With-Hover-Line-Effect-HTML-And-CSS-Rustcode
Navbar is a very important element for every website because it navigating the user and gives an idea of website content. The navigation bar must be very clean and well designed because the client is directly interacting with the navigation bar to use our websites. In designing of website navbar, we can add a lot of animations effects on it. For the animations effect, we can use css, javascript and javascript libraries. 

In this special effect, when we hover over the link in the navigation bar, then the line will appear above the link whose width starts from zero. That animation will look something like this.

Navigation-bar-with-line-hover-effect-HTML-And-CSS-Rustcode


RELATED POST:
1. Responsive Side Navigation Bar Design | HTML And CSS
2. CSS Tooltip Text Animation | HTML And CSS
3. Animated Button With Pressed Effect | HTML And CSS
4. Smooth Parallax Scrolling Effect | HTML And CSS

1. CREATE HTML BLOCK

Before starting writing code, we need to create a basic structure of an HTML document. Writing basic Structure is very important because the browser can easily understand document type and may start some process. The basic HTML structure looks as below.
<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
    <style>
    </style>
  </head>

  <body>

    Content of the document.

    <script type="text/javascript">
    </script>
  </body>
</html>

2. ADD HTML

After Writing the basic structure of the HTML document, you can write your required tags and content also, after that run this code on your browser and see the output. As we know that HTML only shows content in a basic format, it does not beautify that content. To beautify our content we need for CSS, which is inserted in an HTML document and it creates an attractive user interface.
<div class="container">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</div>

3. ADD CSS

Now, it's time to beautify our HTML content, so we need to add to CSS in our HTML file. CSS can be added to the HTML document in three ways, here we are using the internal CSS method. Write CSS which is shown below and see the output on your browser.
* {box-sizing: border-box;}
body {
  margin: 0;
  font-family: sans-serif;
  background:#000;
  text-align: center;
  background-image: url(bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.container {
  overflow: hidden;
  background-color: black;
  text-align:center;
}
.container a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  text-transform: uppercase;
}
.container a::before {
  content:'';
  width:0%;
  height:3px;
  display:block;
  background-color: #fff;
  margin-bottom:10px;
}
.container a:hover::before {
  width:100%;
  transition:all .5s;
}

4. YouTube VIDEO

Here I am 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.


5. SOURCE CODE

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



If this article is useful and informative for you, share it. And if you have any doubt, please leave a comment.

RELATED POST:


Comments

Post a Comment