Mbiakop Clinton's blog

Create a mobile toggle Manu with HTML, CSS, and Javascript

Mbiakop Clinton's photo
Mbiakop Clinton
·

3 min read

Create a mobile toggle Manu with HTML, CSS, and Javascript.

Our project today will be centered on the creation of a mobile toggle Menu with HTML CSS-and-javascript. Undoubtedly, you can create a mobile toggle menu with HTML CSS and javascript like TailWind or BootStrap. But what is the concept behind it?

How to Create Your Mobile Toggle Menu?

If you haven't already, open your project folder and create your project files (HTML, CSS, and JavaScript).

Below you will see the sample code you need for all three types. And if you haven't already, consider downloading these apps to learn the code before reading on.

Let's start with 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="">Hello World</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="HelloWorld()">
               <i onclick="myFunction(this)"
                        class="fa fa-plus-circle">
               </i>
            </a>
        </div>
    </div>
</body>

</html>

In CSS to create our mobile toggle Menu with-HTML CSS-and-javascript

CSS is equally used for the front-end part. It gives different kinds of animations and effects to our HTML page so that it looks interactive for all users. In CSS, we equally need to include the following points which will permit us to do Mobile toggle Menu with-htmlcss-and-javascript

Restore all browser effects. Use classes and identifiers to give effects to HTML elements.

<!-- use this command to create a css file in your html code -->
<link rel="style" href="toogle menu.css" type="text/css">
/* 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;
}

Javascript to

create our mobile toggle Menu with-html css-and-javascript

Lastly, these are things to be done to finalize our project which is Mobile toggle Menu with-htmlcss-and-javascript

<script src="toogle.js"></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";
    }
}


// Function to toggle the plus menu into minus
function myFunction(x) {
    x.classList.toggle("fa-minus-circle");
}

Entire code;

<!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="">Hello World</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>
JavaScriptHTMLCSSsoftware developmentSoftware Engineering