Retour aux articles
Wednesday, January 8, 202536 vues1

Create a Navigation Bar with HTML and CSS: Simple and Elegant

Mike Codeur

Html
CSS

A navigation bar is an essential element for any website. Whether you're a beginner or looking to refine your skills, this article will guide you in creating a simple, elegant, and responsive navigation bar.

Building the Navigation Bar with HTML

Start by structuring the navigation bar with basic HTML. Here's an example:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">MySite</div>
        <ul class="nav-links">
            <li><a href="#">Home</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>
</body>
</html>

Code Explanation:

  • The navigation bar is contained within a <nav> tag.
  • The logo is a simple div.
  • Navigation links are grouped in an unordered list (<ul>).
  • A hamburger icon is added for the responsive menu.

Styling with CSS

Create a styles.css file and add the following styles to make the navigation bar visually appealing.

CSS
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 0.5em 1em;
    color: white;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1em;
    margin: 0;
}

.nav-links a {
    text-decoration: none;
    color: white;
    transition: color 0.3s;
}

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

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

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: white;
}

CSS Explanation:

  • The navigation bar is styled with display: flex for a horizontal layout.
  • Links have a hover effect that changes their color.
  • The hamburger icon is styled but remains hidden on larger screens.

Adding a Responsive Menu

To make the navigation bar adapt to smaller screens, add these styles to the CSS file:

CSS
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 50px;
        right: 0;
        width: 100%;
    }

    .nav-links.active {
        display: flex;
    }

    .hamburger {
        display: flex;
    }
}

Then, add some JavaScript to activate the hamburger menu:

JSX
<script>
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

    hamburger.addEventListener('click', () => {
        navLinks.classList.toggle('active');
    });
</script>

Explanation:

  • The responsive styles hide the navigation links by default on smaller screens.
  • JavaScript toggles an .active class to display the menu when the hamburger icon is clicked.

Conclusion

With these simple steps, you have created a navigation bar that is both elegant and functional. It adapts to all devices and offers a seamless user experience. Get started and customize it to fit your needs!

Abonnes-toi à la NewsLetter

Apprends les meilleures pratiques pour devenir un développeur web moderne (JavaScript / React / Next).

Gagner sa vie grâce au code
Devenir développeur Freelance
+35 000 développeurs déjà inscrits.

Accès instantané. Aucune carte de crédit requise.

Rejoins +35 000 développeurs déjà inscrits.