Creating a dynamic multi-level menu within a hamburger menu

Tackling the challenge of creating a hamburger multi-level menu for a web page using CSS has proven to be quite tricky. The main issue I'm encountering is successfully incorporating a sub-menu to make it truly multi-level. Here's the progress I've made so far with the code snippet:

body {
margin: 0;
padding: 0;
/* ensuring a neat appearance */
background: #232323;
color: #cdcdcd;
font-family: "Avenir Next", "Avenir", sans-serif;
}
a {
text-decoration: none;
color: #fff;
transition: color 0.3s ease;
}
a:hover {
font-weight: bold;
}
#menuToggle {
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
...

The expected output resembles this design:

https://i.sstatic.net/ZMWyv.png

However, the actual output looks more like this:

https://i.sstatic.net/KwIS0.png
jqueryhtmlcss

Answer №1

I trust this information will be beneficial to you

$(function() {
$('#menu > .item-submenu .submenu').click(function(){
    if($('.item-submenu .sub-menu').css('display') == 'none'){
            $('.item-submenu .sub-menu').css({'display':'block'});
    } else {
            $('#menu > .item-submenu .sub-menu').css({'display':'none'}); 
}
});
$('#menuToggle > input').click(function(){
    $('#menu > .item-submenu .sub-menu').css({'display':'none'}); 
});
});
       body {
            margin: 0;
            padding: 0;
            /* make it look decent enough */
            background: #232323;
            color: #cdcdcd;
            font-family: "Avenir Next", "Avenir", sans-serif;
        }
        a {
            text-decoration: none;
            color: #fff;
            transition: color 0.3s ease;
        }
        a:hover {
            font-weight: bold;
        }
        #menuToggle {
            display: block;
            position: relative;
            top: 50px;
            left: 50px;
            z-index: 1;
            -webkit-user-select: none;
            user-select: none;
        }
        #menuToggle input {
            display: block;
            width: 40px;
            height: 32px;
            position: absolute;
            top: -7px;
            left: -5px;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
            -webkit-touch-callout: none;
        }
        #menuToggle span {
            display: block;
            width: 33px;
            height: 4px;
            margin-bottom: 5px;
            position: relative;
            background: #fff;
            border-radius: 3px;
            z-index: 1;
            transform-origin: 4px 0px;
            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
        }
        #menuToggle span:first-child {
            transform-origin: 0% 0%;
        }
        #menuToggle span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }
        #menuToggle input:checked ~ span {
            opacity: 1;
            transform: rotate(45deg) translate(-2px, -1px);
            background: #fff;
        }
        #menuToggle input:checked ~ span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }
        #menuToggle input:checked ~ span:nth-last-child(2) {
            transform: rotate(-45deg) translate(0, -1px);
        }
        #menu {
            position: absolute;
            width: 300px;
            height: 1000px;
            margin: -100px 0 0 -90px;
            padding-top: 125px;
            background: #008040;
            list-style-type: none;
            -webkit-font-smoothing: antialiased;
            transform-origin: 0% 0%;
            transform: translate(-100%, 0);
            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        }
        #menu li {
            padding: 10px 0;
            font-size: 22px;
        }
        #menuToggle input:checked ~ ul {
            transform: none;
        }
        .sub-menu li {
            list-style-type: none; 
            padding: 4px!important;
            margin-bottom: -5px;
            
        }
        .sub-menu li a {
            font-size: 17px;
        }
        .sub-menu {
        display: none;
        margin: 0px 0 0 -41px;
        background: #0000002e;
    }
    .item-submenu > a:after {
font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
      content: "\f078";
float: right;
    margin-right: 10px;
}
.item-submenu {
    margin-bottom: -14px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav role="navigation">
            <div id="menuToggle">
              <!-- checkbox is used as click reciever. -->
              <input type="checkbox" />
          
              <!-- spans to act as a hamburger. -->
              <span></span>
              <span></span>
              <span></span>
              
              <ul id="menu">
                <hr>
                <a href="#">
                  <li>Home</li>
                </a>
                <hr>
                <li class="item-submenu">
                 <a href="#" class="submenu">About</a>
                <ul class="sub-menu">
                    <li><a href="#">The Organisation</a></li>
                    <hr>
                    <li><a href="#">The Team</a></li>
                </ul>
                </li>
                <hr>
                <a href="#">
                  <li>Schedule</li>
                </a>
                </ul>
            </div>
          </nav>

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

What is the best way to verify the existence of an email address?

I'm currently using the jQuery validation plugin and everything is working fine, but I've hit a snag when it comes to checking email addresses. The issue is that the plugin returns either true or false based on whether the email exists or not. Ho ...

javascriptjquery

Is there a way to alter the text color upon touching it?

I'm attempting to modify the background color of a button and also change the text color inside the button. While I was successful in changing the button's color, the text color remained the same. Even after adding a hover effect to the text, the ...

cssreactjstailwind-css

Filtering content with a sliding effect using CSS and JavaScript

I'm currently developing a jQuery mobile app that requires filtering posts on a specific page. I have already added the posts and designed the filter. Take a look at how it appears below: https://i.sstatic.net/mVh9X.png I am working on animating th ...

javascriptjqueryhtmlcssanimation

tips for passing a string array to an actionresult

I've been struggling with a variable that is a string[] parameter. Despite my attempts to push values in the actionresult, I haven't been able to successfully match the string[] parameter. Here's what my ajax code looks like: var panels ...

c#jqueryajax

Adaptable bootstrap placement

I have created a form that includes a custom checkbox element. The issue is that the label for the checkbox is not vertically aligned with the checkbox itself. How can I adjust the label to be vertically centered with the checkbox? You can see the code ...

htmlcssbootstrap-4

CSS button with folded corner illusion and dynamic transitions

I have been using the code provided below to create a folded corner effect on a button, but I am having trouble with the white background that appears in the upper left corner of the button. Is there a class I can use to make this transparent so that the y ...

htmlcss

"Learn the steps to toggle a sub menu using an onclick event and how to hide it using another

I created a sidebar navigation that displays submenus on mouseover, but I want them to open on click and close when clicking on the same tab. Please take a look at my code on this CodePen link. Thank you. <nav class="navigation"> <ul class="mai ...

javascripthtmlcss

Enhance the speed of AJAX search within a UL LI list containing over 5000 objects

Dear Stack community, I've been working on a simple Ajax js search using .addClass and .removeClass as I discovered it's faster than using .show() and .hide(). However, the speed is still not up to par and I'm feeling quite lost. You can ...

javascriptjqueryajaxsearch

Error code 8070000c is specific to Uploadify and can only be encountered when using the

Encountered an issue with jQuery uploadify - receiving error message: SCRIPT16389: Could not complete the operation due to error 8070000c. jquery.uploadify.v2.1.4.js, line 292 character 5 This error occurs on the second attempt when using IE browser. Any ...

jqueryinternet-exploreruploadify

Apply a CSS class to the selected radio button when retrieving row data from the table

How can I dynamically add a CSS class to a snippet of code when a radio button is selected? Here's the jQuery Snippet: $(document).ready(function (){ $("input:radio").click(function () { if ($(this).is(":checked")) { var empid ...

jquerycssradio-button

Access the modal by simply clicking on the provided link

I have implemented a code snippet below to display data from MySQL in a modal popup. Everything is functioning correctly, but I am interested in triggering the modal by clicking a link instead of a button. Is it feasible to achieve this considering I have ...

javascriptjquery

Execute multiple events using jQuery's .trigger() method

As I develop a jQuery plugin, I am utilizing the .on and .trigger functions for my pub/sub system. One challenge I am facing is triggering multiple events in different scenarios with ease. My question is whether it is possible to trigger multiple events a ...

javascriptjquerytriggers

No code is appearing on the page, just a blank space

Whenever I visit this page on the web, the screen shows up as empty and I've encountered similar issues with other JavaScript pages that I've created. This makes me wonder if there might be a missing piece of code or something else causing the pr ...

javascripthtmlbuttoncharts

Dynamic Bootstrap Table with Fixed Header

I am customizing a Bootstrap table by adding CSS for a sticky header. My code snippet includes the following: .table-sticky th { background: #fff; position: sticky; top: -1px; z-index: 990; } <div class ...

htmlcsstwitter-bootstrapbootstrap-4

Locate a linkbutton control within a datalist that is part of a gridview

Currently, I am working on a web application for a Medical shop. One issue I am facing is related to finding a gridview linkbutton control inside a datalist in asp.net. Below is the code snippet: <asp:DataList ID="DataList1" runat="server"> ...

jqueryasp.net.netc#-4.0

Tips on making sure video player controls are always visible on an HTML5 video player

Can anyone help me with my HTML video player? I am trying to make the control bar display always, instead of just when hovered over. Any suggestions? ...

javascripthtmljquerycssvideo

Using AJAX to create an interactive dropdown menu with changing options

I have been working on creating a dropdown menu using Ajax. When hovering over the navigation bar, the menu successfully triggers the Ajax function to display the dropdown options. The issue arises when attempting to navigate to another page (show_activi ...

javascripthtmlcssajax

Dynamic font sizing in CSS allows text on a webpage to

I am working on creating a dynamic screen using AngularJS. Within this screen, there are objects with a specific size: .item { margin: auto; margin-bottom: 10px; width: 11vw; height: 11vw; text-overflow: ellipsis; overflow: hidden; } These i ...

javascripthtmlcssangularjsionic-framework

Tips for accessing information from a FOR loop within DIV tags

Let's explore the following code snippet: Here is the HTML generated: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Website ...

javascripthtmlcssvue.jsvuejs2

Dynatree fails to consider the select feature while utilizing ajax requests

Currently, I am utilizing the dynatree plugin to exhibit a checkbox tree in multi-select mode (mode 3). Upon initializing the tree using ajax (without lazy loading), it appears that certain nodes that were initially loaded as selected are forgotten. When ...

javascriptjqueryajaxjsondynatree