Create a Responsive Navigation Bar using HTML, CSS, and JavaScript

Kosal Ang

Mon Jan 15 2024

Creating a beautiful menu bar using HTML, CSS, and JavaScript involves creating the structure with HTML, styling it with CSS, and adding interactivity with JavaScript. Here's a simple example of a responsive and stylish menu bar:

HTML:

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <link rel="stylesheet" href="styles.css" />
7    <title>Responsive Menu Bar</title>
8  </head>
9  <body>
10    <div class="navbar">
11      <div class="toggle-btn" onclick="toggleMenu()">
12        <span></span>
13        <span></span>
14        <span></span>
15      </div>
16      <div class="logo">Your Company</div>
17      <div class="menu">
18        <a href="#">Home</a>
19        <a href="#">About</a>
20        <a href="#">Services</a>
21        <a href="#">Contact</a>
22      </div>
23      <div id="searchBar">
24        <input type="text" id="searchInput" placeholder="Search..." />
25      </div>
26      <div class="search-btn" onclick="toggleSearch()">
27        <span>&#128269;</span>
28      </div>
29    </div>
30
31    <div class="content">
32      <!-- Your page content goes here -->
33      <h1>Welcome to Your Company</h1>
34      <p>This is a professional menu bar example.</p>
35    </div>
36
37    <script src="script.js"></script>
38  </body>
39</html>
40

CSS (styles.css):

1body {
2  margin: 0;
3  font-family: "Arial", sans-serif;
4  background-color: #f4f4f4;
5}
6
7.navbar {
8  background-color: #a020f0;
9  padding: 0 15px;
10  display: flex;
11  justify-content: space-between;
12  align-items: center;
13  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
14  height: 60px;
15}
16
17.logo {
18  color: white;
19  font-size: 24px;
20}
21
22.menu {
23  display: flex;
24  justify-content: center;
25  align-items: center;
26}
27
28.menu a {
29  color: #fff;
30  text-decoration: none;
31  margin: 0 20px;
32  font-size: 16px;
33  transition: color 0.3s;
34}
35
36.menu a:hover {
37  color: #ffcc00;
38}
39
40.search-btn span {
41  color: #ddd;
42  border: none;
43  cursor: pointer;
44  font-size: 20px;
45}
46
47#searchBar {
48  display: none;
49}
50.show {
51  display: block !important;
52}
53.hide {
54  display: none !important;
55}
56
57#searchInput {
58  opacity: 0;
59  width: 0;
60  padding: 0;
61  transition: opacity 0.3s, width 0.3s;
62}
63
64.show #searchInput {
65  opacity: 1;
66  width: 150px;
67  padding: 8px;
68}
69
70.toggle-btn {
71  display: none;
72  flex-direction: column;
73  cursor: pointer;
74}
75
76.toggle-btn span {
77  height: 3px;
78  width: 25px;
79  background-color: white;
80  margin: 6px 0;
81  display: block;
82}
83
84.show-menu {
85  display: flex !important;
86}
87
88@media screen and (max-width: 768px) {
89  .menu {
90    display: none;
91    flex-direction: column;
92    width: 100%;
93    text-align: center;
94    position: absolute;
95    top: 60px;
96    left: 0;
97    background-color: #333;
98    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
99  }
100
101  .menu a {
102    margin: 10px 0;
103  }
104
105  .toggle-btn {
106    display: flex;
107  }
108}
109

JavaScript (script.js):

1function toggleSearch() {
2  const searchInput = document.getElementById("searchBar");
3  searchInput.classList.toggle("show");
4  const menu = document.querySelector(".menu");
5  menu.classList.toggle("hide");
6}
7
8function toggleMenu() {
9  const menu = document.querySelector(".menu");
10  menu.classList.toggle("show-menu");
11}
12

This example includes a responsive menu bar with a toggle button for smaller screens. The menu bar has a simple color scheme, and you can further customize the styles to fit your design preferences. The JavaScript function toggleMenu is used to show/hide the menu on smaller screens.

View Live Demo Download Code Files

javascript css html