Skip to main content

Transparent Navigation Bar Design | Rustcode

Transparent-Navigation-Bar-Design-HTML-And-CSS

"Transparent navigation bar" is more popular nowadays and we can see this navbar in new websites with different effects. Usually, the navbar looks different from its landing page, but here all the menu options are displayed along with the website landing page, which is known as the transparent navigation bar. You can view various navigation bar collections from our website. 

 In this animation, we are using html and css. We tried to make it as simple as possible.

If you can know more about the impact of website development, you can follow our articles on web development.



01. HTML STRUCTURE

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

<body>

    main content.

</body>
</html>



02. HTML

<body>
  <div class="container">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">PRICE</a></li>
      <li><a href="#">TEAM</a></li>
      <li><a href="#">CONTACT</a></li>
      <li><a href="#">ABOUT</a></li>
    </ul>
  </div>
</body>



03. CSS

You can download background image form here.

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-image: url("bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.container {
  padding: 18px;
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
}

.container li {
  list-style: none;
  display: inline;
}

.container li a {
  text-decoration: none;
  padding: 14px 20px;
  font-size: 16px;
  color: #f2f2f2;
  display: inline-block;
  text-align: center;
  letter-spacing: 1px;
  transition: all .5s ease-in;
}

.container li a:hover {
  background-color: crimson;
}


04. 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.




05. 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.






RELATED POST:

Comments