Skip to main content

Navigation Bar With Hover Line Effect Using HTML And CSS

Navigation Bar With Hover Line Effect Using HTML And CSS

Navbar is a crucial element for every website as it helps users navigate and understand the website's content. A well-designed navigation bar enhances user experience by making interactions smooth and visually appealing. Various animation effects can be added using CSS, JavaScript, and libraries to improve the navbar's aesthetics.

In this effect, when we hover over a navigation link, a line appears above it, starting from zero width and expanding. This effect adds a sleek, modern touch to the navigation bar.

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

Read Also:

01. HTML:

Before writing code, we need to create a basic structure for an HTML document. Writing a basic structure is very important because it helps the browser easily understand the document type and initiate necessary processes. The basic HTML structure is shown below.

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation Bar</title>
    <style>
      /* CSS will be added here */
    </style>
  </head>
  <body>
    
    <script type="text/javascript">
      // JavaScript if needed
    </script>
  </body>
</html>

After writing the basic structure of the HTML document, you can add the required tags and content. Once done, run the code in your browser to see the output. As we know, HTML only displays content in a basic format and does not style it. To enhance the appearance of our content, we need CSS, which is added to an HTML document to create an attractive user interface.

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation Bar</title>
    <style>
      /* CSS will be added here */
    </style>
  </head>
  <body>
    <div class="container">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
      <a href="#">Login</a>
    </div>
    <script type="text/javascript"></script>
  </body>
</html>

Code Explanation:

  • The <div class="container"> wraps the navigation links.
  • Each <a> tag represents a menu item.
  • A placeholder <style> tag is included for adding CSS styling.
  • A <script> tag is added for JavaScript functionality if needed.

Output

html-code-output

03. Add CSS Styling

Now, it's time to enhance the appearance of our HTML content by adding CSS to our HTML file. CSS can be integrated into an HTML document in three ways. Here, we are using the internal CSS method. Apply the CSS shown below and view the output in 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;
  position: relative;
}

.container a::before {
  content: "";
  width: 0%;
  height: 3px;
  display: block;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.5s;
}

.container a:hover::before {
  width: 100%;
}

Code Explanation:

  • The * selector applies box-sizing: border-box; to all elements.
  • The body has a black background, centered text, and a full-screen background image.
  • The .container styles the navbar with a black background and centered links.
  • Navigation links:
    • Styled with white text, uppercase letters, and padding.
    • position: relative; enables the hover effect.
  • The ::before pseudo-element creates a hover underline:
    • Initially hidden (width: 0%;), expands on hover.
    • Uses smooth transition (width 0.5s;).

Output

NavigationBar-With-Hover-Line-Effect-HTML-And-CSS-Rustcode

Output:

Here is the final output of our implementation.

Preview:

Navigation-Bar-With-Hover-Line-Effect-Using-Html-And-Css

Read Also:

04. Video Tutorial

To gain a better understanding of the implementation, watch our detailed YouTube video. We regularly share web development tutorials, so be sure to visit our YouTube channel and subscribe for more valuable content!

If you would like to download the complete source code, you can get it from the link below:

If this article was useful, share it! If you have any questions, leave a comment below.

Comments

Post a Comment