How to create a Responsive Bottom Navigation Menu with CSS and JavaScript.

Last Updated : 24 May, 2024

A responsive bottom navigation menu provides mobile-friendly access to important links. We will see how to create a responsive bottom navigation menu that adjusts to different screen widths. The menu will include elements like Home, Contact, and About. When viewed on a smaller screen, a hamburger menu appears, and clicking it displays the navigation options vertically.

Approach

Create a basic HTML structure with navigation links and a hamburger menu icon.
Create a CSS file to style the navigation menu.
Create a JavaScript file to handle the toggle functionality for the hamburger menu.
Ensure that the navigation items appear horizontally on bigger screens and vertically when the hamburger menu is engaged on smaller screens.
Test the navigation menu on various screen sizes to ensure responsiveness.

Example: The example below shows how to create a responsive bottom navigation menu with CSS and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Responsive Bottom Navigation</title>
    <link rel="stylesheet" 
          href="styles.css">
</head>

<body>
    <div class="nav-container">
        <div class="hamburger">
          &#9776;
          </div>
        <ul class="nav-items">
            <li><a href="#home">Home</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

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

.nav-container {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #333;
}

.nav-items {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.nav-items li {
    color: white;
}

.nav-items li a {
    color: white;
    text-decoration: none;
}

.hamburger {
    display: none;
    font-size: 30px;
    color: white;
    padding: 10px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .nav-items {
        display: none;
        flex-direction: column;
        background-color: #333;
    }

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

    .hamburger {
        display: block;
        text-align: center;
    }
}

JavaScript

const hamburger = document.querySelector('.hamburger');
const navItems = document.querySelector('.nav-items');

hamburger.addEventListener('click', () => {
    navItems.classList.toggle('active');
});

Output:

How to create a Responsive Bottom Navigation Menu with CSS and JavaScript.

parthdollor

Improve

Article Tags :

How to create a Responsive Bottom Navigation Menu with CSS and JavaScript.

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?