Switching Over to Burger Menu

I created a burger menu using HTML, CSS, and jQuery that switches from a full-width menu to a burger menu. However, I'm facing an issue with toggling the dropdown when the menu collapses. Here's my code:

<!DOCTYPE html>
<html>
  <head>
    <title>Hamburger Menu</title>
  </head>
  <body>
    <nav class="menu">
      <ul class="active">
        <li class="current-item"><a href="#">Home</a></li>
        <li><a href="#">My Work</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Get in Touch</a></li>
        <li><a href="#">Blog</a></li>
      </ul>

      <a class="toggle-nav" href="#">&#9776;</a>
    </nav>
    <style type="text/css">
      /*----- Toggle Button -----*/
      .toggle-nav {
        display:none;
      }

      /*----- Menu -----*/
      @media screen and (min-width: 860px) {
        .menu {
          width:100%;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }
      }

      .menu ul {
        display:inline-block;
      }

      .menu li {
        margin:0px 50px 0px 0px;
        float:left;
        list-style:none;
        font-size:17px;
      }

      .menu li:last-child {
        margin-right:0px;
      }

      .menu a {
        text-shadow:0px 1px 0px rgba(0,0,0,0.5);
        color:#777;
        transition:color linear 0.15s;
      }

      .menu a:hover, .menu .current-item a {
        text-decoration:none;
        color:#66a992;
      }
      /*----- Responsive -----*/
      @media screen and (max-width: 1150px) {
        .wrap {
          width:90%;
        }
      }

      @media screen and (max-width: 970px) {
        .search-form input {
          width:120px;
        }
      }

      @media screen and (max-width: 860px) {
        .menu {
          position:relative;
          display:inline-block;
        }

        .menu ul.active {
          display:none;
        }

        .menu ul {
          width:100%;
          position:absolute;
          top:120%;
          left:0px;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }

        .menu ul:after {
          width:0px;
          height:0px;
          position:absolute;
          top:0%;
          left:22px;
          content:'';
          transform:translate(0%, -100%);
          border-left:7px solid transparent;
          border-right:7px solid transparent;
          border-bottom:7px solid #303030;
        }

        .menu li {
          margin:5px 0px 5px 0px;
          float:none;
          display:block;
        }

        .menu a {
          display:block;
        }

        .toggle-nav {
          padding:20px;
          float:left;
          display:inline-block;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
          text-shadow:0px 1px 0px rgba(0,0,0,0.5);
          color:#777;
          font-size:20px;
          transition:color linear 0.15s;
        }

        .toggle-nav:hover, .toggle-nav.active {
          text-decoration:none;
          color:#66a992;
        }

        .search-form {
          margin:12px 0px 0px 20px;
          float:left;
        }

        .search-form input {
          box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
        }
      }</style>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        jQuery('.toggle-nav').click(function(e) {
          jQuery(this).toggleClass('active');
          jQuery('.menu ul').toggleClass('active');

          e.preventDefault();
        });
      });
    </script>
  </body>
</html>

Despite reviewing my code multiple times, I can't seem to figure out why the dropdown menu does not toggle when the menu transforms into a burger menu on smaller screens. Any help in identifying the issue would be greatly appreciated.

javascriptjqueryhtmlcssmenu

Answer №1

Don't forget to add the JQuery reference for it to work properly. Once you include it, everything will run smoothly. Check out the sample code in this fiddle:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

https://jsfiddle.net/abc123xyz/

Answer №2

I pasted your code into a fiddle and it appears to be functioning correctly.

Did you double-check to ensure that jQuery is not missing?

jQuery(document).ready(function() {
        jQuery('.toggle-nav').click(function(e) {
          jQuery(this).toggleClass('active');
          jQuery('.menu ul').toggleClass('active');

          e.preventDefault();
        });
      });
