How to Create Responsive Bottom Navigation Bar Animation in HTML/CSS ?

Hello Guys,

In this tutorial , we are making the responsive bottom navigation bar in html. Here we used html , css and JavaScript for making responsive bottom navigation bar. HTML is used to making bottom navigation bar. CSS is used to making attractive bottom navigation bar. And JavaScript is used to making responsive bottom navigation bar.

Bottom Navigation Bar looking like below images :

Whenever user resize the window looking like below image :-

Let's get started.

Step 1 : Add HTML Code.

CODE :-

<div class="navbar" id="myNavbar"> <a href="#home" class="active">Home</a> <a href="#animation">Animation</a> <a href="#python">Python</a> <a href="#mini-projects">Mini Project</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div>

Here we add some item for bottom navigation bar using 'a' tag and 'href' attributes.

Step 2 : Add CSS Code.

CODE :-

 

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

        .navbar {
            overflow: hidden;
            background-color: black;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .navbar a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        .navbar a.active {
            background-color: #ddd;
            color: black;
        }

        .navbar .icon {
            display: none;
        }

        @media screen and (max-width: 600px) {
            .navbar a:not(:first-child) {
                display: none;
            }

            .navbar a.icon {
                float: right;
                display: block;
            }
        }

        @media screen and (max-width: 600px) {
            .navbar.responsive .icon {
                position: absolute;
                right: 0;
                bottom: 0;
            }

            .navbar.responsive a {
                float: none;
                display: block;
                text-align: left;
            }

        }

CSS code written between <style> tag. CSS code is used to making site more beautiful.

Step 3 : Add JavaScript Code.

CODE :-

 

   function myFunction() {
            var x = document.getElementById("myNavbar");
            if (x.className === "navbar") {
                x.className += " responsive";
            } else {
                x.className = "navbar";
            }
        }

JavaScript is written between <script> tag.
CSS queries and JavaScript are used for responsive means whenever user resize the window to see the menu bar in navigation bar.

Project Code :

    
     <!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width , initial-scale=1">
    <style>
        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .navbar {
            overflow: hidden;
            background-color: black;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .navbar a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        .navbar a.active {
            background-color: #ddd;
            color: black;
        }

        .navbar .icon {
            display: none;
        }

        @media screen and (max-width: 600px) {
            .navbar a:not(:first-child) {
                display: none;
            }

            .navbar a.icon {
                float: right;
                display: block;
            }
        }

        @media screen and (max-width: 600px) {
            .navbar.responsive .icon {
                position: absolute;
                right: 0;
                bottom: 0;
            }

            .navbar.responsive a {
                float: none;
                display: block;
                text-align: left;
            }

        }
    </style>
</head>

<body>

    <div class="navbar" id="myNavbar">
        <a href="#home" class="active">Home</a>
        <a href="#animation">Animation</a>
        <a href="#python">Python</a>
        <a href="#mini-projects">Mini Project</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
    </div>

    <div style="padding-left:16px">
        <h1>Responsive Bottom Navbar Animation</h1>
        <p>Resize the browser and see the Effect</p>
    </div>

    <script>
        function myFunction() {
            var x = document.getElementById("myNavbar");
            if (x.className === "navbar") {
                x.className += " responsive";
            } else {
                x.className = "navbar";
            }
        }
    </script>

</body>

</html>

Output :-

I hope you like post. If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support. 🙏

PsInf0

How to Create Responsive Bottom Navigation Bar Animation in HTML/CSS ?

Project Code :

Post a Comment

0 Comments

Recent Post

#9 Python Tutorial for Beginners

Popular Posts

Tags

Contact Form

Categories

Most Popular

How to Create Bottom Navigation Bar Animation in Android ?

How to add fingerprint scanner in android programmatically ?

Build Bounce Animation App in Android

Pages

Footer Menu Widget

PsInf0

How to Create Responsive Bottom Navigation Bar Animation in HTML/CSS ?

Project Code :

Related Posts

Post a Comment

0 Comments

Recent Post

#9 Python Tutorial for Beginners

Popular Posts

Tags

Contact Form

Categories

Most Popular

How to Create Bottom Navigation Bar Animation in Android ?

How to add fingerprint scanner in android programmatically ?

Build Bounce Animation App in Android

Pages

Footer Menu Widget