Responsive Navbar Design for Java Developers

view on Youtube

As a Java developer, incorporating user-friendly and visually appealing front-end designs into your Java applications can elevate user experience. This tutorial provides a responsive navbar design with HTML, CSS, and JavaScript. While the focus is on Java developers, this design is versatile and can be used in any development project.

Below, you’ll find the complete code, explanations, and simple steps to integrate the front end into your Java back end.

HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <nav class="navbar">
      <a href="#" class="logo">BrandName</a>
      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </nav>
    <script src="script.js"></script>
  </body>
</html>

Explanation

  • Defines the structure of the navbar with links and a hamburger menu for mobile responsiveness.
  • Uses Google Fonts for a modern look.

CSS code

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

body {
  font-family: "Urbanist", serif;
  background-color: #f6fcdf;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2rem;
  background-color: #1a1a19;
  color: #f6fcdf;
}

.navbar .logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #f6fcdf;
  text-decoration: none;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}

.navbar .logo:hover {
  color: #859f3d;
}

.nav-links {
  display: flex;
  list-style: none;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -webkit-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.nav-links li {
  margin-left: 1.8rem;
}

.nav-links a {
  color: #859f3d;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #f6fcdf;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  height: 3px;
  width: 25px;
  background: #f6fcdf;
  margin: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -ms-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
}

/* For Mobile  */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 0;
    background: #1a1a19;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
  }

  .nav-links.active {
    display: flex;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-links li {
    margin: 1rem 0;
  }

  .hamburger {
    display: flex;
  }

  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    -webkit-transform: rotate(45deg) translate(5px, 5px);
    -moz-transform: rotate(45deg) translate(5px, 5px);
    -ms-transform: rotate(45deg) translate(5px, 5px);
    -o-transform: rotate(45deg) translate(5px, 5px);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px,-5px);
    -webkit-transform: rotate(-45deg) translate(5px,-5px);
    -moz-transform: rotate(-45deg) translate(5px,-5px);
    -ms-transform: rotate(-45deg) translate(5px,-5px);
    -o-transform: rotate(-45deg) translate(5px,-5px);
}
}

Explanation

  • Creates a clean, responsive design for desktop and mobile views.
  • Uses media queries for a mobile-friendly layout with a hamburger menu.

Javascript code

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");

hamburger.addEventListener("click", () => {
  navLinks.classList.toggle("active");
  hamburger.classList.toggle("active");
});

Explanation

Adds interactivity to the hamburger menu for toggling visibility of navbar links on mobile devices.

Steps to Integrate Front-End Design into Java Back End

Here are the simple steps to integrate this design into a Java project:

  1. Use JSP (JavaServer Pages):
    • Save the HTML code as navbar.jsp.
    • Include it in your Java web application using <jsp:include> in your main JSP file.
  2. Use Spring Boot:
    • Place the HTML file in the src/main/resources/templates folder.
    • Use Thymeleaf to integrate dynamic Java data into the navbar.
  3. Link Static Files:
    • Place CSS and JS files in the src/main/resources/static folder.
    • Link them using relative paths in the HTML.
  4. Run and Test:
    • Start your server and check the integration in your browser.

Conclusion

This responsive navbar design is ideal for Java developers looking to enhance their applications with a sleek front end. Whether you’re using JSP or Spring Boot, integrating this design is straightforward and adds professionalism to your project.

For simple navbar you can check our article – How to Make a Navbar in HTML & CSS | For Beginner’s

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Aitechray