Designing a dynamic hamburger menu featuring multiple levels of buttons that open up additional layers of options

I'm trying to implement an animated hamburger menu with expandable buttons in the next level. While I know my code is far from achieving that, here's my progress so far: https://jsfiddle.net/TheBB23/hnsjym9u/

This code was borrowed from a website to give you a better idea of what I'm aiming for: https://jsfiddle.net/TheBB23/uw2jzge1/

I've hit a roadblock and would appreciate any assistance or guidance.

$('.circle-plus').on('click', function() {
      $(this).toggleClass('opened');
    })
    // JavaScript code continues...
    
body {
      margin: 0px;
      padding: 0px;
      background: white;
     /* CSS styles continue... */
    
<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      // HTML code continues...
javascriptjqueryhtmlcsshamburger-menu

Answer №1

Here is an example you can use as a starting point and enhance it as necessary.

$(function () {
        var $menu = $('.menu');
        var $menuItems = $menu.find('.menu-item');

        for (var i = 0; i < $menuItems.length; i++) {
            var $menuItem = $menuItems.eq(i);
            if ($menuItem.children('.children').length > 0) {

                var $expandCollapseButton = $menuItem.children('.children').hasClass('hidden')?$('<i class="fa fa-plus-square-o"></i>'):$('<i class="fa fa-minus-square-o"></i>');

                $expandCollapseButton.insertAfter($menuItem.find('> a')).on('click', expandCollapse);
            }
        }
    })

    function expandCollapse(e) {
        var $expandCollapseButton = $(this)
        var $children = $expandCollapseButton.siblings('.children');

        if($children.hasClass('hidden')){
            $expandCollapseButton.removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
        }else {
            $expandCollapseButton.removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
        }

        $children.toggleClass('hidden');
    }
a {
  text-decoration: none;
}

body {
  font-family: 'Ubuntu', sans-serif;
}

.menu-item {
  margin-bottom: 10px;
  min-width: 150px;
}

.menu-item>i {
  margin-left: 5px;
  cursor: pointer;
}

.menu-item>i:hover {
  color: crimson;
}

.child-item {
  margin-left: 20px;
}

.children {
  height: 80px;
  overflow: hidden;
  transition: height .4s;
}

.children.hidden {
  height: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu">
  <div class="menu-item">
    <a href="#">Item 1</a>
    <div class="children">
      <div class="child-item menu-item">
        <a href="#">Child 1 of Item 1</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 2 of Item 1</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 3 of Item 1</a>
      </div>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">Item 2</a>
    <div class="children hidden">
      <div class="child-item menu-item">
        <a href="#">Child 1 of Item 2</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 2 of Item 2</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 3 of Item 2</a>
      </div>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">Item 3</a>
    <div class="children">
      <div class="child-item menu-item">
        <a href="#">Child 1 of Item 3</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 2 of Item 3</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 3 of Item 3</a>
      </div>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">Item 4</a>
  </div>
  <div class="menu-item">
    <a href="#">Item 5</a>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display table rows that are hidden in an HTML/Angular toggle function

I am relatively new to Angular and I have a task of setting up a table. The dataset that I have is as follows:- data = [{rollno: 1,name: 'abc',subject: 'maths'}, {rollno: 4,name: 'xyz',subject: 'history'}, ...

javascriptangularjs

Ensure that each row in the grid expands to occupy all remaining space, with the option to scroll if additional space is required

Looking to have a grid item expand to fill 100% of available space, but also scroll if it exceeds that space. Here's an example scenario where I'm having trouble with the CSS line marked: '/* DOESN'T WORK */' when attempting to s ...

htmlcsscss-grid

Header with absolute positioning doesn't play nice when nudged in Chrome

Take a look at the HTML page on this JSFiddle link: http://jsfiddle.net/rb8rs70w/2/ The page features a "sticky" header created using CSS with the property position: absolute. ... <body class="body-menu-push"> <header role="banner"> ...

htmlcssgoogle-chrome

Obtaining data with jQuery.Ajax technology

I am attempting to retrieve real-time data from a different URL and display it in a text field every second without refreshing the entire page. The content of the URL is constantly changing, so I want the field to update accordingly. However, despite my ef ...

javascriptjqueryhtmlajax

Guide on how to utilize JavaScript to redirect to a URL for PUT or POST requests by clicking a button

I have a button <button class="delivery-orders-button" onclick="markDone(${order.order_id})">Dispatch order</button> and my goal is to have the markDone function redirect the user to a designated page, similar to how forms ...

javascripthtmlexpress

CSS: Continuous Automated Slide Transitions

What CSS code do I need to incorporate into my code to create a continuous Slider Animation? I want the pictures to slide automatically one by one, with a specified time interval between each slide when not on hover. The hover function is already included ...

css

What could be causing this strange striping effect in the radial gradient?

What causes the striped effect in the radial gradient code provided on this website: click here to view body { background: rgba(216,215,221,1); background: -moz-radial-gradient(center, ellipse cover, rgba(enter code here216,215,221,1) 0%, rgba(0,9 ...

htmlcssgradient

Issue with triggering $.ajax({success}) in Laravel 5 response

When making an ajax request with jQuery, I encounter an issue where the form submits, the controller handles the logic, but the success function in $.ajax does not trigger. Interestingly, the error function is triggered in two scenarios - when validation f ...

jqueryajaxjsonhttplaravel

JavaScript code to record the time when a client exits my website by clicking the X button in the top right corner and save it in my database

I need to record in the database the times when users enter and exit my site. Saving the entry time is not an issue, nor is saving the exit time by clicking my "log off" button. However, what about when a client exits by clicking the X in the right corner ...

phpjavascriptsession

Encountering a bug that states "TypeError: Cannot read properties of null (reading 'useState')" while trying to use useState in a react application

I'm working on incorporating useState into my Next.js app, but I encountered an error as soon as I added the line of code to initialize useState. The popup error message reads: TypeError: Cannot read properties of null (reading 'useState') ...

javascriptreactjsnext.jsuse-state

The value of Vue.js props appears as undefined

It appears that I may be misunderstanding how props work, as I am encountering difficulty passing a prop to a component and retrieving its value, since it always shows up as undefined. Route: { path: '/account/:username', name: 'accco ...

javascriptparametersvue.jsvue-componentvue-router

Focusing solely on a particular category in EJS

I am struggling with this code snippet. HTML: <header<% if ( current.source === 'features' || current.path[0] === 'index' || current.source !== 'customers' ) { %> class="header-white"<% } %>> <div cl ...

javascriptcssejsharp

"Troubleshooting the issue with the @click event failing to update the data

Working in Vue.js, my v-for loop is set up to go through a list and generate buttons. Each button has a click event that should change the value of upUrl to its index: <div class="mt-3" v-for="(buttonPic, index) in buttonPics" ...

javascriptvue.jsvuejs2vue-component

Instructions on deploying static files to Vercel including HTML, CSS, and JavaScript files

I have encountered an issue and would like to share my solution - please see my initial response. Currently, I am facing a challenge while trying to deploy a repository from my GitHub account. The repository consists of various static files: ├─js ...

javascripthtmlstaticvercel

Compact selection box, vast information

My dilemma is having restricted space for a dropdown containing a considerable amount of text. Is it feasible to keep the dropdown width small while expanding the list popup size? Update: My browser of choice is Internet Explorer. ...

htmlcss

My node.js code is not producing the expected result. Can anyone point out where I may be going wrong?

I've been working on a BMI calculator where I input two numbers, they get calculated on my server, and then the answer is displayed. However, I'm having trouble receiving the output. When I click submit, instead of getting the answer, I see a lis ...

javascripthtmlnode.jsexpress

Tips on confirming the completion of my form when the next button is pressed

I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...

javascriptjqueryhtmlforms

What is the best way to simulate the "window.screen.orientation.lock" function with Jest?

Within our hybrid app, we have implemented a cordova plugin to control screen orientation. The AppComponent contains code that manages the screen orientation locking using the window.screen.orientation.lock function. Is there a way to create a mock versi ...

javascriptangularunit-testingcordovajestjs

A useful tip for jQuery users: learn how to prevent the context menu from appearing when a text box is

Is there a way to prevent the context menu from appearing in jQuery when the text box is disabled? The right-click disable functionality works well in all browsers except for Firefox. Please note that the right-click disable functionality works when the t ...

javascriptjqueryhtmlcss

How to retrieve the value of a selected item in primeng using p-dropdown and angular

Encountering an issue when trying to send the selected item value while iterating over an array of strings like: "BMW", "FERRARI", "AUDI", "BENTLY" Here is the structure of my HTML: <p-dropdown optionLabel="type" [options]="cars" formControlName="name" ...

htmlangulartypescriptprimeng