Posted on Dec 17, 2023 • Edited on Dec 21, 2023

Simple navbar in html, css and javascript

This navbar will feature a centered logo, menu items, a call-to-action (CTA) button, and a custom hamburger menu for mobile screens. We'll use HTML, CSS, and a bit of JavaScript.

Step 1: Setting Up the HTML Structure

First things first, we gotta lay down the basic structure for our navigation bar in html.

index.html

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <nav class="navbar"> <div class="menu-left"> <a href="#">Home</a> <a href="#">Services</a> <a href="#">About</a> </div> <div class="logo"> <img src="logo.png" alt="Logo"> </div> <div class="menu-right"> <a href="#" class="cta-button">Contact Us</a> <div class="hamburger" onclick="toggleMobileMenu()"> <span></span> <span></span> <span></span> </div> </div> </nav> <div id="mobileMenu" class="mobile-menu"> <a href="#" class="closebtn" onclick="toggleMobileMenu()">&times;</a> <a href="#">Home</a> <a href="#">Services</a> <a href="#">About</a> <a href="#" class="cta-button">Contact Us</a> </div> <script src="script.js"></script> </body> </html>

Step 2: Styling with CSS

Now, let's get fancy with the visuals. We're talking modern design vibes here—subtle shadows, smooth transitions, the works.

style.css

.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #333; color: white; padding: 10px 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .menu-left, .menu-right, .logo { display: flex; align-items: center; } .logo img { max-height: 50px; } .hamburger { display: none; cursor: pointer; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; } .hamburger span { background-color: white; height: 3px; width: 100%; border-radius: 2px; transition: all 0.3s ease; } .cta-button { background-color: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; } .cta-button:hover { background-color: #0056b3; } .mobile-menu { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: width 0.5s ease; padding-top: 60px; } .mobile-menu a { padding: 15px 25px; text-decoration: none; font-size: 22px; color: white; display: block; transition: color 0.3s ease; } .mobile-menu a:hover { color: #ddd; } .mobile-menu .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; cursor: pointer; } @media screen and (max-width: 768px) { .menu-left, .menu-right .cta-button { display: none; } .menu-right .hamburger { display: flex; } } @media screen and (min-width: 768px) { .mobile-menu { display: none; } } a { color: white; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #ddd; } .navbar a:not(.cta-button) { padding: 10px 15px; margin: 0 5px; transition: background-color 0.3s ease; } .navbar a:not(.cta-button):hover { background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; }

Step 3: Adding JavaScript for Interactivity

For the mobile crowd, we'll sprinkle a bit of JavaScript magic. When you hit that burger menu, it'll conjure up the mobile menu in style.

function toggleMobileMenu() { const menu = document.getElementById("mobileMenu"); if (menu.style.width === "100%") { menu.style.width = "0"; } else { menu.style.width = "100%"; } }