Image Expanding Hover Effect Using HTML and CSS

 

In this tutorial, we will explore how to create a simple and stylish navigation bar (navbar) using HTML and CSS. A navbar is crucial for guiding visitors through your website and enhancing user experience. By the end of this guide, you will be able to create a responsive navbar that can be integrated into your projects.

First Navbar Create Using HTML and CSS

We begin by structuring our navbar using HTML. The <nav> element is used to define the section of our navbar. Inside it, we have three `div` elements, each serving a unique purpose: displaying the website title, navigation links, and a login button.

Structuring the Navbar with HTML

      <nav>
        <div class="f1">
          <h1>The Coding Side</h1>
        </div>
        <div class="f2">
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Contact Us</a></li>
            <li><a href="">About Us</a></li>
          </ul>
        </div>
        <div class="f3">
          <button>Log in</button>
        </div>
      </nav>

            

Next, we style our navbar using CSS to make it visually appealing. We utilize the flex display property to align our items horizontally and apply various styles to our list items and button to enhance their appearance.

Styling the Navbar with CSS

*{
    margin: 0;
    padding: 0;
}

nav {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    background-color: rgb(44, 218, 44);
    padding: 10px 0;
}
.f1 h1{
    color: red;
    background-color: white;
    padding: 10px;
    border-radius: 18px;
} 
.f2 ul {
    display: flex;
}
.f2 ul li {
    list-style: none;
}
.f2 ul li a{
    text-decoration: none;
    margin: 0 10px;
    font-size: 20px;
    position: relative;
    color: black;
}
.f2 ul li a::after{
    content: "";
    width: 0%;
    height: 5px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 100%;
    transition: all 0.5s;
}
.f2 ul li a:hover::after{
    width: 100%;
}
.f3 button{
    background-color: rgb(45, 45, 236);
    color: white;
    border: none;
    padding: 9px 17px;
    font-size: 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.6s;
}
.f3 button:hover{
    background-color: white;
    color: rgb(61, 61, 231);
}
            

Second Navbar Create Using HTML and CSS

Our HTML structure consists of a <nav> element, encapsulating two " div " elements. The first " div " contains the website title, while the second houses our navigation links.

Structuring the Navbar with HTML

 

      <nav>
        <div class="first1">
          <h1>The Coding Side</h1>
        </div>
        <div class="first2">
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Contact Us</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Privacy Policy</a></li>
          </ul>
        </div>
      </nav>  
            

Next, we'll add some style to our navbar, ensuring it is not only functional but also visually appealing. The CSS code below applies a red background, white text, and a blue shadow to our navbar, among other styles.

Styling the Navbar with CSS

*{
    margin: 0;
    padding: 0;
}
nav{
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    align-items: center;
    background-color: red;
    box-shadow: 0 0 10px 10px blue;
}
.first1 h1{
    color: white;
}
.first2 ul{
    display: flex;
}
.first2 ul li{
    list-style: none;
}
.first2 ul li a{
    text-decoration: none;
    color: white;
    font-size: 17px;
    margin: 0 12px;
    margin-bottom: 5px;
}
.first2 ul li a:hover{
    border-bottom: 3px solid white;
}

Explanation of CSS Code

nav: Styles the entire navbar, providing padding, alignment, background color, and a subtle shadow.

• .first1 h1: Ensures the website title is displayed in white.
• .first2 ul: Utilizes flex display to align the list items horizontally.
• .first2 ul li a: Styles the navigation links, ensuring they are white, adequately spaced, and free from text decoration.
• .first2 ul li a:hover: Adds a white underline to the links when hovered, enhancing user interaction.
• Conclusion

Congratulations! You've successfully created a vibrant and stylish navbar using HTML and CSS. This navbar can be a fantastic addition to your web projects, ensuring your users can navigate your site with ease. Feel free to modify the colors and styles to match the aesthetic of your website.