/*----- Toggle Button -----*/
      .toggle-nav {
        display:none;
      }

      /*----- Menu -----*/
      @media screen and (min-width: 860px) {
        .menu {
          width:100%;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }
      }

      .menu ul {
        display:inline-block;
      }

      .menu li {
        margin:0px 50px 0px 0px;
        float:left;
        list-style:none;
        font-size:17px;
      }

      .menu li:last-child {
        margin-right:0px;
      }

      .menu a {
        text-shadow:0px 1px 0px rgba(0,0,0,0.5);
        color:#777;
        transition:color linear 0.15s;
      }

      .menu a:hover, .menu .current-item a {
        text-decoration:none;
        color:#66a992;
      }
      /*----- Responsive -----*/
      @media screen and (max-width: 1150px) {
        .wrap {
          width:90%;
        }
      }

      @media screen and (max-width: 970px) {
        .search-form input {
          width:120px;
        }
      }

      @media screen and (max-width: 860px) {
        .menu {
          position:relative;
          display:inline-block;
        }

        .menu ul.active {
          display:none;
        }

        .menu ul {
          width:100%;
          position:absolute;
          top:120%;
          left:0px;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }

        .menu ul:after {
          width:0px;
          height:0px;
          position:absolute;
          top:0%;
          left:22px;
          content:'';
          transform:translate(0%, -100%);
          border-left:7px solid transparent;
          border-right:7px solid transparent;
          border-bottom:7px solid #303030;
        }

        .menu li {
          margin:5px 0px 5px 0px;
          float:none;
          display:block;
        }

        .menu a {
          display:block;
        }

        .toggle-nav {
          padding:20px;
          float:left;
          display:inline-block;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
          text-shadow:0px 1px 0px rgba(0,0,0,0.5);
          color:#777;
          font-size:20px;
          transition:color linear 0.15s;
        }

        .toggle-nav:hover, .toggle-nav.active {
          text-decoration:none;
          color:#66a992;
        }

        .search-form {
          margin:12px 0px 0px 20px;
          float:left;
        }

        .search-form input {
          box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
        }
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu">
      <ul class="active">
        <li class="current-item"><a href="#">Home</a></li>
        <li><a href="#">My Work</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Get in Touch</a></li>
        <li><a href="#">Blog</a></li>
      </ul>

      <a class="toggle-nav" href="#">&#9776;</a>
    </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

Displaying all items in the flexbox in a single row by decreasing the width of each individual box

After some tweaking, I now have a lineup of boxes styled like this: Check out the code in action on Codepen. Unfortunately, StackOverflow doesn't display it accurately. This is the CSS I implemented: @font-face { font-family: "Heebo-Light"; src: ...

htmlcssflexbox

Is there a way to modify my code to eliminate the need for a script for each individual record?

Whenever I need to create a code with the ID by browsing through my records, is there a way to make just one function for all the records? $tbody .= '<script> $(document).ready(function(){ $("#img'.$idImage .'").click(functi ...

javascriptphphtml

How can PHP be utilized to dynamically add classes to <li> elements and alternate them after every third item

I'm trying to find a way to add a class to an unordered list and alternate that class after every third item. Here's the code I have so far: <?php $i=1; foreach($this->items as $item) : ?> <li class="<?php if ($i % 3 == 0) : ...

phpcssaddclass

What is the best way to convert a graphql query into a JSON object?

I'm facing an issue where I need to convert a GraphQL query into a JSON object. Essentially, I have a query structured like the example below, and I'm seeking a method to obtain a JSON representation of this query. Despite my efforts in searching ...

javascriptjsonnpmgraphql

Should we pass <script> tags or unsanitized values to the Handlebars layout?

How can I pass values to handlebars that are not sanitized upon output? For instance, I want to ensure that when using the code res.render('index', {script: '<script src="bundle.js"></script>'}), it is not rendered as {{scri ...

javascriptexpresshandlebars.js

What is the reason behind Q.js promises becoming asynchronous once they have been resolved?

Upon encountering the following code snippet: var deferred = Q.defer(); deferred.resolve(); var a = deferred.promise.then(function() { console.log(1); }); console.log(2); I am puzzled as to why I am seeing 2, then 1 in the console. Although I ...

javascriptangularjspromise

JSON object name

Here are the specific file locations for loading each of the CSS and JS files. <link href="css/default.css" rel="stylesheet" /> <script src="js/main.js"></script> In XML, the filename is input as shown below ...

javascriptjsonxml

Angular JS is facing difficulties in being able to call upon another directive

I'm encountering an issue where including another directive related to the current one results in the following error message Error: [$compile:ctreq] http://errors.angularjs.org/1.2.10/$compile/ctreq?p0=myApp.pagereel&p1=ngTransclude Script.js ...

javascriptangularjs

Can using .wrap( ) negate the styling effects of the wrapper?

I am struggling with centering a button on my webpage. Currently, I have the following code for creating the button: var button = ($('<button>', { "id": "jspsych-free-sort-done-btn", "class": "jspsych-free-sort", ...

jqueryhtmlcsstext-align

What is causing the Bootstrap accordion to not display content when clicked on?

As a beginner in web development, I am currently working on my very first website. One issue I'm facing is with incorporating an accordion-style card in my webpage. Although it allows me to click on different titles, the collapsed ones fail to expand ...

htmlcssbootstrap-4

Unable to trigger jQuery .click event

Having recently delved into the world of AJAX, jQuery, and JavaScript, I am facing a challenge that I believe is rooted in a simple oversight on my part. Expressing this issue can be quite perplexing, but I'll do my utmost to articulate it clearly. I ...

javascriptjqueryajax

What is the best DOCTYPE declaration to implement?

After exploring various resources on DOCTYPE declaration and its variations - strict, transitional, and frameset, I am still struggling to grasp their distinctions. The specific confusion lies in understanding the variance between strict and transitional d ...

htmlxhtmldoctype

There was no popcorn mix-up in your document

Encountering an issue while using grunt for staging (grunt serve): Running "bower-install:app" (bower-install) task popcornjs was not injected into your file. Please check the "app\bower_components\popcornjs" directory for the required file, an ...

javascriptangularjsyeomanbowerpopcornjs

Group a set of x elements together within a div, and then group a distinct number of elements together after every x-grouping

Is there a way to achieve a looping structure like this? For instance: Group every 2 divs into a new div, then (after every 2nd grouping) group every 3 divs together <div id="container"> <div></div> <div></div> ... </div& ...

javascriptjqueryhtmlwrapall

What is the best way to transfer form data stored locally to a Django view and then store it in the database?

Is there a way to transfer form data from an offline website to a Django view for database storage? I want to fill out a form, save it in local storage, and then upload the data to the database when I reconnect to the internet. Is there a tutorial or can ...

jquerypythonajaxdjangohtml

Display images that have been uploaded on the page either as a grid view or a list of

In my Reactjs application, I am uploading multiple images to Azure Blob Storage. On a page, there is a button to open the upload form. Once the upload completes, I want to display all these images on the same page. Since the images have different aspect ...

javascripthtmlreactjs

Utilize MySQL/Javascript to determine percentages

I'm facing a challenge with an SQL query in Entrinsik's Informer. I need to calculate a percentage using JavaScript on the result, but unfortunately, Informer cannot access data down columns (such as the total for the percentage). Therefore, I ha ...

javascriptmysqlpercentage

Can you explain the significance of the <%= %> HTML tag?

I've recently been tackling a project with Webpack. For those not familiar, Webpack is a bundler that combines all your files into one final product. One task I encountered was trying to insert one HTML file into another, similar to an import or requ ...

javascripthtmlwebpacktags

The v-menu closes before the v-list-item onclick event is detected

I have set up the following menu using vue and vuetify: <div id="app"> <v-app id="inspire"> <div class="text-center"> <v-menu> <template v-slot:activator="{ on }"> ...

javascripthtmlvue.jsvuetify.js

Utilizing version 4 of Bootstrap to create a visually appealing full

I am currently using the latest version of bootstrap, but I have encountered an issue with my sidebar being too short and not reaching full height. You can view the problem here: Is this problem caused by my CSS or is it a bootstrap issue? And how can ...

htmlcsstwitter-bootstraptwitter-bootstrap-4