Create a Mobile Toggle Navigation Menu using HTML, CSS and JavaScript - GeeksforGeeks

06 Sep, 2021
To create a Mobile Toggle Navigation Menu you need HTML, CSS, and JavaScript. If you want to attach the icons with the menu then you need a font-awesome CDN link. This article is divided into two sections: Creating Structure and Designing Structure.
Glimpse of complete Navigation: 
Creating Structure: In this section, we will create a basic site structure and also attach the CDN link of the Font-Awesome for the icons which will be used as a menu icon.  
CDN links for the Icons from the Font Awesome: 
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
HTML code to make the structure: 
HTML
<!DOCTYPE html><html> <head>    <title>Mobile Navigation Bar</title>    <meta name="viewport"          content="width=device-width, initial-scale=1"></head> <body>     <div class="menu-list">         <!-- Logo and navigation menu -->        <div class="geeks">            <a href="#" class="">GeeksforGeeks</a>            <div id="menus">                <a href="#">Language</a>                <a href="#">Practice</a>                <a href="#">Interview</a>                <a href="#">Puzzle</a>             </div>                         <!-- Bar icon for navigation -->            <a href="javascript:void(0);" class="icon"               onclick="geeksforgeeks()">               <i onclick="myFunction(this)"                        class="fa fa-plus-circle">               </i>            </a>        </div>    </div></body> </html>
Designing Structure: In the previous section, we have created the structure of the basic website where we are going to use the menu icon. In this section, we will design the structure for the navigation bar. 
CSS code of structure: 
HTML
<style>          /* Navigation bar styling */        .menu-list {            max-width: 300px;            margin: auto;            height: 500px;            color: white;            background-color: green;            border-radius: 10px;        }                 /* Logo, navigation menu styling */        .geeks {            overflow: hidden;            background-color: #111;            position: relative;        }                 /* styling navigation menu */        .geeks #menus {            display: none;        }                 /* Link specific styling */        .geeks a {            text-decoration: none;            color: white;            padding: 14px 16px;            font-size: 16px;            display: block;        }                 /* Navigation toggle menu styling */        .geeks a.icon {            display: block;            position: absolute;            right: 0;            top: 0;        }                 /* hover effect on navigation logo and menu */        .geeks a:hover {            background-color: #ddd;            color: black;        }     </style>
JavaScript code for the animation menu: 
Javascript
<script>       // Function to toggle the bar    function geeksforgeeks() {        var x = document.getElementById("menus");        if (x.style.display === "block") {            x.style.display = "none";        } else {            x.style.display = "block";        }    }</script> <script>       // Function to toggle the plus menu into minus    function myFunction(x) {        x.classList.toggle("fa-minus-circle");    }</script>
Combine the HTML, CSS, and JavaScript code: This is the final code after combining the above sections. It will the mobile navigation animated menu. 
Example: 
HTML
<!DOCTYPE html><html> <head>    <title>Mobile Navigation Bar</title>    <meta name="viewport"          content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">     <style>               /* Navigation bar styling */        .menu-list {            max-width: 300px;            margin: auto;            height: 500px;            color: white;            background-color: green;            border-radius: 10px;        }               /* logo, navigation menu styling */        .geeks {            overflow: hidden;            background-color: #111;            position: relative;        }               /* styling navigation menu */        .geeks #menus {            display: none;        }               /* link specific styling */        .geeks a {            text-decoration: none;            color: white;            padding: 14px 16px;            font-size: 16px;            display: block;        }               /* navigation toggle menu styling */        .geeks a.icon {            display: block;            position: absolute;            right: 0;            top: 0;        }               /* hover effect on navigation logo and menu */        .geeks a:hover {            background-color: #ddd;            color: black;        }    </style></head> <body>     <div class="menu-list">         <!-- Logo and navigation menu -->        <div class="geeks">            <a href="#" class="">GeeksforGeeks</a>            <div id="menus">                <a href="#">Language</a>                <a href="#">Practice</a>                <a href="#">Interview</a>                <a href="#">Puzzle</a>             </div>             <!-- Bar icon for navigation -->            <a href="javascript:void(0);" class="icon"                    onclick="geeksforgeeks()">                 <i onclick="myFunction(this)"                        class="fa fa-plus-circle">                </i>            </a>        </div>    </div>     <script>               // Function to toggle the bar        function geeksforgeeks() {            var x = document.getElementById("menus");            if (x.style.display === "block") {                x.style.display = "none";            } else {                x.style.display = "block";            }        }    </script>     <script>               // Function to toggle the plus menu into minus        function myFunction(x) {            x.classList.toggle("fa-minus-circle");        }    </script></body> </html>
Output: 
 
arorakashish0911
CSS-Properties
HTML-Tags
javascript-functions
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to Insert Form Data into Database using PHP ?