Navigation Bar, Unique Menu

Navigation bar with Filling the text on hover in HTML and CSS with source code

In this lesson, we are going to learn how to create a Navigation bar by Filling text with a hover effect using HTML and CSS. In the last article, we learned how to create a Pricing table Html template using HTML and CSS.

Responsive Navigation bar:

If you have ever visited any website then you must go through the navbar of the website. It is an essential part of a website. A navigation bar helps the users to move across different parts or pages or sections of the website. A navigation bar is usually designed with a logo, menu items(buttons), and a search bar as well. Different frameworks are used to design the nav bar but we have used Html and CSS for designing this nav bar.

Here in this program, there is a navigation bar on the top of the website page and in this navbar. It has a logo on the left side and some navigation links/buttons on the right side of the navigation bar. SO that users can easily access all the content of the website.

This navbar is fully responsive across all devices (mobile, tab, and PC/laptop). This navbar contains a logo on the left side and some buttons on the right side to link with other sections of the website.

Are you interested in this design? If yes then scroll down to get the source code of the navbar.

Source Code of the responsive navigation bar:

Name the HTML file as navbar.html and CSS file navbar.css. Save these files with the extensions. Html and CSS.

Source code of HTML:

Html is the first step in the development of our navbar. Html provides us the ability to mention the menu names and create a body for our design. Here is the HTML code

<body>
    <!-- Developed by http://grohit.com/ -->
    <div>Filling the text on hover</div>
    <p data-item='FantacyDesigns'>FantacyDesigns</p>

    <section>
      <div>Real time example, Navbar:</div>
      <nav>
        <ul class="menuItems">
          <li><a href='#' data-item='Home'>Home</a></li>
          <li><a href='#' data-item='About'>About</a></li>
          <li><a href='#' data-item='Projects'>Projects</a></li>
          <li><a href='#' data-item='Blog'>Blog</a></li>
          <li><a href='#' data-item='Contact'>Contact</a></li>
        </ul>
      </nav>

    </section>

    <!-- Footer starts-->
    <footer>

      <!-- Copyright -->
      <!-- ❤️  -->
      <div class="footer-copyright text-center">&copy; Developed with ❤️ by
        <a href="#" class="white-text" target="_blank"> JD Khan</a>
      </div>
      <!-- Copyright -->

    </footer>
    <!-- Footer ends-->
  </body>

<body>

<div>Filling the text on hover</div>

<p data-item='FantacyDesigns'>FantacyDesigns</p>

<div>Real time example, Navbar:</div>

<nav>

<li><a href='#' data-item='About'>About</a></li>

<li><a href='#' data-item='Projects'>Projects</a></li>

<li><a href='#' data-item='Contact'>Contact</a></li>

</ul>

</nav>

</section>

<div class="footer-copyright text-center">© Developed with ❤️ by

</div>

</footer>

</body>

Source code of CSS file:

Html was the source for creating the menu body. Now we need to design that body and make it user-friendly. As you can observe in the menu it has a background color, font size, font family, font color, transitions, animations, position, etc. These properties are taken from CSS for our design of the menu bar. CSS code is given below.

  <style type="text/css">

      * {
        padding: 0;
        margin: 0;
      }

      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        min-height: 100vh;
        font-family: Hack, monospace;
      }

      div {
        color: #727272;
        text-align: center;
      }

      p {
        margin: 16px;
        font-size: 96px;
        color: #ccc;
        text-transform: uppercase;
        font-weight: 600;
        transition: all 1s ease-in-out;
        position: relative;
      }
      p::before {
        content: attr(data-item);
        transition: all 1s ease-in-out;
        color: #00C9A7;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0;
        overflow: hidden;
      }
      p:hover::before {
        width: 100%;
      }

      nav {
        margin: 25px;
        background: #f9f9f9;
        padding: 16px;

      }
      nav .menuItems {
        list-style: none;
        display: flex;
      }
      nav .menuItems li {
        margin: 50px;
      }
      nav .menuItems li a {
        text-decoration: none;
        color: #8f8f8f;
        font-size: 24px;
        font-weight: 400;
        transition: all 0.5s ease-in-out;
        position: relative;
        text-transform: uppercase;
      }
      nav .menuItems li a::before {
        content: attr(data-item);
        transition: 0.5s;
        color: #00C9A7;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0;
        overflow: hidden;
      }
      nav .menuItems li a:hover::before {
        width: 100%;
        transition: all 0.5s ease-in-out;
      }

      footer {
        position: absolute;
        font-size: 12px;
        bottom: 0;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        background-color: #f1f1f1;
        color: #000000;
        text-align: center;
      }
      footer a {
        text-decoration: none;
        color: inherit;
        border-bottom: 1px solid;
      }
      footer a:hover {
        border-bottom: 1px transparent;
      }

    </style>

100

101

102

103

104

105

106

107

108

* {

padding: 0;

margin: 0;

}

body {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

position: relative;

min-height: 100vh;

font-family: Hack, monospace;

}

div {

color: #727272;

text-align: center;

}

p {

margin: 16px;

font-size: 96px;

color: #ccc;

text-transform: uppercase;

font-weight: 600;

transition: all 1s ease-in-out;

position: relative;

}

p::before {

content: attr(data-item);

transition: all 1s ease-in-out;

color: #00C9A7;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: 0;

overflow: hidden;

}

p:hover::before {

width: 100%;

}

nav {

margin: 25px;

background: #f9f9f9;

padding: 16px;

}

nav .menuItems {

list-style: none;

display: flex;

}

nav .menuItems li {

margin: 50px;

}

nav .menuItems li a {

text-decoration: none;

color: #8f8f8f;

font-size: 24px;

font-weight: 400;

transition: all 0.5s ease-in-out;

position: relative;

text-transform: uppercase;

}

nav .menuItems li a::before {

content: attr(data-item);

transition: 0.5s;

color: #00C9A7;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: 0;

overflow: hidden;

}

nav .menuItems li a:hover::before {

width: 100%;

transition: all 0.5s ease-in-out;

}

footer {

position: absolute;

font-size: 12px;

bottom: 0;

width: 100%;

height: 60px;

line-height: 60px;

font-size: 14px;

background-color: #f1f1f1;

color: #000000;

text-align: center;

}

footer a {

text-decoration: none;

color: inherit;

border-bottom: 1px solid;

}

footer a:hover {

border-bottom: 1px transparent;

}

</style>

By using this code in your editor you will be able to create a nav navbar just like me.

That’s how you can create a navigation bar in HTML and CSS. If you found any type of problem in understanding any tag or property of HTML and CSS in this article then you can click here.

Task:

We have added a heading and filled it with color. The color is shown in the form of animation from left to right in green color. Below this, we have a navigation bar. The active color is white in the heading and navigation bar buttons. When hovering over the navigation buttons then they change color. Now change the active color of the buttons to green and the hover color to black. Also, add an image in the background of the heading animation as well.

If you have any other queries or are interested in more designs or projects then you can comment below.

Go to top

Download Source CodeClick to Download