This is the 12th day of my participation in Gwen Challenge

Everybody is good! In this tutorial, we’ll use HTML, CSS, and some javascript to build responsive navigation bars and breadcrumb menus.

This is what it looks like,



So, let’s start with HTML,

<header class="header">
        <nav class="navbar">
            <a href="#" class="nav-logo">WebDev.</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
</header>
Copy the code

Here, we have

  • Header works with header’s class as a container for our navigation bar
  • Nav and navbar class
  • A link to the class with the nav-logo
  • Class of ul and nav-menu
  • Ul has four classes for Li and Nav-item
  • Inside each nav-item, we have a class for nav-link
  • For our bread, I added a Hamburger class to the div, three spans from the category, and a bar class

This is the HTML we need

Now let’s add CSS

Here, we’ll import the required fonts and add some basic CSS to reset all the default styles.

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital, WGHT @ 0500; 1400 & display = swap ');

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

html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}
Copy the code

Now let’s add styles to each element,

  • The header and the navbar
.header{
    border-bottom: 1px solid #E2E8F0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5 rem;
}
Copy the code
  • Mr. Hamburger style
.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3 s ease-in-out;
    transition: all 0.3 s ease-in-out;
    background-color: # 101010;
}
Copy the code
  • Basic styles for other elements
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-item {
    margin-left: 5rem;
}

.nav-link{
    font-size: 1.6 rem;
    font-weight: 400;
    color: # 475569;
}

.nav-link:hover{
    color: #482ff7;
}

.nav-logo {
    font-size: 2.1 rem;
    font-weight: 500;
    color: #482ff7;
}
Copy the code

After that, it should look something like this



But it’s not reactive yet, so let’s add a media query.

@media only screen and (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 5rem;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        border-radius: 10px;
        text-align: center;
        transition: 0.3 s;
        box-shadow:
            0 10px 27px rgba(0.0.0.0.05);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        margin: 2.5 rem 0;
    }

    .hamburger {
        display: block;
        cursor: pointer; }}Copy the code

This media query does nav-menu by setting position: fixed; left: -100%; To hide our content. In addition, we will set hamburger to display: block; So now you can see. We also added an additional class called. Nav-menu. active to set left: 0; On the nav – menu. Now we will need to add javascript, which will add this class to the navigation menu when we click on the hamburger.

Let’s add javascript

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}
Copy the code

Here, the function mobileMenu() adds an active class to our hamburger and our nav-menu, which opens our move menu. When clicked, we can use the activity class on the hamburger to create the X animation Hamburger. So do it now.

// Inside the Media Query.

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
Copy the code

Now it should look something like this

But there’s a problem, the burger menu doesn’t close when we click the link. Now let’s add it

const navLink = document.querySelectorAll(".nav-link");

navLink.forEach(n= > n.addEventListener("click", closeMenu));

function closeMenu() {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
}
Copy the code

The closeMenu() function removes the active class from both nav-menu and Hamburger, closing our move menu.



So we built a responsive navigation bar and burger menu using HTML CSS and javascript. Hope you like it 😀

As a free download

Pay attention to the author wechat public number [la la la want biU point what] reply [responsive navigation bar] free access

I will continue to update similar free fun H5 games, Java games, fun, practical projects and software, and so on

More relevant articles and my contact information are listed here:

Github.com/wanghao221 gitee.com/haiyongcsdn…

Finally, don’t forget to support ❤️ or 📑